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%);
+ }
+}