Fix for mini player only working once per video

This commit is contained in:
WardPearce
2025-11-08 14:36:57 +13:00
parent ce382d6a45
commit 0f97cda0a7
4 changed files with 67 additions and 58 deletions
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "Materialious",
"version": "1.11.4",
"version": "1.11.5",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "Materialious",
"version": "1.11.4",
"version": "1.11.5",
"license": "MIT",
"dependencies": {
"@capacitor-community/electron": "^5.0.0",
+7 -8
View File
@@ -62,14 +62,13 @@ export const playerStatisticsByDefault = persisted('playerStatistics', false);
export const playerMiniplayerEnabled = persisted('miniplayerEnabled', true);
export const playerPlaylistHistory: Writable<string[]> = writable([]);
export const playerState: Writable<
| {
data: { video: VideoPlay; content: PhasedDescription; playlistId: string | null };
isSyncing?: boolean;
playerElement?: HTMLMediaElement | undefined;
}
| undefined
> = writable(undefined);
export interface PlayerState {
data: { video: VideoPlay; content: PhasedDescription; playlistId: string | null };
isSyncing?: boolean;
playerElement?: HTMLMediaElement | undefined;
}
export const playerState: Writable<PlayerState | undefined> = writable(undefined);
export const playertheatreModeIsActive = writable(false);
export const returnYtDislikesStore = persisted('returnYtDislikes', false);
+2 -1
View File
@@ -487,7 +487,7 @@
.pip {
position: fixed;
bottom: 10px;
right: 0;
right: 30px;
width: 400px;
z-index: 99999;
padding: 1em;
@@ -506,6 +506,7 @@
.pip {
width: 100%;
bottom: 100px;
right: 0px;
}
.pip > .pip-info > .player {
@@ -25,7 +25,8 @@
playlistCacheStore,
playlistSettingsStore,
syncPartyConnectionsStore,
syncPartyPeerStore
syncPartyPeerStore,
type PlayerState
} from '$lib/store';
import ui from 'beercss';
import type { DataConnection } from 'peerjs';
@@ -71,7 +72,7 @@
let premiereTime = $state('');
let premiereUpdateInterval: NodeJS.Timeout;
if (!data.video.premiereTimestamp) {
if (!data.video.premiereTimestamp && !$playerState) {
playerState.set({
data: data,
isSyncing: $syncPartyPeerStore !== null
@@ -223,53 +224,61 @@
playerSyncEvents(connections[connections.length - 1]);
});
onMount(() => {
async function load(state: PlayerState) {
playerElement = state.playerElement;
if (data.playlistId) {
await goToCurrentPlaylistItem();
playerPlaylistHistory.set([data.video.videoId, ...$playerPlaylistHistory]);
}
if ($interfaceAutoExpandChapters) {
expandSummery('chapter-section');
}
if ($syncPartyConnectionsStore) {
$syncPartyConnectionsStore.forEach((conn) => {
playerSyncEvents(conn);
});
}
if (playerElement) {
playerElement.addEventListener('timeupdate', () => {
if (!playerElement) return;
playerCurrentTime = playerElement.currentTime;
});
}
if (data.video.premiereTimestamp) {
premiereTime = humanFriendlyTimestamp(data.video.premiereTimestamp);
premiereUpdateInterval = setInterval(async () => {
data = await getWatchDetails(data.video.videoId, page.url);
if (data.video.premiereTimestamp) {
premiereTime = humanFriendlyTimestamp(data.video.premiereTimestamp);
} else {
clearInterval(premiereUpdateInterval);
playerState.set({ ...$playerState, data: { ...data } });
}
}, 60000);
}
}
onMount(async () => {
// Required due to needing the playerElement
let loadedPlayer = false;
playerState.subscribe(async (updatedPlayerState) => {
if (!updatedPlayerState?.playerElement || loadedPlayer) {
return;
}
loadedPlayer = true;
if ($playerState?.playerElement) {
await load($playerState);
} else {
let loadedPlayer = false;
playerState.subscribe(async (updatedPlayerState) => {
if (!updatedPlayerState?.playerElement || loadedPlayer) {
return;
}
loadedPlayer = true;
playerElement = updatedPlayerState.playerElement;
if (data.playlistId) {
await goToCurrentPlaylistItem();
playerPlaylistHistory.set([data.video.videoId, ...$playerPlaylistHistory]);
}
if ($interfaceAutoExpandChapters) {
expandSummery('chapter-section');
}
if ($syncPartyConnectionsStore) {
$syncPartyConnectionsStore.forEach((conn) => {
playerSyncEvents(conn);
});
}
if (playerElement) {
playerElement.addEventListener('timeupdate', () => {
if (!playerElement) return;
playerCurrentTime = playerElement.currentTime;
});
}
if (data.video.premiereTimestamp) {
premiereTime = humanFriendlyTimestamp(data.video.premiereTimestamp);
premiereUpdateInterval = setInterval(async () => {
data = await getWatchDetails(data.video.videoId, page.url);
if (data.video.premiereTimestamp) {
premiereTime = humanFriendlyTimestamp(data.video.premiereTimestamp);
} else {
clearInterval(premiereUpdateInterval);
playerState.set({ ...$playerState, data: { ...data } });
}
}, 60000);
}
});
await load(updatedPlayerState);
});
}
});
onDestroy(() => {