add small player
This commit is contained in:
parent
92d9371100
commit
3e1a6befce
|
@ -2,10 +2,6 @@
|
||||||
/* == Big player */
|
/* == Big player */
|
||||||
/* ----------------------------------------------------------- */
|
/* ----------------------------------------------------------- */
|
||||||
|
|
||||||
.playerBig {
|
|
||||||
margin-bottom: 6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playerBig__player {
|
.playerBig__player {
|
||||||
position: relative;
|
position: relative;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
|
@ -0,0 +1,49 @@
|
||||||
|
/* ----------------------------------------------------------- */
|
||||||
|
/* == Player cover */
|
||||||
|
/* ----------------------------------------------------------- */
|
||||||
|
|
||||||
|
.playerCover {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-color: #f2f2f2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerCover::before {
|
||||||
|
display: block;
|
||||||
|
padding-bottom: 100%;
|
||||||
|
content: "";;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerCover__img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerCover__expand,
|
||||||
|
.playerCover__expand:visited {
|
||||||
|
position: absolute;
|
||||||
|
right: .5rem;
|
||||||
|
bottom: .5rem;
|
||||||
|
padding: .5rem;
|
||||||
|
width: 2.4rem;
|
||||||
|
height: 2.4rem;
|
||||||
|
border: none;
|
||||||
|
border-radius: .3rem;
|
||||||
|
background: none;
|
||||||
|
color: rgba(#fff, .6);
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerCover:hover .playerCover__expand,
|
||||||
|
.playerCover:active .playerCover__expand,
|
||||||
|
.playerCover:focus .playerCover__expand {
|
||||||
|
background-color: rgba($color-primary, .6);
|
||||||
|
color: #fff;
|
||||||
|
}
|
|
@ -0,0 +1,65 @@
|
||||||
|
/* ----------------------------------------------------------- */
|
||||||
|
/* == Player layout */
|
||||||
|
/* ----------------------------------------------------------- */
|
||||||
|
|
||||||
|
/* Small player
|
||||||
|
-------------------------------------------------------------- */
|
||||||
|
|
||||||
|
.player {
|
||||||
|
display: grid;
|
||||||
|
margin-bottom: 5rem;
|
||||||
|
|
||||||
|
grid-template-columns: 1fr 2fr;
|
||||||
|
grid-column-gap: 2rem;
|
||||||
|
grid-row-gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerBig__player,
|
||||||
|
.playerMini {
|
||||||
|
grid-area: 1 / 1 / 4 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerTrack {
|
||||||
|
grid-area: 1 / 2 / 2 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerProgress {
|
||||||
|
grid-area: 2 / 2 / 3 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls {
|
||||||
|
grid-area: 3 / 2 / 4 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Big player
|
||||||
|
-------------------------------------------------------------- */
|
||||||
|
|
||||||
|
.playerBig {
|
||||||
|
display: grid;
|
||||||
|
margin-bottom: 6rem;
|
||||||
|
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-row-gap: 0;
|
||||||
|
grid-column-gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerBig .playerBig__player,
|
||||||
|
.playerBig .playerMini {
|
||||||
|
grid-area: 1 / 1 / 2 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerBig .playerMini {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerBig .playerTrack {
|
||||||
|
grid-area: 3 / 1 / 4 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerBig .playerProgress {
|
||||||
|
grid-area: 2 / 1 / 3 / 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playerBig .controls {
|
||||||
|
grid-area: 4 / 1 / 5 / 2;
|
||||||
|
}
|
|
@ -17,11 +17,12 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: .5rem;
|
height: .5rem;
|
||||||
border-radius: .2rem;
|
border-radius: .5rem;
|
||||||
background-color: #e5e5e5;
|
background-color: #e5e5e5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.playerBig .playerProgress__progressBg {
|
.playerBig .playerProgress__progressBg {
|
||||||
|
border-radius: .2rem;
|
||||||
border-top-left-radius: 0;
|
border-top-left-radius: 0;
|
||||||
border-top-right-radius: 0;
|
border-top-right-radius: 0;
|
||||||
}
|
}
|
||||||
|
@ -30,8 +31,8 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: .5rem;
|
height: .5rem;
|
||||||
border-top-left-radius: .2rem;
|
border-top-left-radius: .5rem;
|
||||||
border-bottom-left-radius: .2rem;
|
border-bottom-left-radius: .5rem;
|
||||||
background-color: $color-primary;
|
background-color: $color-primary;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -50,7 +51,7 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: .5rem;
|
height: .5rem;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: .2rem;
|
border-radius: .5rem;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
|
@ -63,6 +63,8 @@
|
||||||
|
|
||||||
@import "5-modules/placeholder";
|
@import "5-modules/placeholder";
|
||||||
@import "5-modules/player-big";
|
@import "5-modules/player-big";
|
||||||
|
@import "5-modules/player-layout";
|
||||||
|
@import "5-modules/player-cover";
|
||||||
@import "5-modules/player-progress";
|
@import "5-modules/player-progress";
|
||||||
@import "5-modules/player-track";
|
@import "5-modules/player-track";
|
||||||
@import "5-modules/volume";
|
@import "5-modules/volume";
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<div class="playerBig">
|
<div class="player" class:playerBig={isBigPlayer}>
|
||||||
<div class="playerBig__player" class:placeholder={!ready}>
|
<div class="playerBig__player" class:placeholder={!ready} class:hidden={!isBigPlayer}>
|
||||||
{#if $current}
|
{#if $current}
|
||||||
<YoutubePlayer
|
<YoutubePlayer
|
||||||
id={$current ? $current.media.credentials.id : null}
|
id={$current ? $current.media.credentials.id : null}
|
||||||
|
@ -14,9 +14,34 @@
|
||||||
bind:seek={seek}
|
bind:seek={seek}
|
||||||
></YoutubePlayer>
|
></YoutubePlayer>
|
||||||
<div class="playerBig__overlay" on:click={() => $paused = !$paused}></div>
|
<div class="playerBig__overlay" on:click={() => $paused = !$paused}></div>
|
||||||
<button class="playerBig__reduce" class:active={ready && $paused}>Reduce<IconReduce></IconReduce></button>
|
<button
|
||||||
|
class="playerBig__reduce"
|
||||||
|
class:active={ready && $paused}
|
||||||
|
on:click|stopPropagation={() => switchBigPlayer()}
|
||||||
|
>
|
||||||
|
Reduce<IconReduce></IconReduce>
|
||||||
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
{#if !isBigPlayer}
|
||||||
|
<div class="playerMini">
|
||||||
|
<div class="playerCover" class:placeholder={$current}>
|
||||||
|
{#if $current}
|
||||||
|
<img
|
||||||
|
class="playerCover__img"
|
||||||
|
src={'https://img.youtube.com/vi/' + $current.media.credentials.id + '/mqdefault.jpg'}
|
||||||
|
alt="cover"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
class="playerCover__expand"
|
||||||
|
aria-label="Expand player"
|
||||||
|
title="Expand player"
|
||||||
|
on:click={() => switchBigPlayer()}
|
||||||
|
><IconExpand></IconExpand></button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<Progress
|
<Progress
|
||||||
duration={duration}
|
duration={duration}
|
||||||
|
@ -36,7 +61,7 @@
|
||||||
<!--<button class="playerTrack__fav" class:hidden={!$current} aria-label="Fav"><IconHeart></IconHeart></button>-->
|
<!--<button class="playerTrack__fav" class:hidden={!$current} aria-label="Fav"><IconHeart></IconHeart></button>-->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Controls></Controls>
|
<Controls isBigPlayer={isBigPlayer}></Controls>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
@ -45,6 +70,7 @@
|
||||||
import { getContext } from 'svelte'
|
import { getContext } from 'svelte'
|
||||||
import Controls from '/components/Controls.svelte'
|
import Controls from '/components/Controls.svelte'
|
||||||
import IconReduce from '/components/icons/player/Reduce.svelte'
|
import IconReduce from '/components/icons/player/Reduce.svelte'
|
||||||
|
import IconExpand from '/components/icons/player/Expand.svelte'
|
||||||
import IconHeart from '/components/icons/Heart.svelte'
|
import IconHeart from '/components/icons/Heart.svelte'
|
||||||
import YoutubePlayer from '/components/YoutubePlayer'
|
import YoutubePlayer from '/components/YoutubePlayer'
|
||||||
import Progress from '/components/player/Progress'
|
import Progress from '/components/player/Progress'
|
||||||
|
@ -61,6 +87,7 @@
|
||||||
let currentTime = null
|
let currentTime = null
|
||||||
let duration = null
|
let duration = null
|
||||||
let seek = null
|
let seek = null
|
||||||
|
let isBigPlayer = false
|
||||||
|
|
||||||
$: if (ended || error) {
|
$: if (ended || error) {
|
||||||
selectNext()
|
selectNext()
|
||||||
|
@ -70,4 +97,12 @@
|
||||||
seek(seconds, seekAhead)
|
seek(seconds, seekAhead)
|
||||||
currentTime = seconds
|
currentTime = seconds
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const switchBigPlayer = () => {
|
||||||
|
|
||||||
|
isBigPlayer = !isBigPlayer
|
||||||
|
console.log('switch player');
|
||||||
|
console.log($current.media);
|
||||||
|
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -88,7 +88,6 @@ export async function* tracksIterator(refererGenerator, cache) {
|
||||||
referer,
|
referer,
|
||||||
media: {
|
media: {
|
||||||
title: metadata.title,
|
title: metadata.title,
|
||||||
cover: metadata.thumbnail_url,
|
|
||||||
url: mediaUrl,
|
url: mediaUrl,
|
||||||
credentials: mediaCredentials
|
credentials: mediaCredentials
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue