blade/materialious
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved premiere handling

Browse Source
This commit is contained in:
WardPearce
2025-11-04 22:36:35 +13:00
parent 3f7981b93c
commit 509eea83de
14 changed files with 119 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
materialious/electron/package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "Materialious",
"version": "1.10.18",
"version": "1.11.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "Materialious",
"version": "1.10.18",
"version": "1.11.0",
"license": "MIT",
"dependencies": {
"@capacitor-community/electron": "^5.0.0",
materialious/electron/package.json
+1 -1
View File
@@ -44,4 +44,4 @@
"capacitor",
"electron"
]
}
}
materialious/package-lock.json
Generated
+9 -2
View File
@@ -1,12 +1,12 @@
{
"name": "materialious",
"version": "1.10.18",
"version": "1.11.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "materialious",
"version": "1.10.18",
"version": "1.11.0",
"hasInstallScript": true,
"dependencies": {
"@capacitor-community/electron": "^5.0.1",
@@ -20,6 +20,7 @@
"beercss": "^3.12.11",
"bgutils-js": "^3.2.0",
"capacitor-nodejs": "https://github.com/hampoelz/capacitor-nodejs/releases/download/v1.0.0-beta.9/capacitor-nodejs.tgz",
"dayjs": "^1.11.19",
"fuse.js": "^7.0.0",
"googlevideo": "^4.0.4",
"he": "^1.2.0",
@@ -5235,6 +5236,12 @@
"node": "*"
}
},
"node_modules/dayjs": {
"version": "1.11.19",
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
"integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
"license": "MIT"
},
"node_modules/debug": {
"version": "4.3.4",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
materialious/package.json
+2 -1
View File
@@ -53,6 +53,7 @@
"beercss": "^3.12.11",
"bgutils-js": "^3.2.0",
"capacitor-nodejs": "https://github.com/hampoelz/capacitor-nodejs/releases/download/v1.0.0-beta.9/capacitor-nodejs.tgz",
"dayjs": "^1.11.19",
"fuse.js": "^7.0.0",
"googlevideo": "^4.0.4",
"he": "^1.2.0",
@@ -70,4 +71,4 @@
"svelte-persisted-store": "^0.12.0",
"youtubei.js": "^16.0.1"
}
}
}
materialious/src/lib/api/model.ts
+1 -1
View File
@@ -38,7 +38,7 @@ export interface Video extends VideoBase {
descriptionHtml: string;
published: number;
publishedText: string;
premiereTimestamp: number;
premiereTimestamp?: number;
liveNow: boolean;
premium: boolean;
isUpcoming: boolean;
materialious/src/lib/components/Player.svelte
+1 -10
View File
@@ -863,7 +863,7 @@
</div>
{#if showVideoRetry}
<article class="fallback">
<article class="video-placeholder">
{#if $playerYouTubeJsFallback}
<p>{$_('player.youtubeJsLoading')}</p>
<progress class="circle large"></progress>
@@ -930,13 +930,4 @@
.hide {
display: none;
}
.fallback {
height: 30vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
materialious/src/lib/components/Search.svelte
+5 -3
View File
@@ -11,6 +11,7 @@
searchHistoryStore
} from '../store';
import { isVideoID } from '$lib/misc';
import { resolve } from '$app/paths';
const dispatch = createEventDispatcher();
@@ -38,15 +39,16 @@
}
function handleSubmit(event: Event | undefined = undefined) {
if (event) event.preventDefault();
event?.preventDefault();
const searchTrimed = search.trim();
if (searchTrimed) return;
if (!searchTrimed) return;
if (isVideoID(searchTrimed)) {
// Go directly to video if Video ID provided
goto(`/watch/${searchTrimed}`);
goto(resolve('/watch/[videoId]', { videoId: searchTrimed }));
return;
}
selectedSuggestionIndex = -1;
materialious/src/lib/css/global.css
+9
View File
@@ -51,6 +51,15 @@ dialog {
padding: 1em !important;
}
.video-placeholder {
height: 30vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
@media screen and (max-width: 1000px) {
menu.mobile {
position: fixed !important;
materialious/src/lib/i18n/index.ts
+13 -1
View File
@@ -1,6 +1,8 @@
import i18next, { type InitOptions } from 'i18next';
import { writable, type Writable } from 'svelte/store';
import dayjs from 'dayjs';
const defaultLocale = 'en';
export const locale: Writable<string> = writable(defaultLocale);
@@ -40,6 +42,13 @@ function getUserLocale(): string {
return defaultLocale;
}
async function loadDayjsLocale(localeName: string) {
try {
const { default: locale } = await import(`dayjs/locale/${localeName}`);
dayjs.locale(locale);
} catch {}
}
export async function initI18n(selectedLocale: string = getUserLocale()): Promise<void> {
const langToLoad = resources[selectedLocale] ? selectedLocale : defaultLocale;
const translations = await resources[langToLoad]();
@@ -63,8 +72,11 @@ export async function initI18n(selectedLocale: string = getUserLocale()): Promis
locale.set(langToLoad);
_.set(i18next.t.bind(i18next));
window.addEventListener('languagechange', () => {
await loadDayjsLocale(selectedLocale);
window.addEventListener('languagechange', async () => {
const newLang = getUserLocale();
initI18n(newLang);
await loadDayjsLocale(newLang);
});
}
materialious/src/lib/i18n/locales/en.json
+1 -1
View File
@@ -2,7 +2,6 @@
"enabled": "Enabled",
"disabled": "Disabled",
"premium": "Premium YouTube content can't be watched on Materialious.",
"isUpcoming": "Video is not in a watchable state yet.",
"copyUrl": "Copy URL",
"loadMore": "Load more",
"views": "views",
@@ -82,6 +81,7 @@
"pauseTimer": "Pause timer",
"pauseVideoIn": "Pause video in ",
"preferredQuality": "Preferred quality",
"premiere": "Video will be available",
"chapters": "Chapters",
"share": {
"title": "Share",
materialious/src/lib/patches/youtubejs.ts
+3 -3
View File
@@ -153,8 +153,6 @@ export async function patchYoutubeJs(videoId: string): Promise<VideoPlay> {
return;
}
console.log(recommended);
recommendedVideos.push({
videoThumbnails: (recommended?.content_image?.image as Thumbnail[]) || [],
videoId: recommended?.content_id || '',
@@ -233,7 +231,9 @@ export async function patchYoutubeJs(videoId: string): Promise<VideoPlay> {
descriptionHtml: video.secondary_info.description?.toHTML() || descString,
published: 0,
publishedText: video.primary_info.published?.toString() || '',
premiereTimestamp: 0,
premiereTimestamp: video.basic_info.is_upcoming
? Math.floor(video.basic_info.start_timestamp?.getTime() || 0 / 1000)
: undefined,
hlsUrl: video.streaming_data?.hls_manifest_url || undefined,
liveNow: video.basic_info.is_live || false,
// @ts-expect-error Type does have offer_id
materialious/src/lib/time.ts
+32
View File
@@ -0,0 +1,32 @@
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import duration from 'dayjs/plugin/duration';
import relativeTime from 'dayjs/plugin/relativeTime';
import advancedFormat from 'dayjs/plugin/advancedFormat';
dayjs.extend(utc);
dayjs.extend(duration);
dayjs.extend(relativeTime);
dayjs.extend(advancedFormat);
export function humanFriendlyTimestamp(utcTimestamp: number): string {
const now = dayjs();
const timestamp = dayjs.utc(utcTimestamp).local();
const isSameDay = now.isSame(timestamp, 'day');
const isSameMonth = now.isSame(timestamp, 'month');
const isThisYear = now.isSame(timestamp, 'year');
const diffMilliseconds = timestamp.diff(now);
const diffDuration = dayjs.duration(diffMilliseconds);
if (isSameDay) {
return diffDuration.humanize(true);
} else if (isSameMonth) {
return timestamp.format('Do @ h:mm A');
} else if (isThisYear) {
return timestamp.format('MMMM Do @ h:mm A');
} else {
return timestamp.format('MMMM Do YYYY h:mm A');
}
}
materialious/src/lib/watch.ts
-4
View File
@@ -30,10 +30,6 @@ export async function getWatchDetails(videoId: string, url: URL) {
error(400, get(_)('premium'));
}
if (video.isUpcoming) {
error(400, get(_)('isUpcoming'));
}
let personalPlaylists;
if (get(authStore)) {
postHistory(video.videoId);
materialious/src/routes/(app)/watch/[slug]/+page.svelte
+40 -3
View File
@@ -36,6 +36,9 @@
import LikesDislikes from '$lib/components/watch/LikesDislikes.svelte';
import Comment from '$lib/components/watch/Comment.svelte';
import { expandSummery } from '$lib/misc';
import { humanFriendlyTimestamp } from '$lib/time.js';
import { getWatchDetails } from '$lib/watch.js';
import { page } from '$app/state';
let { data = $bindable() } = $props();
@@ -65,6 +68,9 @@
let playerCurrentTime: number = $state(0);
let premiereTime = $state('');
let premiereUpdateInterval: NodeJS.Timeout;
$effect(() => {
if ($interfaceAutoExpandComments && comments) {
expandSummery('comment-section');
@@ -231,6 +237,19 @@
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);
}
}, 60000);
}
});
onDestroy(() => {
@@ -240,6 +259,10 @@
if (pauseTimeout) {
clearTimeout(pauseTimeout);
}
if (premiereUpdateInterval) {
clearInterval(premiereUpdateInterval);
}
});
async function goToCurrentPlaylistItem() {
@@ -319,9 +342,23 @@
<div class="grid">
<div class={`s12 m12 l${theatreMode ? '12' : '9'}`}>
<div style="display: flex;justify-content: center;">
{#key data.video.videoId}
<Player bind:playerElement bind:segments {data} isSyncing={$syncPartyPeerStore !== null} />
{/key}
{#if !data.video.premiereTimestamp}
{#key data.video.videoId}
<Player
bind:playerElement
bind:segments
{data}
isSyncing={$syncPartyPeerStore !== null}
/>
{/key}
{:else}
<article class="video-placeholder">
<p>{$_('player.premiere')}</p>
<h6 class="no-margin no-padding">
{premiereTime}
</h6>
</article>
{/if}
</div>
<h5>{letterCase(data.video.title)}</h5>