diff --git a/materialious/electron/package-lock.json b/materialious/electron/package-lock.json index 5bb91d9b..b34de83e 100644 --- a/materialious/electron/package-lock.json +++ b/materialious/electron/package-lock.json @@ -1,12 +1,12 @@ { "name": "Materialious", - "version": "1.13.5", + "version": "1.13.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "Materialious", - "version": "1.13.5", + "version": "1.13.6", "license": "MIT", "dependencies": { "@capacitor-community/electron": "^5.0.0", diff --git a/materialious/src/lib/components/Player.svelte b/materialious/src/lib/components/Player.svelte index 025eb81e..bce0c7e4 100644 --- a/materialious/src/lib/components/Player.svelte +++ b/materialious/src/lib/components/Player.svelte @@ -75,6 +75,16 @@ let segments: Segment[] = $state([]); let segmentManualSkip: Segment | undefined = $state(); + const sponsorSegments = { + sponsor: $_('layout.sponsors.sponsor'), + selfpromo: $_('layout.sponsors.unpaidSelfPromotion'), + interaction: $_('layout.sponsors.interactionReminder'), + intro: $_('layout.sponsors.intermissionIntroAnimation'), + outro: $_('layout.sponsors.credits'), + preview: $_('layout.sponsors.preViewRecapHook'), + filler: $_('layout.sponsors.tangentJokes'), + music_offtopic: $_('layout.sponsors.musicOffTopic') + }; let originalOrigination: ScreenOrientationResult | undefined; // eslint-disable-next-line no-undef @@ -98,12 +108,11 @@ let playerCurrentVideoTrack: shaka.extern.VideoTrack | undefined = $state(undefined); let playerCurrentAudioTrack: shaka.extern.AudioTrack | undefined = $state(undefined); let playerLoop = $state($playerAlwaysLoopStore); - let playerTimelineTooltipVisible: boolean = $state(false); let playerTimelineTimeHover: number = $state(0); - let playerTimelineMouseX: number = $state(0); let playerVideoEndTimePretty: string = $state(''); let playerBufferedTo: number = $state(0); let playerCloestTimestamp: Timestamp | undefined = $state(); + let playerCloestSponsor: Segment | undefined = $state(); let playerSliderElement: HTMLElement | undefined = $state(); // eslint-disable-next-line no-undef let playerSliderDebounce: NodeJS.Timeout; @@ -330,39 +339,41 @@ data.video.videoId, Object.keys($sponsorBlockCategoriesStore) as Category[] ); - - playerElement?.addEventListener('timeupdate', () => { - segments.forEach((segment) => { - if (!playerElement) return; - - if ( - playerElement.currentTime >= segment.startTime && - playerElement.currentTime <= segment.endTime - ) { - const segmentTrigger = $sponsorBlockCategoriesStore[segment.category]; - - if (segmentTrigger === 'automatic') { - skipSegment(segment); - } else if (segmentTrigger === 'manual') { - if (!segmentManualSkip) { - addToast({ - data: { - text: `${$_('upcomingSegment')} ${segment.category}`, - action: { - action: () => skipSegment(segment), - text: $_('skip') - } - } - }); - } - segmentManualSkip = segment; - } - } - }); - }); } catch (error) { console.error('Sponsorskip errored with:', error); } + + if (segments.length === 0) return; + + playerElement?.addEventListener('timeupdate', () => { + segments.forEach((segment) => { + if (!playerElement) return; + + if ( + playerElement.currentTime >= segment.startTime && + playerElement.currentTime <= segment.endTime + ) { + const segmentTrigger = $sponsorBlockCategoriesStore[segment.category]; + + if (segmentTrigger === 'automatic') { + skipSegment(segment); + } else if (segmentTrigger === 'manual') { + if (!segmentManualSkip) { + addToast({ + data: { + text: `${$_('upcomingSegment')} ${segment.category}`, + action: { + action: () => skipSegment(segment), + text: $_('skip') + } + } + }); + } + segmentManualSkip = segment; + } + } + }); + }); } } @@ -438,6 +449,12 @@ sabrAdapter = await injectSabr(data.video, player); + if (data.video.fallbackPatch === 'youtubejs') { + addToast({ data: { text: $_('player.youtubeJsFallBack') } }); + } + + setupSponsorSkip(); + player.addEventListener('loaded', () => { restoreQualityPreference(); restoreDefaultLanguage(); @@ -456,7 +473,6 @@ } // Auto save watch progress every minute. watchProgressInterval = setInterval(() => savePlayerPos(), 60000); - setupSponsorSkip(); let dashUrl: string; @@ -544,10 +560,6 @@ } } - if (data.video.fallbackPatch === 'youtubejs') { - addToast({ data: { text: $_('player.youtubeJsFallBack') } }); - } - if ($playerDefaultPlaybackSpeed && playerElement) { playerElement.playbackRate = $playerDefaultPlaybackSpeed; } @@ -1004,20 +1016,22 @@ } let requestAnimationTooltip: number | undefined; - function handleMouseMove(event: MouseEvent) { + function timelineMouseMove(event: MouseEvent) { if (requestAnimationTooltip) return; requestAnimationTooltip = requestAnimationFrame(() => { if (!playerSliderElement) return; const rect = playerSliderElement.getBoundingClientRect(); - playerTimelineMouseX = event.clientX - rect.left; const percent = Math.min( - Math.max(playerTimelineMouseX / playerSliderElement.clientWidth, 0), + Math.max((event.clientX - rect.left) / playerSliderElement.clientWidth, 0), 1 ); + playerTimelineTimeHover = percent * (data.video.lengthSeconds ?? 0); + document.documentElement.style.setProperty('--timeline-tooltip-left', `${percent * 100}%`); + playerCloestTimestamp = data.content.timestamps.find((chapter, chapterIndex) => { let endTime: number; if (chapterIndex === data.content.timestamps.length - 1) { @@ -1027,15 +1041,20 @@ } return playerTimelineTimeHover >= chapter.time && playerTimelineTimeHover < endTime; }); - playerTimelineTooltipVisible = true; + + if (segments.length > 0) { + playerCloestSponsor = segments.find((segment) => { + return ( + playerTimelineTimeHover >= segment.startTime && + playerTimelineTimeHover < segment.endTime + ); + }); + } + requestAnimationTooltip = undefined; }); } - function handleMouseLeave() { - playerTimelineTooltipVisible = false; - } - function onVideoClick( event: MouseEvent & { currentTarget: EventTarget & HTMLDivElement; @@ -1215,11 +1234,23 @@
+ {#if !playerUserManualSeeking} +
+ {#if playerCloestSponsor} + {sponsorSegments[playerCloestSponsor.category]} +
+ {:else if playerCloestTimestamp} + {playerCloestTimestamp.title} +
+ {/if} + + {videoLength(playerTimelineTimeHover)} +
+ {/if}
@@ -1253,17 +1284,6 @@ {/if}
- {#if playerTimelineTooltipVisible && !playerUserManualSeeking} -
- {#if playerCloestTimestamp} - {playerCloestTimestamp.title} -
- {/if} - - {videoLength(playerTimelineTimeHover)} -
- {/if} -