diff --git a/materialious/android/app/build.gradle b/materialious/android/app/build.gradle index 96dc14e8..c6df2805 100644 --- a/materialious/android/app/build.gradle +++ b/materialious/android/app/build.gradle @@ -7,8 +7,8 @@ android { applicationId "us.materialio.app" minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion - versionCode 187 - versionName "1.13.3" + versionCode 188 + versionName "1.13.4" testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner" aaptOptions { // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps. diff --git a/materialious/electron/materialious.metainfo.xml b/materialious/electron/materialious.metainfo.xml index 96892db3..baa6445e 100644 --- a/materialious/electron/materialious.metainfo.xml +++ b/materialious/electron/materialious.metainfo.xml @@ -84,7 +84,11 @@ - + + + https://github.com/Materialious/Materialious/releases/tag/1.13.4 + + https://github.com/Materialious/Materialious/releases/tag/1.13.3 diff --git a/materialious/electron/package-lock.json b/materialious/electron/package-lock.json index 32d69b5c..ff4c646f 100644 --- a/materialious/electron/package-lock.json +++ b/materialious/electron/package-lock.json @@ -1,12 +1,12 @@ { "name": "Materialious", - "version": "1.13.3", + "version": "1.13.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "Materialious", - "version": "1.13.3", + "version": "1.13.4", "license": "MIT", "dependencies": { "@capacitor-community/electron": "^5.0.0", diff --git a/materialious/electron/package.json b/materialious/electron/package.json index eb3242d7..a8653c95 100644 --- a/materialious/electron/package.json +++ b/materialious/electron/package.json @@ -1,6 +1,6 @@ { "name": "Materialious", - "version": "1.13.3", + "version": "1.13.4", "description": "Modern material design for Invidious.", "author": { "name": "Ward Pearce", @@ -44,4 +44,4 @@ "capacitor", "electron" ] -} +} \ No newline at end of file diff --git a/materialious/package.json b/materialious/package.json index cb0ac974..70f63233 100644 --- a/materialious/package.json +++ b/materialious/package.json @@ -1,6 +1,6 @@ { "name": "materialious", - "version": "1.13.3", + "version": "1.13.4", "private": true, "scripts": { "dev": "npm run patch:github && vite dev", @@ -80,4 +80,4 @@ "youtubei.js": "^16.0.1", "zod": "^4.3.5" } -} +} \ No newline at end of file diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte index 61c1de76..522a9932 100644 --- a/materialious/src/lib/components/Player.svelte +++ b/materialious/src/lib/components/Player.svelte @@ -15,6 +15,7 @@ import { onDestroy, onMount, tick } from 'svelte'; import { _ } from '$lib/i18n'; import { get } from 'svelte/store'; + import { Slider } from 'melt/builders'; import { deleteVideoProgress, getVideoProgress, saveVideoProgress } from '../api'; import type { VideoPlay } from '../api/model'; import { @@ -104,6 +105,43 @@ let playerVideoEndTimePretty: string = $state(''); let playerBufferedTo: number = $state(0); let playerCloestTimestamp: Timestamp | undefined = $state(); + let playerSliderElement: HTMLElement | undefined = $state(); + // eslint-disable-next-line no-undef + let playerSliderDebounce: NodeJS.Timeout; + let playerVolumeElement: HTMLElement | undefined = $state(); + let playerHideBufferBar: boolean = $state(false); + let playerIsFullscreen: boolean = $state(false); + + const playerTimelineSlider = new Slider({ + min: 0, + step: 0.1, + value: () => playerCurrentTime, + onValueChange: (timeToSet) => { + playerHideBufferBar = true; + playerCurrentTime = timeToSet; + + if (playerSliderDebounce) clearTimeout(playerSliderDebounce); + + playerSliderDebounce = setTimeout(() => { + if (playerElement) { + playerElement.currentTime = timeToSet; + playerHideBufferBar = false; + } + }, 300); + }, + max: () => playerMaxKnownTime + }); + + const playerVolumeSlier = new Slider({ + onValueChange: (volumeToSet) => { + if (!playerElement) return; + playerElement.volume = volumeToSet; + }, + value: () => playerVolume, + max: 1, + min: 0, + step: 0.1 + }); // eslint-disable-next-line no-undef let playerAndroidUITimeout: NodeJS.Timeout; @@ -113,7 +151,6 @@ let clickCounterTimeout: NodeJS.Timeout; let seekDirection: 'forwards' | 'backwards' = $state('forwards'); - const STORAGE_KEY_VOLUME = 'shaka-preferred-volume'; playertheatreModeIsActive.subscribe(async () => { @@ -387,16 +424,13 @@ playerCurrentAudioTrack = audioTracks.find((track) => track.active); } - function handleTimeChange(event: Event) { - playerCurrentTime = parseFloat((event.target as HTMLInputElement).value); - if (playerElement) playerElement.currentTime = playerCurrentTime; - } - function toggleFullscreen() { if (document.fullscreenElement) { document.exitFullscreen(); + playerIsFullscreen = false; } else { playerContainer.requestFullscreen(); + playerIsFullscreen = true; } } @@ -819,8 +853,7 @@ playerElement.currentTime += frameTime; }); - const volumeContainer = document.getElementById('volume-slider'); - volumeContainer?.addEventListener('mousewheel', (event) => { + playerVolumeElement?.addEventListener('mousewheel', (event) => { event.preventDefault(); const delta = Math.sign((event as any).deltaY); const newVolume = Math.max( @@ -975,11 +1008,14 @@ if (requestAnimationTooltip) return; requestAnimationTooltip = requestAnimationFrame(() => { - const input = event.target as HTMLInputElement; - const rect = input.getBoundingClientRect(); + if (!playerSliderElement) return; + const rect = playerSliderElement.getBoundingClientRect(); playerTimelineMouseX = event.clientX - rect.left; - const percent = Math.min(Math.max(playerTimelineMouseX / input.clientWidth, 0), 1); + const percent = Math.min( + Math.max(playerTimelineMouseX / playerSliderElement.clientWidth, 0), + 1 + ); playerTimelineTimeHover = percent * (data.video.lengthSeconds ?? 0); playerCloestTimestamp = data.content.timestamps.find((chapter, chapterIndex) => { @@ -1176,41 +1212,38 @@ {#if showControls}
- + {/if} {#if playerTimelineTooltipVisible}
@@ -1236,20 +1269,16 @@ {#if Capacitor.getPlatform() !== 'android'} - +
+
+
+
+
+
{/if} {/if} @@ -1435,18 +1464,9 @@ pip {/if} -