904 lines
16 KiB
JSON
904 lines
16 KiB
JSON
{
|
|
"title": "YT Player \u2014 Framework7 Swipe (light)",
|
|
"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": false,
|
|
"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."
|
|
}
|
|
]
|
|
}
|
|
]
|
|
} |