josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add M3E sketch of the Framework7 Swipe layout

Browse Source
This commit is contained in:
Jonathan Sykes
2026-10-06 04:20:05 +08:00
parent 1eda52e4c5
commit 5b259a1ac1
1 changed files with 904 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

904
docs/design/f7-swipe.json Normal file
View File

@@ -0,0 +1,904 @@
{
"title": "YT Player \u2014 Framework7 Swipe",
"brief": "Ad-free YouTube/worship player PWA. Framework7 iOS-style layout with swipe gestures, built on the app's own tokens.",
"frame": "phone",
"platform": "web",
"paletteKey": "coral",
"theme": {
"dark": true,
"bothModes": true,
"contrast": "standard",
"shape": "rounded",
"font": "system",
"emphasized": false,
"motion": "expressive"
},
"frames": [
{
"id": "search",
"name": "Search",
"x": 0,
"y": 0,
"note": "Home + search results. Big title, rounded search field, results as an inset grouped list.",
"swipe": {
"left": "queue"
}
},
{
"id": "queue",
"name": "Queue",
"x": 492,
"y": 0,
"note": "Queued songs. Swipe a row left for Playlist/Remove (long swipe removes), right for Queue. Swipe sideways on empty space to change tab.",
"swipe": {
"right": "search"
}
},
{
"id": "player",
"name": "Now playing",
"x": 984,
"y": 0,
"note": "Video on top, Apple Music\u2013style transport, icon action row. Swipe down to collapse to the mini player.",
"swipe": {
"down": "queue"
}
},
{
"id": "upnext",
"name": "Up next",
"x": 1476,
"y": 0,
"note": "Bottom sheet opened by swiping up on the mini player. Half height, drag up for full, down to close."
},
{
"id": "fullscreen",
"name": "Fullscreen",
"x": 1968,
"y": 0,
"note": "Edge-to-edge video (Fill by default). Minimal icon-only controls over a soft bottom gradient; auto-hide.",
"bg": "inverseSurface"
}
],
"groups": [
{
"id": "g2",
"x": 0,
"y": 0,
"axis": "x",
"items": [
{
"id": "i1",
"kind": "topAppBar",
"label": "Search",
"icon": "menu",
"variant": "filled",
"icon2": "directions_car",
"note": "Translucent navbar; menu opens the sidebar (also left-edge swipe)."
}
]
},
{
"id": "g4",
"x": 16,
"y": 96,
"axis": "x",
"items": [
{
"id": "i3",
"kind": "searchBar",
"label": "Search YouTube",
"icon": null,
"variant": "filled",
"icon2": "mic",
"note": "Rounded F7 searchbar with inline mic; Enter searches."
}
]
},
{
"id": "g8",
"x": 16,
"y": 164,
"axis": "x",
"items": [
{
"id": "i5",
"kind": "chip",
"label": "lofi beats",
"icon": null,
"variant": "filled"
},
{
"id": "i6",
"kind": "chip",
"label": "live news",
"icon": null,
"variant": "filled"
},
{
"id": "i7",
"kind": "chip",
"label": "worship",
"icon": null,
"variant": "filled"
}
]
},
{
"id": "g10",
"x": 16,
"y": 212,
"axis": "x",
"items": [
{
"id": "i9",
"kind": "text",
"label": "Results",
"icon": null,
"variant": "filled",
"size": 28,
"bold": true
}
]
},
{
"id": "g15",
"x": 16,
"y": 260,
"axis": "y",
"items": [
{
"id": "i11",
"kind": "listItem",
"label": "Goodness of God",
"icon": "smart_display",
"variant": "filled",
"supporting": "Bethel Music \u00b7 5:12",
"icon2": "more_horiz",
"action": {
"to": "player",
"transition": "slide"
}
},
{
"id": "i12",
"kind": "listItem",
"label": "Way Maker",
"icon": "smart_display",
"variant": "filled",
"supporting": "Leeland \u00b7 3:12",
"icon2": "more_horiz",
"action": {
"to": "player",
"transition": "slide"
}
},
{
"id": "i13",
"kind": "listItem",
"label": "Build My Life",
"icon": "smart_display",
"variant": "filled",
"supporting": "Housefires \u00b7 6:04",
"icon2": "more_horiz",
"action": {
"to": "player",
"transition": "slide"
}
},
{
"id": "i14",
"kind": "listItem",
"label": "Graves Into Gardens",
"icon": "smart_display",
"variant": "filled",
"supporting": "Elevation \u00b7 6:41",
"icon2": "more_horiz",
"action": {
"to": "player",
"transition": "slide"
}
}
]
},
{
"id": "g17",
"x": 16,
"y": 700,
"axis": "x",
"items": [
{
"id": "i16",
"kind": "listItem",
"label": "Way Maker",
"icon": "music_note",
"variant": "tonal",
"supporting": "Leeland \u00b7 3:12",
"icon2": "play_arrow",
"action": {
"to": "player",
"transition": "slideUp"
},
"note": "Floating glass mini player. Tap opens the player, swipe left/right = next/previous, swipe up = Up next sheet."
}
]
},
{
"id": "g19",
"x": 0,
"y": 788,
"axis": "x",
"items": [
{
"id": "i18",
"kind": "bottomNav",
"label": "",
"icon": null,
"variant": "filled",
"tabs": [
{
"icon": "search",
"label": "Search"
},
{
"icon": "queue_music",
"label": "Queue"
},
{
"icon": "history",
"label": "History"
},
{
"icon": "download_done",
"label": "Saved"
},
{
"icon": "more_horiz",
"label": "More"
}
],
"selected": 0,
"actions": {
"tab:0": {
"to": "search",
"transition": "fade"
},
"tab:1": {
"to": "queue",
"transition": "fade"
}
},
"note": "Translucent blurred tab bar; badge on Queue."
}
]
},
{
"id": "g21",
"x": 492,
"y": 0,
"axis": "x",
"items": [
{
"id": "i20",
"kind": "topAppBar",
"label": "Queue",
"icon": "menu",
"variant": "filled",
"icon2": "checklist"
}
]
},
{
"id": "g24",
"x": 508,
"y": 96,
"axis": "x",
"items": [
{
"id": "i22",
"kind": "button",
"label": "Play queue",
"icon": "play_arrow",
"variant": "filled",
"size": 182
},
{
"id": "i23",
"kind": "button",
"label": "Clear",
"icon": "clear_all",
"variant": "tonal",
"size": 182
}
]
},
{
"id": "g29",
"x": 508,
"y": 168,
"axis": "y",
"items": [
{
"id": "i25",
"kind": "listItem",
"label": "Way Maker",
"icon": "smart_display",
"variant": "filled",
"supporting": "Leeland \u00b7 3:12",
"icon2": "drag_handle",
"note": "Swipe right \u2192 Queue (accent action)."
},
{
"id": "i26",
"kind": "listItem",
"label": "Build My Life",
"icon": "smart_display",
"variant": "filled",
"supporting": "Housefires \u00b7 6:04",
"icon2": "drag_handle",
"note": "Swipe left \u2192 Playlist + Remove pills."
},
{
"id": "i27",
"kind": "listItem",
"label": "Graves Into Gardens",
"icon": "smart_display",
"variant": "filled",
"supporting": "Elevation \u00b7 6:41",
"icon2": "drag_handle",
"note": "Long swipe left removes the row."
},
{
"id": "i28",
"kind": "listItem",
"label": "Goodness of God",
"icon": "smart_display",
"variant": "filled",
"supporting": "Bethel Music \u00b7 5:12",
"icon2": "drag_handle",
"note": ""
}
]
},
{
"id": "g32",
"x": 508,
"y": 480,
"axis": "x",
"items": [
{
"id": "i30",
"kind": "button",
"label": "Playlist",
"icon": "playlist_add",
"variant": "tonal"
},
{
"id": "i31",
"kind": "button",
"label": "Remove",
"icon": "delete",
"variant": "filled"
}
]
},
{
"id": "g34",
"x": 508,
"y": 548,
"axis": "x",
"items": [
{
"id": "i33",
"kind": "text",
"label": "Swipe actions revealed (example row)",
"icon": null,
"variant": "filled",
"size": 14
}
]
},
{
"id": "g36",
"x": 508,
"y": 700,
"axis": "x",
"items": [
{
"id": "i35",
"kind": "listItem",
"label": "Way Maker",
"icon": "music_note",
"variant": "tonal",
"supporting": "Leeland \u00b7 3:12",
"icon2": "play_arrow",
"action": {
"to": "player",
"transition": "slideUp"
},
"note": "Floating glass mini player. Tap opens the player, swipe left/right = next/previous, swipe up = Up next sheet."
}
]
},
{
"id": "g38",
"x": 492,
"y": 788,
"axis": "x",
"items": [
{
"id": "i37",
"kind": "bottomNav",
"label": "",
"icon": null,
"variant": "filled",
"tabs": [
{
"icon": "search",
"label": "Search"
},
{
"icon": "queue_music",
"label": "Queue"
},
{
"icon": "history",
"label": "History"
},
{
"icon": "download_done",
"label": "Saved"
},
{
"icon": "more_horiz",
"label": "More"
}
],
"selected": 1,
"actions": {
"tab:0": {
"to": "search",
"transition": "fade"
},
"tab:1": {
"to": "queue",
"transition": "fade"
}
},
"note": "Translucent blurred tab bar; badge on Queue."
}
]
},
{
"id": "g40",
"x": 984,
"y": 0,
"axis": "x",
"items": [
{
"id": "i39",
"kind": "topAppBar",
"label": "Now playing",
"icon": "keyboard_arrow_down",
"variant": "filled",
"icon2": "more_horiz",
"actions": {
"icon": {
"to": "back",
"transition": "slideDown"
}
}
}
]
},
{
"id": "g42",
"x": 984,
"y": 88,
"axis": "x",
"items": [
{
"id": "i41",
"kind": "image",
"label": "",
"icon": null,
"variant": "filled",
"size": 412,
"note": "16:9 video stage; the fullscreen button opens Fullscreen."
}
]
},
{
"id": "g44",
"x": 1000,
"y": 320,
"axis": "x",
"items": [
{
"id": "i43",
"kind": "text",
"label": "Way Maker",
"icon": null,
"variant": "filled",
"size": 24,
"bold": true
}
]
},
{
"id": "g46",
"x": 1000,
"y": 356,
"axis": "x",
"items": [
{
"id": "i45",
"kind": "text",
"label": "Leeland",
"icon": null,
"variant": "filled",
"size": 16
}
]
},
{
"id": "g48",
"x": 1000,
"y": 396,
"axis": "x",
"items": [
{
"id": "i47",
"kind": "slider",
"label": "",
"icon": null,
"variant": "filled",
"value": 35,
"note": "Thin seek track, accent fill."
}
]
},
{
"id": "g54",
"x": 1048,
"y": 456,
"axis": "x",
"items": [
{
"id": "i49",
"kind": "iconButton",
"label": "",
"icon": "skip_previous",
"variant": "text"
},
{
"id": "i50",
"kind": "iconButton",
"label": "",
"icon": "replay_10",
"variant": "text"
},
{
"id": "i51",
"kind": "iconButton",
"label": "",
"icon": "play_arrow",
"variant": "filled"
},
{
"id": "i52",
"kind": "iconButton",
"label": "",
"icon": "forward_10",
"variant": "text"
},
{
"id": "i53",
"kind": "iconButton",
"label": "",
"icon": "skip_next",
"variant": "text"
}
]
},
{
"id": "g61",
"x": 1024,
"y": 540,
"axis": "x",
"items": [
{
"id": "i55",
"kind": "iconButton",
"label": "",
"icon": "playlist_add",
"variant": "text"
},
{
"id": "i56",
"kind": "iconButton",
"label": "",
"icon": "download",
"variant": "text"
},
{
"id": "i57",
"kind": "iconButton",
"label": "",
"icon": "lyrics",
"variant": "text"
},
{
"id": "i58",
"kind": "iconButton",
"label": "",
"icon": "share",
"variant": "text"
},
{
"id": "i59",
"kind": "iconButton",
"label": "",
"icon": "fullscreen",
"variant": "text",
"action": {
"to": "fullscreen",
"transition": "expand"
}
},
{
"id": "i60",
"kind": "iconButton",
"label": "",
"icon": "more_horiz",
"variant": "text"
}
]
},
{
"id": "g63",
"x": 984,
"y": 788,
"axis": "x",
"items": [
{
"id": "i62",
"kind": "bottomNav",
"label": "",
"icon": null,
"variant": "filled",
"tabs": [
{
"icon": "search",
"label": "Search"
},
{
"icon": "queue_music",
"label": "Queue"
},
{
"icon": "history",
"label": "History"
},
{
"icon": "download_done",
"label": "Saved"
},
{
"icon": "more_horiz",
"label": "More"
}
],
"selected": 1,
"actions": {
"tab:0": {
"to": "search",
"transition": "fade"
},
"tab:1": {
"to": "queue",
"transition": "fade"
}
},
"note": "Translucent blurred tab bar; badge on Queue."
}
]
},
{
"id": "g65",
"x": 1476,
"y": 0,
"axis": "x",
"items": [
{
"id": "i64",
"kind": "topAppBar",
"label": "Queue",
"icon": "menu",
"variant": "filled"
}
]
},
{
"id": "g67",
"x": 1476,
"y": 380,
"axis": "x",
"items": [
{
"id": "i66",
"kind": "box",
"label": "",
"icon": null,
"variant": "filled",
"size": 412,
"size2": 512,
"checked": true,
"fill": "surfaceContainerHigh",
"note": "F7 sheet with grab handle; backdrop tap closes."
}
]
},
{
"id": "g69",
"x": 1492,
"y": 404,
"axis": "x",
"items": [
{
"id": "i68",
"kind": "text",
"label": "Up next",
"icon": null,
"variant": "filled",
"size": 20,
"bold": true
}
]
},
{
"id": "g73",
"x": 1492,
"y": 448,
"axis": "y",
"items": [
{
"id": "i70",
"kind": "listItem",
"label": "Build My Life",
"icon": "smart_display",
"variant": "filled",
"supporting": "Housefires \u00b7 6:04",
"action": {
"to": "player",
"transition": "fade"
}
},
{
"id": "i71",
"kind": "listItem",
"label": "Graves Into Gardens",
"icon": "smart_display",
"variant": "filled",
"supporting": "Elevation \u00b7 6:41",
"action": {
"to": "player",
"transition": "fade"
}
},
{
"id": "i72",
"kind": "listItem",
"label": "Goodness of God",
"icon": "smart_display",
"variant": "filled",
"supporting": "Bethel Music \u00b7 5:12",
"action": {
"to": "player",
"transition": "fade"
}
}
]
},
{
"id": "g75",
"x": 1968,
"y": 0,
"axis": "x",
"items": [
{
"id": "i74",
"kind": "box",
"label": "",
"icon": null,
"variant": "filled",
"size": 412,
"size2": 892,
"fill": "inverseSurface",
"note": "Video fills the screen (object-fit cover). Fit/Fill toggle in the controls."
}
]
},
{
"id": "g77",
"x": 1984,
"y": 24,
"axis": "x",
"items": [
{
"id": "i76",
"kind": "text",
"label": "Way Maker \u2014 Leeland",
"icon": null,
"variant": "filled",
"size": 14
}
]
},
{
"id": "g79",
"x": 2316,
"y": 12,
"axis": "x",
"items": [
{
"id": "i78",
"kind": "iconButton",
"label": "",
"icon": "fullscreen_exit",
"variant": "text",
"action": {
"to": "player",
"transition": "fade"
}
}
]
},
{
"id": "g81",
"x": 1984,
"y": 790,
"axis": "x",
"items": [
{
"id": "i80",
"kind": "slider",
"label": "",
"icon": null,
"variant": "filled",
"value": 35
}
]
},
{
"id": "g85",
"x": 1984,
"y": 828,
"axis": "x",
"items": [
{
"id": "i82",
"kind": "iconButton",
"label": "",
"icon": "pause",
"variant": "text"
},
{
"id": "i83",
"kind": "iconButton",
"label": "",
"icon": "screen_rotation",
"variant": "text"
},
{
"id": "i84",
"kind": "iconButton",
"label": "",
"icon": "fit_screen",
"variant": "text",
"note": "Fit \u2194 Fill."
}
]
}
]
}