diff --git a/materialious/android/app/build.gradle b/materialious/android/app/build.gradle index 3d67f9d6..582a9dda 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 32 - versionName "1.3.3" + versionCode 33 + versionName "1.3.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/package.json b/materialious/electron/package.json index 0efe5f43..a5a6fe05 100644 --- a/materialious/electron/package.json +++ b/materialious/electron/package.json @@ -1,6 +1,6 @@ { "name": "Materialious", - "version": "1.3.3", + "version": "1.3.4", "description": "Modern material design for Invidious.", "author": { "name": "Ward Pearce", diff --git a/materialious/package.json b/materialious/package.json index 2bb70adf..115fabeb 100644 --- a/materialious/package.json +++ b/materialious/package.json @@ -1,6 +1,6 @@ { "name": "materialious", - "version": "1.3.3", + "version": "1.3.4", "private": true, "scripts": { "dev": "vite dev", diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte index 69bd66e2..43619844 100644 --- a/materialious/src/lib/Player.svelte +++ b/materialious/src/lib/Player.svelte @@ -4,7 +4,7 @@ import { page } from '$app/stores'; import { Capacitor } from '@capacitor/core'; import type { Page } from '@sveltejs/kit'; - import { SponsorBlock, type Category } from 'sponsorblock-api'; + import { SponsorBlock, type Category, type Segment } from 'sponsorblock-api'; import { onDestroy, onMount } from 'svelte'; import { _ } from 'svelte-i18n'; import { get } from 'svelte/store'; @@ -32,6 +32,7 @@ sponsorBlockCategoriesStore, sponsorBlockDisplayToastStore, sponsorBlockStore, + sponsorBlockTimelineStore, sponsorBlockUrlStore, synciousInstanceStore, synciousStore @@ -43,6 +44,7 @@ export let player: MediaPlayerElement; export let isSyncing: boolean = false; export let isEmbed: boolean = false; + export let segments: Segment[] = []; let src: PlayerSrc = []; let categoryBeingSkipped = ''; @@ -54,6 +56,50 @@ let silenceSkipperInterval: NodeJS.Timeout; + let sponsorBlockElements: Element[] = []; + + function setSponsorTimeline() { + if (!get(sponsorBlockTimelineStore)) return; + if (segments.length === 0) return; + + const timeline = document.getElementsByClassName('vds-time-slider')[0]; + + if (sponsorBlockElements.length > 0) { + sponsorBlockElements.forEach((barDiv) => { + if (timeline.contains(barDiv)) { + timeline.removeChild(barDiv); + } + }); + } + + const segmentColors = { + sponsor: '00d400', + selfpromo: 'ffff00', + interaction: 'cc00ff', + intro: '00ffff', + outro: '0202ed', + preview: '008fd6', + music_offtopic: 'ff9900', + filler: '7300FF' + }; + + segments.forEach((segment) => { + const startPercent = (segment.startTime / data.video.lengthSeconds) * 100; + const endPercent = (segment.endTime / data.video.lengthSeconds) * 100; + const widthPercent = endPercent - startPercent; + + const barDiv = document.createElement('div'); + barDiv.classList.add('sponsorskip-bar'); + barDiv.style.left = `${startPercent}%`; + barDiv.style.width = `${widthPercent}%`; + barDiv.style.backgroundColor = + segment.category in segmentColors ? `#${segmentColors[segment.category]}` : 'grey'; + + timeline.appendChild(barDiv); + sponsorBlockElements.push(barDiv); + }); + } + function loadTimeFromUrl(page: Page): boolean { if (player) { const timeGivenUrl = page.url.searchParams.get('time'); @@ -243,11 +289,17 @@ const sponsorBlock = new SponsorBlock('', { baseURL: sponsorBlockUrl }); try { - const segments = await sponsorBlock.getSegments( + segments = await sponsorBlock.getSegments( data.video.videoId, get(sponsorBlockCategoriesStore) as Category[] ); + setSponsorTimeline(); + + addEventListener('resize', () => { + setSponsorTimeline(); + }); + player.addEventListener('time-update', (event: MediaTimeUpdateEvent) => { segments.forEach((segment) => { if ( @@ -275,6 +327,9 @@ } player.addEventListener('dash-can-play', async () => { + if (get(playerAutoPlayStore)) { + player.play(); + } await loadPlayerPos(); }); } else { diff --git a/materialious/src/lib/Settings.svelte b/materialious/src/lib/Settings.svelte index 351adee6..8ec9d1fb 100644 --- a/materialious/src/lib/Settings.svelte +++ b/materialious/src/lib/Settings.svelte @@ -36,6 +36,7 @@ sponsorBlockCategoriesStore, sponsorBlockDisplayToastStore, sponsorBlockStore, + sponsorBlockTimelineStore, sponsorBlockUrlStore, synciousInstanceStore, synciousStore, @@ -552,6 +553,20 @@ + +

{$_('layout.sponsors.Catagories')}

diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json index b1228608..d7bff6a3 100644 --- a/materialious/src/lib/i18n/locales/en.json +++ b/materialious/src/lib/i18n/locales/en.json @@ -130,6 +130,7 @@ "sponsors": { "sponsor": "Sponsor", "disableToast": "Disable toast", + "disableTimeline": "Disable segments on timeline", "Catagories": "Catagories", "unpaidSelfPromotion": "Unpaid/Self Promotion", "interactionReminder": "Interaction Reminder (Subscribe)", diff --git a/materialious/src/lib/store.ts b/materialious/src/lib/store.ts index 1968e8ee..fdd2f72c 100644 --- a/materialious/src/lib/store.ts +++ b/materialious/src/lib/store.ts @@ -72,6 +72,10 @@ export const sponsorBlockDisplayToastStore: Writable = persisted( 'sponsorBlockDisplayToast', false ); +export const sponsorBlockTimelineStore: Writable = persisted( + 'sponsorBlockTimeline', + true +); export const deArrowInstanceStore = persisted( 'deArrowInstance', @@ -93,5 +97,4 @@ export const playlistSettingsStore: Writable = writable(null); - export const silenceSkipperStore: Writable = persisted('silenceSkipper', false); diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte index 708de8af..c3f2b42c 100644 --- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte +++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte @@ -40,6 +40,7 @@ } from '$lib/store'; import { mergeMediaFromDASH } from '$lib/videoDownload'; import type { DataConnection } from 'peerjs'; + import { type Segment } from 'sponsorblock-api'; import { onDestroy, onMount } from 'svelte'; import { _ } from 'svelte-i18n'; import { get } from 'svelte/store'; @@ -74,6 +75,8 @@ let audioMode = get(playerListenByDefaultStore); let player: MediaPlayerElement; + let segments: Segment[] = []; + let showTranscript = false; playlistSettingsStore.subscribe((playlistSetting) => { @@ -454,7 +457,13 @@
- +
{/key} @@ -482,8 +491,8 @@ Channel profile {/await}
-

{data.video.author}

-

{data.video.subCountText}

+

{data.video.author}

+

{data.video.subCountText}

diff --git a/materialious/static/style.css b/materialious/static/style.css index 52396fbe..6fedc174 100644 --- a/materialious/static/style.css +++ b/materialious/static/style.css @@ -27,6 +27,19 @@ margin-right: 5px !important; } +.sponsorskip-bar { + position: absolute; + margin-top: 2px; + height: 5px; + top: -1; + border-radius: 1em; +} + +.vds-time-slider { + position: relative !important; + width: 100% !important; +} + .vds-poster :where(img) { object-fit: cover !important; } diff --git a/update_versions.py b/update_versions.py index 8ef0dd8e..85047a29 100644 --- a/update_versions.py +++ b/update_versions.py @@ -5,7 +5,7 @@ import json import os import re -LATEST_VERSION = "1.3.3" +LATEST_VERSION = "1.3.4" WORKING_DIR = os.path.join(os.path.dirname(os.path.realpath(__file__)), "materialious") ROOT_PACKAGE = os.path.join(WORKING_DIR, "package.json")