diff --git a/README.md b/README.md
index fcc8fca8..4257ddf0 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,6 @@ Modern material design for Invidious
- Audio only mode.
## Todo
-- Port to [vidstack](https://www.vidstack.io/) once dash is supported.
- Complete channel view.
- Add different search filters.
- Playlist support.
diff --git a/materialious/src/lib/Api/index.ts b/materialious/src/lib/Api/index.ts
index 73d9fe65..cdd58c56 100644
--- a/materialious/src/lib/Api/index.ts
+++ b/materialious/src/lib/Api/index.ts
@@ -1,9 +1,9 @@
import { get } from 'svelte/store';
-import { auth, invidiousInstance, returnYTDislikesInstance } from '../../store';
+import { auth, returnYTDislikesInstance } from '../../store';
import type { Channel, Comments, ReturnYTDislikes, SearchSuggestion, Subscription, Video, VideoPlay } from './model';
export function buildPath(path: string): string {
- return `${get(invidiousInstance)}/api/v1/${path}`;
+ return `${import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE}/api/v1/${path}`;
}
export function buildAuthHeaders(): { headers: { Authorization: string; }; } {
diff --git a/materialious/src/lib/Api/model.ts b/materialious/src/lib/Api/model.ts
index b254178f..32c49b8b 100644
--- a/materialious/src/lib/Api/model.ts
+++ b/materialious/src/lib/Api/model.ts
@@ -69,7 +69,7 @@ export interface FormatStreams {
export interface Captions {
label: string;
- languageCode: string;
+ language_code: string;
url: string;
};
diff --git a/materialious/src/lib/Player.svelte b/materialious/src/lib/Player.svelte
index b1696210..31959e61 100644
--- a/materialious/src/lib/Player.svelte
+++ b/materialious/src/lib/Player.svelte
@@ -6,8 +6,6 @@
import { get } from 'svelte/store';
import type { MediaTimeUpdateEvent, PlayerSrc } from 'vidstack';
import type { MediaPlayerElement } from 'vidstack/elements';
- import { MediaQualityRadioGroupElement, defineCustomElement } from 'vidstack/elements';
- import 'vidstack/icons';
import {
playerAlwaysLoop,
playerAutoPlay,
@@ -19,8 +17,6 @@
} from '../store';
import type { VideoPlay } from './Api/model';
- defineCustomElement(MediaQualityRadioGroupElement);
-
export let data: { video: VideoPlay };
export let currentTime: number = 0;
export let audioMode = false;
@@ -28,6 +24,7 @@
let player: MediaPlayerElement;
let src: PlayerSrc = [];
let categoryBeingSkipped = '';
+ let captions: { label: string; srcLang: string; src: string }[] = [];
export function seekTo(time: number) {
if (typeof player !== 'undefined') {
@@ -39,6 +36,17 @@
onMount(async () => {
if (!data.video.hlsUrl) {
+ if (data.video.captions) {
+ data.video.captions.forEach(async (caption) => {
+ player.textTracks.add({
+ label: caption.label,
+ kind: 'captions',
+ language: caption.language_code,
+ src: `${import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE}${caption.url}`
+ });
+ });
+ }
+
player.addEventListener('time-update', () => {
currentTime = player.currentTime;
});
@@ -141,14 +149,17 @@
{src}
>
-
+ {#if !audioMode}
+
+ {/if}
-
{#if data.video.storyboards && data.video.storyboards.length > 3}
+ {:else}
+
{/if}
diff --git a/materialious/src/store.ts b/materialious/src/store.ts
index bd2d3ac4..2b7f6aea 100644
--- a/materialious/src/store.ts
+++ b/materialious/src/store.ts
@@ -1,7 +1,6 @@
import { persisted } from 'svelte-persisted-store';
import { writable, type Writable } from 'svelte/store';
-export const invidiousInstance = persisted('invidiousInstance', import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE);
export const returnYTDislikesInstance = persisted('returnYTDislikesInstance', import.meta.env.VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE);
export const darkMode: Writable = persisted("darkMode", null);
export const themeColor: Writable = persisted("themeColor", null);