Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-05-05 01:39:15 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

better miniplayer

Browse source
This commit is contained in:
ThaUnknown 2022-03-18 18:35:03 +01:00
parent f763242755
commit 3420fafc3a
3 changed files with 186 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "Miru", "name": "Miru",
"version": "0.8.0", "version": "0.9.0",
"author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>", "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
"main": "src/index.js", "main": "src/index.js",
"scripts": { "scripts": {

348
src/renderer/src/lib/pages/Player.svelte
View file

@ -84,6 +84,7 @@
function getFPS() { function getFPS() {
video.fps = new Promise(resolve => { video.fps = new Promise(resolve => {
let lastmeta = null let lastmeta = null
let wasPaused = !!paused
let count = 0 let count = 0
function handleFrames(now, metadata) { function handleFrames(now, metadata) {
@ -106,6 +107,7 @@
} else { } else {
resolve(rawFPS) resolve(rawFPS)
} }
paused = wasPaused
} else { } else {
lastmeta = metadata lastmeta = metadata
video.requestVideoFrameCallback(handleFrames) video.requestVideoFrameCallback(handleFrames)
@ -174,7 +176,11 @@
file.getStreamURL((err, url) => { file.getStreamURL((err, url) => {
src = url src = url
current = file current = file
video?.play() if (miniplayer) {
video?.load()
} else {
video?.play()
}
checkAvail(current) checkAvail(current)
}) })
} }
@ -698,174 +704,170 @@
</div> </div>
{/if} {/if}
<!-- svelte-ignore a11y-media-has-caption --> <!-- svelte-ignore a11y-media-has-caption -->
{#if files?.length || !miniplayer} <div
<div class="player w-full h-full d-flex flex-column overflow-hidden"
class="player w-full h-full d-flex flex-column overflow-hidden" class:pointer={miniplayer}
class:pointer={miniplayer} class:miniplayer
class:miniplayer class:pip
class:pip class:immersed
class:immersed class:buffering
class:buffering bind:this={container}
bind:this={container} on:mousemove={resetImmerse}
on:mousemove={resetImmerse} on:touchmove={resetImmerse}
on:touchmove={resetImmerse} on:keypress={resetImmerse}
on:keypress={resetImmerse} on:mouseleave={immersePlayer}>
on:mouseleave={immersePlayer} <video
on:click={() => (page = 'player')}> class="position-absolute h-full w-full"
<video style={`margin-top: ${menubarOffset}px`}
class="position-absolute h-full w-full" preload="auto"
style={`margin-top: ${menubarOffset}px`} {src}
autoplay bind:videoHeight
preload="auto" bind:videoWidth
{src} bind:this={video}
bind:videoHeight bind:volume
bind:videoWidth bind:duration
bind:this={video} bind:currentTime
bind:volume bind:paused
bind:duration bind:ended
bind:currentTime bind:muted
bind:paused bind:playbackRate
bind:ended on:timeupdate={() => createThumbnail()}
bind:muted on:timeupdate={checkCompletion}
bind:playbackRate on:waiting={showBuffering}
on:timeupdate={() => createThumbnail()} on:loadeddata={hideBuffering}
on:timeupdate={checkCompletion} on:canplay={hideBuffering}
on:waiting={showBuffering} on:playing={hideBuffering}
on:loadeddata={hideBuffering} on:ended={tryPlayNext}
on:canplay={hideBuffering} on:loadedmetadata={hideBuffering}
on:playing={hideBuffering} on:loadedmetadata={getFPS}
on:ended={tryPlayNext} on:loadedmetadata={initThumbnails}
on:loadedmetadata={hideBuffering} on:leavepictureinpicture={() => (pip = false)} />
on:loadedmetadata={getFPS} {#if stats}
on:loadedmetadata={initThumbnails} <div class="position-absolute top-0 bg-tp p-10 m-15 text-monospace rounded z-50">
on:leavepictureinpicture={() => (pip = false)} /> <button class="close" type="button" on:click={toggleStats}><span>×</span></button>
{#if stats} FPS: {stats.fps}<br />
<div class="position-absolute top-0 bg-tp p-10 m-15 text-monospace rounded z-50"> Presented frames: {stats.presented}<br />
<button class="close" type="button" on:click={toggleStats}><span>×</span></button> Dropped frames: {stats.dropped}<br />
FPS: {stats.fps}<br /> Frame time: {stats.processing}<br />
Presented frames: {stats.presented}<br /> Viewport: {stats.viewport}<br />
Dropped frames: {stats.dropped}<br /> Resolution: {stats.resolution}<br />
Frame time: {stats.processing}<br /> Buffer health: {stats.buffer || 0}
Viewport: {stats.viewport}<br /> </div>
Resolution: {stats.resolution}<br /> {/if}
Buffer health: {stats.buffer || 0} <div class="top z-40 d-flex justify-content-between">
<div />
<div class="d-flex">
<span class="material-icons" data-name="peers"> people </span>
<span class="stats">{torrent.peers || 0}</span>
<span class="material-icons"> arrow_downward </span>
<span class="stats">{fastPrettyBytes(torrent.down)}/s</span>
<span class="material-icons"> arrow_upward </span>
<span class="stats">{fastPrettyBytes(torrent.up)}/s</span>
</div>
<span class="material-icons ctrl font-size-12 p-10" title="Keybinds [`]" on:click={() => (showKeybinds = true)}> help_outline </span>
</div>
<div class="middle d-flex align-items-center justify-content-center flex-grow-1 z-40 position-relative">
<div class="position-absolute w-full h-full" on:dblclick={toggleFullscreen} on:click|self={() => (page = 'player')}>
<div class="play-overlay w-full h-full" on:click={playPause} />
</div>
{#if hasLast}
<span class="material-icons ctrl" data-name="playLast" on:click={playLast}> skip_previous </span>
{/if}
<span class="material-icons ctrl" data-name="rewind" on:click={rewind}> fast_rewind </span>
<span class="material-icons ctrl" data-name="playPause" on:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>
<span class="material-icons ctrl" data-name="forward" on:click={forward}> fast_forward </span>
{#if hasNext}
<span class="material-icons ctrl" data-name="playNext" on:click={playNext}> skip_next </span>
{/if}
<div data-name="bufferingDisplay" class="position-absolute" />
</div>
<div class="bottom d-flex z-40">
<span class="material-icons ctrl" title="Play/Pause [Space]" data-name="playPause" on:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>
{#if hasNext}
<span class="material-icons ctrl" title="Next [N]" data-name="playNext" on:click={playNext}> skip_next </span>
{/if}
<div class="d-flex w-auto volume">
<span class="material-icons ctrl" title="Mute [M]" data-name="toggleMute" on:click={toggleMute}> {muted ? 'volume_off' : 'volume_up'} </span>
<input class="ctrl" type="range" min="0" max="1" step="any" data-name="setVolume" bind:value={volume} style="--value: {volume * 100}%" />
</div>
<!-- svelte-ignore missing-declaration -->
{#if 'audioTracks' in HTMLVideoElement.prototype && video?.audioTracks?.length > 1}
<div class="audio-tracks dropdown dropup with-arrow" on:click={toggleDropdown}>
<span class="material-icons ctrl" title="Audio Tracks" id="baudio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-name="audioButton">
queue_music
</span>
<div class="dropdown-menu dropdown-menu-left ctrl custom-radio p-10 pb-5 text-capitalize" aria-labelledby="baudio" data-name="selectAudio">
{#each video.audioTracks as track}
<input name="audio-radio-set" type="radio" id="audio-{track.id}-radio" value={track.id} checked={track.enabled} />
<label for="audio-{track.id}-radio" on:click={() => selectAudio(track.id)} class="text-truncate pb-5">
{(track.language || (!Object.values(video.audioTracks).some(track => track.language === 'eng' || track.language === 'en') ? 'eng' : track.label)) +
(track.label ? ' - ' + track.label : '')}</label>
{/each}
</div>
</div> </div>
{/if} {/if}
<div class="top z-40 d-flex justify-content-between"> <div class="w-full d-flex align-items-center" data-name="progressWrapper">
<div /> <div class="ts">{toTS(targetTime, duration > 3600 ? 2 : 3)}</div>
<div class="d-flex"> <div class="w-full h-full position-relative">
<span class="material-icons" data-name="peers"> people </span> <input
<span class="stats">{torrent.peers || 0}</span> class="ctrl w-full h-full"
<span class="material-icons"> arrow_downward </span> type="range"
<span class="stats">{fastPrettyBytes(torrent.down)}/s</span> min="0"
<span class="material-icons"> arrow_upward </span> max="1"
<span class="stats">{fastPrettyBytes(torrent.up)}/s</span> step="any"
data-name="setProgress"
bind:value={progress}
on:mousedown={handleMouseDown}
on:mouseup={handleMouseUp}
on:mousemove={handleHover}
on:input={handleProgress}
on:touchstart={handleMouseDown}
on:touchend={handleMouseUp}
style="--value: {progress * 100}%" />
<div class="hover position-absolute d-flex flex-column align-items-center" bind:this={hover}>
<img alt="thumbnail" class="w-full mb-5 shadow-lg" src={thumbnail} />
<div class="ts">{toTS(hoverTime)}</div>
</div>
</div> </div>
<span class="material-icons ctrl font-size-12 p-10" title="Keybinds [`]" on:click={() => (showKeybinds = true)}> help_outline </span> <div class="ts">{toTS(duration - targetTime, duration > 3600 ? 2 : 3)}</div>
</div> </div>
<div class="middle d-flex align-items-center justify-content-center flex-grow-1 z-40 position-relative"> {#if subHeaders?.length}
<div class="position-absolute w-full h-full" on:dblclick={toggleFullscreen}> <div class="subtitles dropdown dropup with-arrow" on:click={toggleDropdown}>
<div class="play-overlay w-full h-full" on:click={playPause} /> <span class="material-icons ctrl" title="Subtitles [C]" id="bcap" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-name="captionsButton">
</div> subtitles
{#if hasLast}
<span class="material-icons ctrl" data-name="playLast" on:click={playLast}> skip_previous </span>
{/if}
<span class="material-icons ctrl" data-name="rewind" on:click={rewind}> fast_rewind </span>
<span class="material-icons ctrl" data-name="playPause" on:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>
<span class="material-icons ctrl" data-name="forward" on:click={forward}> fast_forward </span>
{#if hasNext}
<span class="material-icons ctrl" data-name="playNext" on:click={playNext}> skip_next </span>
{/if}
<div data-name="bufferingDisplay" class="position-absolute" />
</div>
<div class="bottom d-flex z-40">
<span class="material-icons ctrl" title="Play/Pause [Space]" data-name="playPause" on:click={playPause}> {ended ? 'replay' : paused ? 'play_arrow' : 'pause'} </span>
{#if hasNext}
<span class="material-icons ctrl" title="Next [N]" data-name="playNext" on:click={playNext}> skip_next </span>
{/if}
<div class="d-flex w-auto volume">
<span class="material-icons ctrl" title="Mute [M]" data-name="toggleMute" on:click={toggleMute}> {muted ? 'volume_off' : 'volume_up'} </span>
<input class="ctrl" type="range" min="0" max="1" step="any" data-name="setVolume" bind:value={volume} style="--value: {volume * 100}%" />
</div>
<!-- svelte-ignore missing-declaration -->
{#if 'audioTracks' in HTMLVideoElement.prototype && video?.audioTracks?.length > 1}
<div class="audio-tracks dropdown dropup with-arrow" on:click={toggleDropdown}>
<span class="material-icons ctrl" title="Audio Tracks" id="baudio" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-name="audioButton">
queue_music
</span>
<div class="dropdown-menu dropdown-menu-left ctrl custom-radio p-10 pb-5 text-capitalize" aria-labelledby="baudio" data-name="selectAudio">
{#each video.audioTracks as track}
<input name="audio-radio-set" type="radio" id="audio-{track.id}-radio" value={track.id} checked={track.enabled} />
<label for="audio-{track.id}-radio" on:click={() => selectAudio(track.id)} class="text-truncate pb-5">
{(track.language || (!Object.values(video.audioTracks).some(track => track.language === 'eng' || track.language === 'en') ? 'eng' : track.label)) +
(track.label ? ' - ' + track.label : '')}</label>
{/each}
</div>
</div>
{/if}
<div class="w-full d-flex align-items-center" data-name="progressWrapper">
<div class="ts">{toTS(targetTime, duration > 3600 ? 2 : 3)}</div>
<div class="w-full h-full position-relative">
<input
class="ctrl w-full h-full"
type="range"
min="0"
max="1"
step="any"
data-name="setProgress"
bind:value={progress}
on:mousedown={handleMouseDown}
on:mouseup={handleMouseUp}
on:mousemove={handleHover}
on:input={handleProgress}
on:touchstart={handleMouseDown}
on:touchend={handleMouseUp}
style="--value: {progress * 100}%" />
<div class="hover position-absolute d-flex flex-column align-items-center" bind:this={hover}>
<img alt="thumbnail" class="w-full mb-5 shadow-lg" src={thumbnail} />
<div class="ts">{toTS(hoverTime)}</div>
</div>
</div>
<div class="ts">{toTS(duration - targetTime, duration > 3600 ? 2 : 3)}</div>
</div>
{#if subHeaders?.length}
<div class="subtitles dropdown dropup with-arrow" on:click={toggleDropdown}>
<span class="material-icons ctrl" title="Subtitles [C]" id="bcap" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-name="captionsButton">
subtitles
</span>
<div class="dropdown-menu dropdown-menu-right ctrl custom-radio p-10 pb-5 text-capitalize w-200" aria-labelledby="bcap" data-name="selectCaptions">
<input name="subtitle-radio-set" type="radio" id="subtitle-off-radio" value="off" checked={subHeaders && subs?.current === -1} />
<label for="subtitle-off-radio" on:click={() => subs.selectCaptions(-1)} class="text-truncate pb-5"> OFF </label>
{#each subHeaders as track}
{#if track}
<input name="subtitle-radio-set" type="radio" id="subtitle-{track.number}-radio" value={track.numer} checked={track.number === subs.current} />
<label for="subtitle-{track.nubmer}-radio" on:click={() => subs.selectCaptions(track.number)} class="text-truncate pb-5">
{(track.language || (!Object.values(subs.headers).some(header => header.language === 'eng' || header.language === 'en') ? 'eng' : track.type)) +
(track.name ? ' - ' + track.name : '')}
</label>
{/if}
{/each}
<input type="number" step="0.1" bind:value={subDelay} class="form-control text-right form-control-sm" />
</div>
</div>
{/if}
<!-- svelte-ignore missing-declaration -->
{#if 'PresentationRequest' in window && canCast && current}
<span class="material-icons ctrl" title="Cast Video [D]" data-name="toggleCast" on:click={toggleCast}>
{presentationConnection ? 'cast_connected' : 'cast'}
</span> </span>
{/if} <div class="dropdown-menu dropdown-menu-right ctrl custom-radio p-10 pb-5 text-capitalize w-200" aria-labelledby="bcap" data-name="selectCaptions">
{#if 'pictureInPictureEnabled' in document} <input name="subtitle-radio-set" type="radio" id="subtitle-off-radio" value="off" checked={subHeaders && subs?.current === -1} />
<span class="material-icons ctrl" title="Popout Window [P]" data-name="togglePopout" on:click={togglePopout}> <label for="subtitle-off-radio" on:click={() => subs.selectCaptions(-1)} class="text-truncate pb-5"> OFF </label>
{pip ? 'featured_video' : 'picture_in_picture'} {#each subHeaders as track}
</span> {#if track}
{/if} <input name="subtitle-radio-set" type="radio" id="subtitle-{track.number}-radio" value={track.numer} checked={track.number === subs.current} />
<span class="material-icons ctrl" title="Fullscreen [F]" data-name="toggleFullscreen" on:click={toggleFullscreen}> <label for="subtitle-{track.nubmer}-radio" on:click={() => subs.selectCaptions(track.number)} class="text-truncate pb-5">
{isFullscreen ? 'fullscreen_exit' : 'fullscreen'} {(track.language || (!Object.values(subs.headers).some(header => header.language === 'eng' || header.language === 'en') ? 'eng' : track.type)) +
(track.name ? ' - ' + track.name : '')}
</label>
{/if}
{/each}
<input type="number" step="0.1" bind:value={subDelay} class="form-control text-right form-control-sm" />
</div>
</div>
{/if}
<!-- svelte-ignore missing-declaration -->
{#if 'PresentationRequest' in window && canCast && current}
<span class="material-icons ctrl" title="Cast Video [D]" data-name="toggleCast" on:click={toggleCast}>
{presentationConnection ? 'cast_connected' : 'cast'}
</span> </span>
</div> {/if}
{#if 'pictureInPictureEnabled' in document}
<span class="material-icons ctrl" title="Popout Window [P]" data-name="togglePopout" on:click={togglePopout}>
{pip ? 'featured_video' : 'picture_in_picture'}
</span>
{/if}
<span class="material-icons ctrl" title="Fullscreen [F]" data-name="toggleFullscreen" on:click={toggleFullscreen}>
{isFullscreen ? 'fullscreen_exit' : 'fullscreen'}
</span>
</div> </div>
{/if} </div>
<style> <style>
.stats { .stats {
@ -877,7 +879,7 @@
} }
.miniplayer { .miniplayer {
transition: width 0.2s ease; transition: width 0.2s ease;
width: min(40rem, 25vw) !important; width: 35rem !important;
height: auto !important; height: auto !important;
bottom: 2rem; bottom: 2rem;
right: 2rem; right: 2rem;
@ -885,7 +887,6 @@
position: absolute !important; position: absolute !important;
} }
.miniplayer .top, .miniplayer .top,
.miniplayer .middle,
.miniplayer .bottom { .miniplayer .bottom {
display: none !important; display: none !important;
} }
@ -987,15 +988,30 @@
display: none; display: none;
} }
@media (pointer: none), (pointer: coarse) { /* @media (pointer: none), (pointer: coarse) {
.middle .ctrl { .middle .ctrl {
display: flex; display: flex;
} }
.middle .play-overlay { .middle .play-overlay {
display: none !important; display: none !important;
} }
} */
.miniplayer .middle {
position: absolute !important;
width: 100%;
height: 100%;
}
.miniplayer .middle .ctrl {
display: flex;
font-size: 2.8rem;
margin: 0.6rem;
}
.miniplayer .middle .play-overlay {
display: none !important;
}
.miniplayer .middle .ctrl[data-name='playPause'] {
font-size: 5rem;
} }
.middle .ctrl[data-name='playPause'] { .middle .ctrl[data-name='playPause'] {
font-size: 6rem; font-size: 6rem;
} }

6
src/renderer/src/modules/torrent.js
View file

@ -38,11 +38,11 @@ client.on('torrent', torrent => {
files.set(torrent.files) files.set(torrent.files)
}) })
export async function add (torrentID) { export async function add(torrentID, hide) {
if (torrentID) { if (torrentID) {
if (client.torrents.length) client.remove(client.torrents[0].infoHash) if (client.torrents.length) client.remove(client.torrents[0].infoHash)
files.set([]) files.set([])
page.set('player') if (!hide) page.set('player')
if (typeof torrentID === 'string' && !torrentID.startsWith('magnet:')) { if (typeof torrentID === 'string' && !torrentID.startsWith('magnet:')) {
// IMPORTANT, this is because node's get bypasses proxies, wut???? // IMPORTANT, this is because node's get bypasses proxies, wut????
const res = await fetch(torrentID) const res = await fetch(torrentID)
@ -73,6 +73,6 @@ client.on('torrent', torrent => {
queueMicrotask(() => { queueMicrotask(() => {
if (localStorage.getItem('torrent')) { if (localStorage.getItem('torrent')) {
const buffer = Buffer.from(JSON.parse(localStorage.getItem('torrent'))) const buffer = Buffer.from(JSON.parse(localStorage.getItem('torrent')))
add(buffer) add(buffer, true)
} }
}) })