From c1753315216b496313ff25da7e2b5607ea225cd2 Mon Sep 17 00:00:00 2001 From: WardPearce Date: Thu, 9 May 2024 10:38:17 +1200 Subject: [PATCH 1/8] Fix mobile padding top --- materialious/static/style.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/materialious/static/style.css b/materialious/static/style.css index d8113c96..acdb2792 100644 --- a/materialious/static/style.css +++ b/materialious/static/style.css @@ -50,3 +50,9 @@ main.root { width: 100% !important; } } + +@media screen and (max-width: 650px) { + main.root { + padding-top: 6em !important; + } +} From f6926a15425cda8e8b8bc3ddfc37405a2197934d Mon Sep 17 00:00:00 2001 From: WardPearce Date: Thu, 9 May 2024 10:47:44 +1200 Subject: [PATCH 2/8] Fix peerjs navigator issue --- materialious/src/lib/SyncParty.svelte | 4 ++-- materialious/src/lib/misc.ts | 11 ++++++++--- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/materialious/src/lib/SyncParty.svelte b/materialious/src/lib/SyncParty.svelte index fb60da8e..7db3f1bb 100644 --- a/materialious/src/lib/SyncParty.svelte +++ b/materialious/src/lib/SyncParty.svelte @@ -33,7 +33,7 @@ const peerId = crypto.randomUUID(); setWindowQueryFlag('sync', peerId); - $syncPartyPeerStore = peerJs(peerId); + $syncPartyPeerStore = await peerJs(peerId); if ($syncPartyPeerStore) { $syncPartyPeerStore.on('connection', (conn) => { @@ -68,7 +68,7 @@ const currentUrl = get(page).url; const syncId = currentUrl.searchParams.get('sync'); if (syncId) { - $syncPartyPeerStore = peerJs(crypto.randomUUID()); + $syncPartyPeerStore = await peerJs(crypto.randomUUID()); $syncPartyPeerStore.on('open', () => { if (!$syncPartyPeerStore) return; diff --git a/materialious/src/lib/misc.ts b/materialious/src/lib/misc.ts index 82f52046..a9a1cbdc 100644 --- a/materialious/src/lib/misc.ts +++ b/materialious/src/lib/misc.ts @@ -1,7 +1,7 @@ import { pushState } from '$app/navigation'; import { page } from '$app/stores'; import humanNumber from 'human-number'; -import { Peer } from 'peerjs'; +import type Peer from 'peerjs'; import { get } from 'svelte/store'; import { instanceStore } from '../store'; import type { Image } from './Api/model'; @@ -134,8 +134,13 @@ export function removeWindowQueryFlag(key: string) { pushState(currentPage.url, currentPage.state); } -export function peerJs(peerId: string): Peer { - return new Peer( +let PeerInstance: typeof Peer; +export async function peerJs(peerId: string): Promise { + // https://github.com/peers/peerjs/issues/819 + if (typeof PeerInstance === 'undefined') { + PeerInstance = (await import('peerjs')).Peer; + } + return new PeerInstance( peerId, { host: import.meta.env.VITE_DEFAULT_PEERJS_HOST || '0.peerjs.com', From e7a8bc41d1f95ca9f0840e03c465619c706e5b79 Mon Sep 17 00:00:00 2001 From: WardPearce Date: Thu, 9 May 2024 10:50:41 +1200 Subject: [PATCH 3/8] Disable sync party & materialious share links if native --- materialious/src/routes/+layout.svelte | 10 +++++---- .../src/routes/channel/[slug]/+page.svelte | 15 ++++++++----- .../src/routes/watch/[slug]/+page.svelte | 22 +++++++++++-------- 3 files changed, 28 insertions(+), 19 deletions(-) diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte index d41cb590..b3e2f1f6 100644 --- a/materialious/src/routes/+layout.svelte +++ b/materialious/src/routes/+layout.svelte @@ -204,10 +204,12 @@ {#if mobileSearchShow} (mobileSearchShow = false)} /> {:else} - + {#if !Capacitor.isNativePlatform()} + + {/if} {#if isLoggedIn} - {/if} - - -
- -
+ + {#if showVideoPreview && videoPreview} + + {/if} + + +
+ +
+{/if} diff --git a/materialious/src/lib/VideoList.svelte b/materialious/src/lib/VideoList.svelte index 729b7b01..d2d50f9d 100644 --- a/materialious/src/lib/VideoList.svelte +++ b/materialious/src/lib/VideoList.svelte @@ -1,21 +1,29 @@
{#each videos as video} -
-
- -
-
+ {#if !hiddenVideos.includes(video.videoId)} +
+
+ (hiddenVideos = [...hiddenVideos, video.videoId])} + {video} + {playlistId} + /> +
+
+ {/if} {/each}
diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json index 59748fb7..bb1a1542 100644 --- a/materialious/src/lib/i18n/locales/en.json +++ b/materialious/src/lib/i18n/locales/en.json @@ -11,6 +11,7 @@ "deleteAllHistory": "Delete all history", "skipping": "Skipping", "replies": "replies", + "hideVideo": "Hide video", "syncParty": { "userJoined": "User joined your watch party.", "userLeft": "User left your watch party." @@ -116,4 +117,4 @@ } }, "subscribe": "Subscribe" -} +} \ No newline at end of file diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte index 6b5fab9a..5f721cec 100644 --- a/materialious/src/routes/watch/[slug]/+page.svelte +++ b/materialious/src/routes/watch/[slug]/+page.svelte @@ -12,10 +12,10 @@ import type { Comments, PlaylistPage, PlaylistPageVideo } from '$lib/Api/model.js'; import Comment from '$lib/Comment.svelte'; import Player from '$lib/Player.svelte'; + import ShareVideo from '$lib/ShareVideo.svelte'; import Thumbnail from '$lib/Thumbnail.svelte'; import { cleanNumber, getBestThumbnail, numberWithCommas, unsafeRandomItem } from '$lib/misc'; import type { PlayerEvents } from '$lib/player'; - import { Capacitor } from '@capacitor/core'; import type { DataConnection } from 'peerjs'; import { onDestroy, onMount } from 'svelte'; import { _ } from 'svelte-i18n'; @@ -468,38 +468,8 @@ {$_('player.share.title')} - {#if !Capacitor.isNativePlatform()} - - await navigator.clipboard.writeText( - `${location.origin}watch/${data.video.videoId}` - )} - > -
{$_('player.share.materialiousLink')}
 - {/if} - - await navigator.clipboard.writeText( - `https://redirect.invidious.io/watch?v=${data.video.videoId}` - )} - > -
{$_('player.share.invidiousRedirect')}
 - await navigator.clipboard.writeText( - `https://www.youtube.com/watch?v=${data.video.videoId}` - )} - > -
{$_('player.share.youtubeLink')}
 + {#if data.downloadOptions.length > 0} + + {/if} {/if} diff --git a/materialious/src/lib/i18n/locales/en.json b/materialious/src/lib/i18n/locales/en.json index bb1a1542..9f25ce92 100644 --- a/materialious/src/lib/i18n/locales/en.json +++ b/materialious/src/lib/i18n/locales/en.json @@ -8,6 +8,7 @@ "create": "Create", "title": "Title", "searchPlaceholder": "Search...", + "delete": "Delete", "deleteAllHistory": "Delete all history", "skipping": "Skipping", "replies": "replies", diff --git a/materialious/src/routes/playlist/[slug]/+page.svelte b/materialious/src/routes/playlist/[slug]/+page.svelte index 5a5d3935..578af97f 100644 --- a/materialious/src/routes/playlist/[slug]/+page.svelte +++ b/materialious/src/routes/playlist/[slug]/+page.svelte @@ -3,6 +3,7 @@ import type { PlaylistPageVideo } from '$lib/Api/model.js'; import VideoList from '$lib/VideoList.svelte'; import { cleanNumber, unsafeRandomItem } from '$lib/misc.js'; + import { Capacitor } from '@capacitor/core'; import { onMount } from 'svelte'; import { _ } from 'svelte-i18n'; import { activePageStore, playlistSettingsStore } from '../../../store'; @@ -79,12 +80,14 @@ share {$_('player.share.title')} - { - await navigator.clipboard.writeText(location.href); - }}>{$_('player.share.materialiousLink')} + {#if !Capacitor.isNativePlatform()} + { + await navigator.clipboard.writeText(location.href); + }}>{$_('player.share.materialiousLink')} + {/if} { @@ -98,5 +101,5 @@ {#if videos} - + {/if} From 544b8d8c84d3a21208e00f4fa59802c7cb4f449c Mon Sep 17 00:00:00 2001 From: WardPearce Date: Thu, 9 May 2024 12:20:05 +1200 Subject: [PATCH 8/8] Added VITE_DEFAULT_SETTINGS --- docs/DOCKER.md | 67 +++++++++++++++++++ materialious/Dockerfile | 1 + materialious/replace_env_vars.sh | 1 + materialious/src/lib/Settings.svelte | 2 +- .../{bookmarklet.ts => externalSettings.ts} | 52 ++++++++++---- materialious/src/routes/+layout.svelte | 9 ++- 6 files changed, 114 insertions(+), 18 deletions(-) rename materialious/src/lib/{bookmarklet.ts => externalSettings.ts} (83%) diff --git a/docs/DOCKER.md b/docs/DOCKER.md index c0c11f25..9427d24e 100644 --- a/docs/DOCKER.md +++ b/docs/DOCKER.md @@ -95,6 +95,8 @@ The following Invidious values must be set in your config. ## Step 3: Docker Please ensure you have followed the previous steps before doing this! +### Docker Compose + ```yaml version: "3" services: @@ -121,6 +123,71 @@ services: # URL to DeArrow thumbnail instance VITE_DEFAULT_DEARROW_THUMBNAIL_INSTANCE: "https://dearrow-thumb.ajay.app" + + # Look at "Overwriting Materialious defaults" for all the accepted values. + VITE_DEFAULT_SETTINGS: '{"themeColor": "#2596be"}' +``` + +### Overwriting Materialious defaults +Materialious allows you to overwrite the default values using `VITE_DEFAULT_SETTINGS` + +```json +{ + // Set to true to enable dark mode, or false to disable it. + "darkMode": true, + + // Specifies the theme color in hexadecimal format (e.g., #ff0000 for red). + "themeColor": "#ff0000", + + // Set to true to enable autoplay, or false to disable it. + "autoPlay": false, + + // Set to true to always loop videos, or false to loop only when specified. + "alwaysLoop": false, + + // Set to true to proxy videos, or false to play them directly. + "proxyVideos": true, + + // Set to true to enable listening by default, or false to disable it. + "listenByDefault": true, + + // Set to true to save playback position, or false to reset it. + "savePlaybackPosition": true, + + // Set to true to enable DASH playback, or false to use other formats. + "dashEnabled": true, + + // Set to true to enable theatre mode by default, or false to disable it. + "theatreModeByDefault": false, + + // Set to true to autoplay next video by default, or false to disable it. + "autoplayNextByDefault": true, + + // Set to true to return YouTube dislikes, or false to hide them. + "returnYtDislikes": false, + + // Set to true to enable search suggestions, or false to disable them. + "searchSuggestions": true, + + // Set to true to preview video on hover, or false to disable it. + "previewVideoOnHover": true, + + // Set to true to enable sponsor block, or false to disable it. + "sponsorBlock": false, + + // Specifies the categories for sponsor block as comma-separated values. + // https://wiki.sponsor.ajay.app/w/Types + "sponsorBlockCategories": "sponsor,interaction", + + // Set to true to enable deArrow, or false to disable it. + "deArrowEnabled": true, + + // Set to true to enable mini player, or false to disable it. + "playerMiniPlayer": true, + + // Set to true to enable syncious, or false to disable it. + "syncious": true, +} ``` ## Step 4 (Optional, but recommended): Self-host RYD-Proxy diff --git a/materialious/Dockerfile b/materialious/Dockerfile index 0b4cc4e7..7c47e49c 100644 --- a/materialious/Dockerfile +++ b/materialious/Dockerfile @@ -18,6 +18,7 @@ RUN echo "VITE_DEFAULT_INVIDIOUS_INSTANCE=VITE_DEFAULT_INVIDIOUS_INSTANCE_PLACEH echo "VITE_DEFAULT_PEERJS_PATH=VITE_DEFAULT_PEERJS_PATH_PLACEHOLDER" >> .env && \ echo "VITE_DEFAULT_PEERJS_PORT=VITE_DEFAULT_PEERJS_PORT_PLACEHOLDER" >> .env && \ echo "VITE_DEFAULT_SYNCIOUS_INSTANCE=VITE_DEFAULT_SYNCIOUS_INSTANCE_PLACEHOLDER" >> .env && \ + echo "VITE_DEFAULT_SETTINGS=VITE_DEFAULT_SETTINGS_PLACEHOLDER" >> .env && \ echo "VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE=VITE_DEFAULT_RETURNYTDISLIKES_INSTANCE_PLACEHOLDER" >> .env # Install dependencies and build the project diff --git a/materialious/replace_env_vars.sh b/materialious/replace_env_vars.sh index 2800ab14..ba74d461 100644 --- a/materialious/replace_env_vars.sh +++ b/materialious/replace_env_vars.sh @@ -11,3 +11,4 @@ find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VI find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_PEERJS_PATH_PLACEHOLDER|'"$VITE_DEFAULT_PEERJS_PATH"'|g' {} + find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_PEERJS_PORT_PLACEHOLDER|'"$VITE_DEFAULT_PEERJS_PORT"'|g' {} + find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_SYNCIOUS_INSTANCE_PLACEHOLDER|'"$VITE_DEFAULT_SYNCIOUS_INSTANCE"'|g' {} + +find "$ROOT_DIR" -type f \( -name "*.js" -o -name "*.html" \) -exec sed -i 's|VITE_DEFAULT_SETTINGS_PLACEHOLDER|'"$VITE_DEFAULT_SETTINGS"'|g' {} + diff --git a/materialious/src/lib/Settings.svelte b/materialious/src/lib/Settings.svelte index 35979121..f82e3c43 100644 --- a/materialious/src/lib/Settings.svelte +++ b/materialious/src/lib/Settings.svelte @@ -1,5 +1,5 @@