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

Removed mini player

Browse Source
This commit is contained in:
WardPearce
2025-02-16 17:15:57 +13:00
parent d37abe8f6f
commit b2de748852
9 changed files with 1 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
-4
View File
@@ -25,7 +25,6 @@
- [Invidious API extended integration!](https://github.com/Materialious/api-extended)
- Sync your watch progress between Invidious sessions.
- Watch sync parties!
- Mini player.
- Silence skipper (Experimental.)
- [YouTube.js](https://github.com/LuanRT/YouTube.js) fallback if Invidious fails loading videos for Desktop & Android.
- Preview video on hover.
@@ -104,9 +103,6 @@ Deploy Materialious for your Invidious instance using Docker. Follow the steps o
## Settings
![Preview of settings](./previews/setting-preview.png)
## Mini player
![Preview of mini player](./previews/mini-player-desktop-preview.png)
## Channel
![Preview of channel](./previews/channel-preview.png)
docs/SETTINGS.md
-9
View File
@@ -20,7 +20,6 @@ Materialious allows you to customize various settings by overwriting the default
+ [Low bandwidth mode](#low-bandwidth-mode)
+ [Display thumbnail avatars](#)
* [Player](#player)
+ [Mini player](#mini-player)
+ [Autoplay video](#autoplay-video)
+ [Always loop video](#always-loop-video)
+ [Proxy videos](#proxy-videos)
@@ -145,14 +144,6 @@ Avoids loading images.
## Player
### Mini player
Enables or disables the mini player feature.
```json
"playerMiniPlayer": true
```
### Autoplay video
Controls whether videos autoplay.
fastlane/metadata/android/en-US/full_description.txt
+1 -1
View File
@@ -1 +1 @@
<p><i>Materialious</i> is a client for <a href='https://github.com/iv-org' target='_blank' rel='nofollow noopener'>Invidious</a> using material design. It lets you browse and watch videos, manage playlists and use channels.</p><p><br><b>Features:</b></p><ul><li><a href='https://github.com/Materialious/api-extended' target='_blank' rel='nofollow noopener'>Invidious API extended integration!</a></li><li>Sync your watch progress between Invidious sessions</li><li>Watch sync parties!</li><li>Mini player.</li><li>Preview video on hover.</li><li>Sponsorblock built-in.</li><li>Return YouTube dislikes built-in.</li><li>DeArrow built-in (With local processing fallback).</li><li>Video progress tracking & resuming.</li><li>No ads.</li><li>No tracking.</li><li>Light/Dark themes.</li><li>Custom colour themes.</li><li>Integrates with Invidious subscriptions, watch history & more.</li><li>Live stream support.</li><li>Dash support.</li><li>Chapters.</li><li>Audio only mode.</li><li>Playlists.</li><li>PWA support.</li><li>YT path redirects (So your redirect plugins should still work!)</li></ul>
<p><i>Materialious</i> is a client for <a href='https://github.com/iv-org' target='_blank' rel='nofollow noopener'>Invidious</a> using material design. It lets you browse and watch videos, manage playlists and use channels.</p><p><br><b>Features:</b></p><ul><li><a href='https://github.com/Materialious/api-extended' target='_blank' rel='nofollow noopener'>Invidious API extended integration!</a></li><li>Sync your watch progress between Invidious sessions</li><li>Watch sync parties!</li><li>Preview video on hover.</li><li>Sponsorblock built-in.</li><li>Return YouTube dislikes built-in.</li><li>DeArrow built-in (With local processing fallback).</li><li>Video progress tracking & resuming.</li><li>No ads.</li><li>No tracking.</li><li>Light/Dark themes.</li><li>Custom colour themes.</li><li>Integrates with Invidious subscriptions, watch history & more.</li><li>Live stream support.</li><li>Dash support.</li><li>Chapters.</li><li>Audio only mode.</li><li>Playlists.</li><li>PWA support.</li><li>YT path redirects (So your redirect plugins should still work!)</li></ul>
materialious/electron/materialious.metainfo.xml
-1
View File
@@ -10,7 +10,6 @@
<ul>
<li>Invidious API extended integration!</li>
<li>Sync your watch progress between Invidious sessions</li>
<li>Mini player.</li>
<li>Preview video on hover.</li>
<li>Sponsorblock built-in.</li>
<li>Return YouTube dislikes built-in.</li>
materialious/src/lib/components/MiniPlayer.svelte
-131
View File
@@ -1,131 +0,0 @@
<script lang="ts">
import { goto } from '$app/navigation';
import { get } from 'svelte/store';
import { proxyVideoUrl } from '../misc';
import { miniPlayerSrcStore, playerProxyVideosStore } from '../store';
let currentTime: number = $state(0);
function setTime() {
const player = (document.getElementById('video') as HTMLVideoElement) || null;
if (player && $miniPlayerSrcStore) {
try {
const vidstackDetails = localStorage.getItem('video-player');
if (vidstackDetails) {
const vidstackDetailsParsed = JSON.parse(vidstackDetails);
if ('volume' in vidstackDetailsParsed) player.volume = vidstackDetailsParsed.volume;
}
} catch {}
player.currentTime = $miniPlayerSrcStore.time;
}
// Fixes volume being muted on mobile.
if (player.volume === 0) {
player.volume = 1;
}
}
</script>
{#if $miniPlayerSrcStore && $miniPlayerSrcStore.video.formatStreams.length > 0}
<nav class="bottom no-padding">
<article class="surface-bright">
<button onclick={() => miniPlayerSrcStore.set(null)} class="s circle transparent no-margin">
<i>close</i>
</button>
<div class="flex-container">
<div style="display: flex;">
<p class="bold truncate">
{$miniPlayerSrcStore.video.title}
</p>
<button
onclick={() => miniPlayerSrcStore.set(null)}
class="m l circle transparent no-margin"
>
<i>close</i>
</button>
</div>
<progress class="s" value={currentTime} max={$miniPlayerSrcStore.video.lengthSeconds}
></progress>
</div>
<video
onclick={() => {
goto(`/watch/${$miniPlayerSrcStore.video.videoId}?time=${currentTime}`);
miniPlayerSrcStore.set(null);
}}
id="video"
style="cursor: pointer;"
bind:currentTime
onloadedmetadata={setTime}
controls={false}
autoplay
src={get(playerProxyVideosStore)
? proxyVideoUrl($miniPlayerSrcStore.video.formatStreams[0].url)
: $miniPlayerSrcStore.video.formatStreams[0].url}
>
</video>
</article>
</nav>
{/if}
<style>
nav {
display: flex;
background-color: transparent;
justify-content: end;
align-items: flex-end;
}
article {
display: flex;
flex-direction: column;
align-items: flex-end;
}
nav video {
height: 180px;
width: auto;
}
.flex-container {
flex: 1;
overflow: hidden;
}
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 270px;
}
@media screen and (max-width: 590px) {
nav.bottom {
bottom: 100px !important;
}
nav {
flex-direction: initial;
background-color: initial;
justify-content: initial;
align-items: initial;
}
article {
align-items: start;
width: 100%;
flex-direction: row;
padding: 0 !important;
justify-content: center;
}
nav video {
height: 100%;
margin-left: 10px;
}
.flex-container {
max-width: 100%;
}
}
</style>
materialious/src/lib/components/Player.svelte
-3
View File
@@ -22,7 +22,6 @@
import {
authStore,
instanceStore,
miniPlayerSrcStore,
playerAlwaysLoopStore,
playerAndroidBgPlayer,
playerAndroidLockOrientation,
@@ -200,8 +199,6 @@
}
onMount(async () => {
miniPlayerSrcStore.set(null);
if (!data.video.hlsUrl) {
playerIsLive = false;
if (data.video.captions) {
materialious/src/lib/store.ts
-4
View File
@@ -1,4 +1,3 @@
import type { VideoPlay } from '$lib/api/model';
import { Capacitor } from '@capacitor/core';
import type Peer from 'peerjs';
import type { DataConnection } from 'peerjs';
@@ -105,9 +104,6 @@ export const syncPartyConnectionsStore: Writable<DataConnection[] | null> = writ
export const playlistSettingsStore: Writable<Record<string, { shuffle: boolean; loop: boolean; }>> =
writable({});
export const miniPlayerSrcStore: Writable<{ video: VideoPlay; time: number; } | null> =
writable(null);
export const silenceSkipperStore: Writable<boolean> = persisted('silenceSkipper', false);
export const poTokenCacheStore: Writable<PoTokens> = writable();
materialious/src/routes/(app)/+layout.svelte
-2
View File
@@ -7,7 +7,6 @@
import { getFeed } from '$lib/api/index';
import type { Notification } from '$lib/api/model';
import Logo from '$lib/components/Logo.svelte';
import MiniPlayer from '$lib/components/MiniPlayer.svelte';
import PageLoading from '$lib/components/PageLoading.svelte';
import Search from '$lib/components/Search.svelte';
import Settings from '$lib/components/Settings/Settings.svelte';
@@ -334,7 +333,6 @@
{/if}
<SyncParty />
<MiniPlayer />
</main>
<style>
materialious/src/routes/(app)/watch/[slug]/+page.svelte
-17
View File
@@ -27,10 +27,8 @@
interfaceAutoExpandComments,
interfaceAutoExpandDesc,
interfaceLowBandwidthMode,
miniPlayerSrcStore,
playerAutoplayNextByDefaultStore,
playerListenByDefaultStore,
playerMiniPlayerStore,
playerTheatreModeByDefaultStore,
playlistSettingsStore,
syncPartyConnectionsStore,
@@ -311,21 +309,6 @@
if (pauseTimeout) {
clearTimeout(pauseTimeout);
}
if (
get(playerMiniPlayerStore) &&
!player.paused &&
!$syncPartyPeerStore &&
!data.video.hlsUrl &&
data.video.formatStreams &&
data.video.formatStreams.length > 0 &&
data.video.fallbackPatch === undefined
) {
miniPlayerSrcStore.set({
video: data.video,
time: player.currentTime
});
}
});
async function loadPlaylist(playlistId: string) {