From b8fa8097fa635a33e1278320a43810a083e7d372 Mon Sep 17 00:00:00 2001 From: WardPearce Date: Sat, 26 Apr 2025 03:27:06 +1200 Subject: [PATCH] Improved player theme --- .../android/.idea/AndroidProjectSystem.xml | 6 + materialious/android/.idea/compiler.xml | 2 +- materialious/android/.idea/misc.xml | 3 +- materialious/android/.idea/other.xml | 549 ------------------ .../android/.idea/runConfigurations.xml | 17 + materialious/src/lib/components/Player.svelte | 8 +- .../src/lib/css/shaka-player-theme.css | 341 +++++------ 7 files changed, 183 insertions(+), 743 deletions(-) create mode 100644 materialious/android/.idea/AndroidProjectSystem.xml delete mode 100644 materialious/android/.idea/other.xml create mode 100644 materialious/android/.idea/runConfigurations.xml diff --git a/materialious/android/.idea/AndroidProjectSystem.xml b/materialious/android/.idea/AndroidProjectSystem.xml new file mode 100644 index 00000000..4a53bee8 --- /dev/null +++ b/materialious/android/.idea/AndroidProjectSystem.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/materialious/android/.idea/compiler.xml b/materialious/android/.idea/compiler.xml index b589d56e..b86273d9 100644 --- a/materialious/android/.idea/compiler.xml +++ b/materialious/android/.idea/compiler.xml @@ -1,6 +1,6 @@ - + \ No newline at end of file diff --git a/materialious/android/.idea/misc.xml b/materialious/android/.idea/misc.xml index 8978d23d..dddfeda8 100644 --- a/materialious/android/.idea/misc.xml +++ b/materialious/android/.idea/misc.xml @@ -1,6 +1,7 @@ + - + diff --git a/materialious/android/.idea/other.xml b/materialious/android/.idea/other.xml deleted file mode 100644 index 22069ff9..00000000 --- a/materialious/android/.idea/other.xml +++ /dev/null @@ -1,549 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/materialious/android/.idea/runConfigurations.xml b/materialious/android/.idea/runConfigurations.xml new file mode 100644 index 00000000..16660f1d --- /dev/null +++ b/materialious/android/.idea/runConfigurations.xml @@ -0,0 +1,17 @@ + + + + + + \ No newline at end of file diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte index 0c98a23b..3db43052 100644 --- a/materialious/src/lib/components/Player.svelte +++ b/materialious/src/lib/components/Player.svelte @@ -36,7 +36,7 @@ synciousInstanceStore, synciousStore } from '../store'; - import { setStatusBarColor } from '../theme'; + import { getDynamicTheme, setStatusBarColor } from '../theme'; interface Props { data: { video: VideoPlay; content: PhasedDescription; playlistId: string | null }; @@ -157,10 +157,12 @@ 'playback_rate', 'loop', 'language', - Capacitor.getPlatform() === 'android' ? '' : 'save_video_frame', 'statistics' ], - enableTooltips: true + enableTooltips: true, + seekBarColors: { + played: (await getDynamicTheme())['--primary'] + } }); player.configure({ diff --git a/materialious/src/lib/css/shaka-player-theme.css b/materialious/src/lib/css/shaka-player-theme.css index e54e5113..4188a110 100644 --- a/materialious/src/lib/css/shaka-player-theme.css +++ b/materialious/src/lib/css/shaka-player-theme.css @@ -1,309 +1,272 @@ .youtube-theme { - font-family: 'Roboto', sans-serif; + font-family: var(--font); + color: var(--on-surface); +} + +.youtube-theme .shaka-video-container * { + font-family: var(--font); + color: var(--on-surface); } .youtube-theme .shaka-bottom-controls { - width: 100%; - padding: 0; - padding-bottom: 0; - z-index: 1; -} - -.youtube-theme .shaka-bottom-controls { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -ms-flex-direction: column; - flex-direction: column; + width: 100%; + padding: 0; + padding-bottom: 0; + z-index: 1; + display: flex; + flex-direction: column; } .youtube-theme .shaka-ad-controls { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; + order: 1; } .youtube-theme .shaka-controls-button-panel { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; - height: 40px; - padding: 0 10px; + order: 2; + height: 2.5rem; /* 40px */ + padding: 0 0.625rem; /* 10px */ } .youtube-theme .shaka-range-container { - margin: 4px 10px 4px 10px; - top: 0; + margin: 0.25rem 0.625rem; /* 4px 10px */ + top: 0; } .youtube-theme .shaka-small-play-button { - -webkit-box-ordinal-group: -2; - -ms-flex-order: -3; - order: -3; + order: -3; } .youtube-theme .shaka-mute-button { - -webkit-box-ordinal-group: -1; - -ms-flex-order: -2; - order: -2; + order: -2; } -.youtube-theme .shaka-controls-button-panel>* { - margin: 0; - padding: 3px 8px; - color: #fff; - height: 40px; - font-size: 2em; +.youtube-theme .shaka-controls-button-panel > * { + margin: 0; + padding: 0.1875rem 0.5rem; /* 3px 8px */ + color: #fff; + height: 2.5rem; /* 40px */ + font-size: 2rem; /* 32px */ } -.youtube-theme .shaka-controls-button-panel>*:hover { - color: var(--primary); +.youtube-theme .shaka-controls-button-panel > *:hover { + color: var(--primary); } -.youtube-theme .shaka-controls-button-panel>*:focus { - outline: none; - -webkit-box-shadow: inset 0 0 0 2px var(--primary); - box-shadow: inset 0 0 0 2px var(--primary); - color: var(--primary); +.youtube-theme .shaka-controls-button-panel > *:focus { + outline: none; + box-shadow: inset 0 0 0 2px var(--primary); + color: var(--primary); } - .youtube-theme .shaka-controls-button-panel .shaka-volume-bar-container { - -webkit-transition: width 0.2s cubic-bezier(0.4, 0, 1, 1); - transition: width 0.2s cubic-bezier(0.4, 0, 1, 1); - height: 3px; - padding: 0; + height: 0.1875rem; /* 3px */ + padding: 0; } .youtube-theme .shaka-controls-button-panel .shaka-volume-bar-container:hover, .youtube-theme .shaka-controls-button-panel .shaka-volume-bar-container:focus { - display: block; - opacity: 1; - padding: 0 6px; + display: block; + opacity: 1; + padding: 0 0.375rem; /* 6px */ } -.youtube-theme .shaka-mute-button:hover+div { - opacity: 1; - width: 50px; - padding: 0 6px; +.youtube-theme .shaka-mute-button:hover + div { + opacity: 1; + width: 3.125rem; /* 50px */ + padding: 0 0.375rem; /* 6px */ } .youtube-theme .shaka-current-time { - padding: 0 10px; - font-size: 1em; - color: var(--white-text) !important; + padding: 0 0.625rem; /* 10px */ + font-size: 1rem; /* 16px */ + color: #fff !important; } .youtube-theme .shaka-seek-bar-container { - height: 3px; - position: relative; - top: -1px; - border-radius: 0; - margin-bottom: 0; + height: 0.1875rem; /* 3px */ + position: relative; + top: -0.0625rem; /* -1px */ + margin-bottom: 0; + border-radius: 0; } .youtube-theme .shaka-seek-bar-container .shaka-range-element { - opacity: 0; + opacity: 0; } .youtube-theme .shaka-seek-bar-container:hover { - height: 5px; - top: 0; - cursor: pointer; + height: 0.3125rem; /* 5px */ + top: 0; + cursor: pointer; } .youtube-theme .shaka-seek-bar-container:hover .shaka-range-element { - opacity: 1; - cursor: pointer; + opacity: 1; + cursor: pointer; } -.youtube-theme .shaka-seek-bar-container input[type=range]::-webkit-slider-thumb { - background: var(--primary); - cursor: pointer; -} - -.youtube-theme .shaka-seek-bar-container input[type=range]::-moz-range-thumb { - background: var(--primary); - cursor: pointer; -} - -.youtube-theme .shaka-seek-bar-container input[type=range]::-ms-thumb { - background: var(--primary); - cursor: pointer; -} - -.youtube-theme .shaka-video-container * { - font-family: 'Roboto', sans-serif; +.youtube-theme .shaka-seek-bar-container input[type='range']::-webkit-slider-thumb, +.youtube-theme .shaka-seek-bar-container input[type='range']::-moz-range-thumb, +.youtube-theme .shaka-seek-bar-container input[type='range']::-ms-thumb { + background: var(--primary); + cursor: pointer; } .youtube-theme .shaka-overflow-menu, .youtube-theme .shaka-settings-menu { - border-radius: 0.25em; - background: var(--surface-dim); - transition: opacity 0.1s cubic-bezier(0, 0, 0.2, 1); - right: 10px; - bottom: 50px; - padding: 8px 0; - min-width: 200px; + border-radius: 0.25rem; + background-color: var(--surface-container-low); + right: 0.625rem; /* 10px */ + bottom: 3.125rem; /* 50px */ + min-width: 12.5rem; /* 200px */ + transition: + transform var(--speed3), + border-radius var(--speed3), + padding var(--speed3); } .youtube-theme .shaka-settings-menu { - padding: 0 0 8px 0; + padding-bottom: 0.5rem; /* 8px */ } .youtube-theme .shaka-settings-menu button { - font-size: 1em; - border: none; - margin: 0; + font-size: 1rem; /* 16px */ + border: none; + margin: 0; } .youtube-theme .shaka-settings-menu button span { - margin-left: 33px; - font-size: 1em; + margin-left: 2.0625rem; /* 33px */ + font-size: 1rem; /* 16px */ } -.youtube-theme .shaka-settings-menu button[aria-selected="true"] { - display: -webkit-box; - display: -ms-flexbox; - display: flex; +.youtube-theme .shaka-settings-menu button[aria-selected='true'] { + display: flex; } -.youtube-theme .shaka-settings-menu button[aria-selected="true"] span { - -webkit-box-ordinal-group: 3; - -ms-flex-order: 2; - order: 2; - margin-left: 0; +.youtube-theme .shaka-settings-menu button[aria-selected='true'] span { + order: 2; + margin-left: 0; } -.youtube-theme .shaka-settings-menu button[aria-selected="true"] i { - -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; - order: 1; - font-size: 1em; - padding-left: 5px; +.youtube-theme .shaka-settings-menu button[aria-selected='true'] i { + order: 1; + font-size: 1rem; /* 16px */ + padding-left: 0.3125rem; /* 5px */ } -.youtube-theme .shaka-overflow-menu button { - padding: 0; +.youtube-theme .shaka-overflow-menu button, +.youtube-theme .shaka-settings-menu button { + padding: 0; + margin-bottom: 0.5em; } .youtube-theme .shaka-overflow-menu button i { - display: none; + display: none; } .youtube-theme .shaka-overflow-menu button .shaka-overflow-button-label { - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -ms-flex-direction: row; - flex-direction: row; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - cursor: default; - outline: none; - height: 40px; - -webkit-box-flex: 0; - -ms-flex: 0 0 100%; - flex: 0 0 100%; + display: flex; + align-items: start; + cursor: default; + outline: none; + height: 2.5rem; /* 40px */ + flex: 0 0 100%; +} + +.shaka-settings-menu { + padding: 0.5em; +} + +.shaka-settings-menu button { + gap: 0; + justify-content: start; } .youtube-theme .shaka-overflow-menu button .shaka-overflow-button-label span { - -ms-flex-negative: initial; - flex-shrink: initial; - padding-left: 15px; - font-size: 1em; - font-weight: 500; - display: -webkit-box; - display: -ms-flexbox; - display: flex; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; + flex-shrink: 0; + padding-left: 0.9375rem; /* 15px */ + font-size: 1rem; /* 16px */ + display: flex; + align-items: center; } -.youtube-theme .shaka-overflow-menu span+span { - color: var(--primary-text); - font-weight: 400 !important; - font-size: 1em !important; - padding-right: 8px; - padding-left: 0 !important; +.shaka-overflow-button-label span:not(.shaka-current-selection-span) { + font-weight: bold !important; } - -.youtube-theme .shaka-overflow-menu .shaka-pip-button span+span { - padding-right: 15px !important; +.youtube-theme .shaka-overflow-menu span + span { + color: var(--primary-text); + font-weight: 400 !important; + font-size: 1rem !important; + padding-right: 0.5rem; /* 8px */ } -.youtube-theme .shaka-overflow-menu .shaka-pip-button span+span:after { - content: ""; +.youtube-theme .shaka-overflow-menu .shaka-pip-button span + span { + padding-right: 0.9375rem !important; /* 15px */ +} + +.youtube-theme .shaka-overflow-menu .shaka-pip-button span + span:after { + content: ''; } .youtube-theme .shaka-back-to-overflow-button { - padding: 8px 0; - border-bottom: 1px solid rgba(255, 255, 255, 0.2); - font-size: 1em; - color: var(--primary-text); - height: 40px; + padding: 0.5rem 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.2); + font-size: 1rem; /* 16px */ + color: var(--primary-text); + height: 2.5rem; /* 40px */ } .youtube-theme .shaka-back-to-overflow-button .material-icons-round { - font-size: 1em; - padding-right: 10px; + font-size: 1rem; /* 16px */ + padding-right: 0.625rem; /* 10px */ } .youtube-theme .shaka-back-to-overflow-button span { - margin-left: 3px !important; + margin-left: 0.1875rem !important; /* 3px */ } .youtube-theme .shaka-overflow-menu button:hover, .youtube-theme .shaka-settings-menu button:hover { - background-color: var(--surface-bright); - cursor: pointer; + background-color: var(--surface-bright); + cursor: pointer; } .youtube-theme .shaka-overflow-menu button:hover label, .youtube-theme .shaka-settings-menu button:hover label { - cursor: pointer; + cursor: pointer; } .youtube-theme .shaka-overflow-menu button:focus, .youtube-theme .shaka-settings-menu button:focus { - background-color: var(--surface-bright); - border: none; - outline: none; + background-color: var(--surface-bright); + border: none; + outline: none; } + .youtube-theme .shaka-overflow-menu button, .youtube-theme .shaka-settings-menu button { - color: var(--primary-text); + color: var(--primary-text); } .youtube-theme .shaka-captions-off { - color: var(--surface-bright); + color: var(--surface-bright); } .youtube-theme .shaka-overflow-menu-button { - font-size: 1em; - margin-right: 5px; -} - -.youtube-theme .shaka-fullscreen-button:hover { - font-size: 1em; - -webkit-transition: font-size 0.1s cubic-bezier(0, 0, 0.2, 1); - transition: font-size 0.1s cubic-bezier(0, 0, 0.2, 1); + font-size: 1rem; /* 16px */ + margin-right: 0.3125rem; /* 5px */ } @media screen and (max-width: 650px) { - .youtube-theme .shaka-overflow-menu, - .youtube-theme .shaka-settings-menu { - top: 10px; - position: absolute; - } -} \ No newline at end of file + .youtube-theme .shaka-overflow-menu, + .youtube-theme .shaka-settings-menu { + min-width: 100%; + position: fixed; + top: 75%; + left: 50%; + height: 50vh; + transform: translate(-50%, -50%); + } +}