From 3e1a6befce3e01b098cb1b016dbf7c32153d5d1f Mon Sep 17 00:00:00 2001 From: Tixie Date: Sat, 22 Feb 2020 19:59:54 +0100 Subject: [PATCH] add small player --- src/assets/scss/5-modules/player-big.scss | 4 -- src/assets/scss/5-modules/player-cover.scss | 49 ++++++++++++++ src/assets/scss/5-modules/player-layout.scss | 65 +++++++++++++++++++ .../scss/5-modules/player-progress.scss | 9 +-- src/assets/scss/style.scss | 2 + src/components/Viewer.svelte | 43 ++++++++++-- src/services/misc.js | 1 - 7 files changed, 160 insertions(+), 13 deletions(-) create mode 100644 src/assets/scss/5-modules/player-cover.scss create mode 100644 src/assets/scss/5-modules/player-layout.scss diff --git a/src/assets/scss/5-modules/player-big.scss b/src/assets/scss/5-modules/player-big.scss index 30018f4..e46f4e5 100644 --- a/src/assets/scss/5-modules/player-big.scss +++ b/src/assets/scss/5-modules/player-big.scss @@ -2,10 +2,6 @@ /* == Big player */ /* ----------------------------------------------------------- */ -.playerBig { - margin-bottom: 6rem; -} - .playerBig__player { position: relative; overflow: hidden; diff --git a/src/assets/scss/5-modules/player-cover.scss b/src/assets/scss/5-modules/player-cover.scss new file mode 100644 index 0000000..b3dad8a --- /dev/null +++ b/src/assets/scss/5-modules/player-cover.scss @@ -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; +} diff --git a/src/assets/scss/5-modules/player-layout.scss b/src/assets/scss/5-modules/player-layout.scss new file mode 100644 index 0000000..8dc24e1 --- /dev/null +++ b/src/assets/scss/5-modules/player-layout.scss @@ -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; +} diff --git a/src/assets/scss/5-modules/player-progress.scss b/src/assets/scss/5-modules/player-progress.scss index f382b14..da9028e 100644 --- a/src/assets/scss/5-modules/player-progress.scss +++ b/src/assets/scss/5-modules/player-progress.scss @@ -17,11 +17,12 @@ position: absolute; width: 100%; height: .5rem; - border-radius: .2rem; + border-radius: .5rem; background-color: #e5e5e5; } .playerBig .playerProgress__progressBg { + border-radius: .2rem; border-top-left-radius: 0; border-top-right-radius: 0; } @@ -30,8 +31,8 @@ position: absolute; width: 0; height: .5rem; - border-top-left-radius: .2rem; - border-bottom-left-radius: .2rem; + border-top-left-radius: .5rem; + border-bottom-left-radius: .5rem; background-color: $color-primary; } @@ -50,7 +51,7 @@ width: 100%; height: .5rem; border: none; - border-radius: .2rem; + border-radius: .5rem; background-color: transparent; box-shadow: none; cursor: pointer; diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 3c1cd45..8e0ecef 100755 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -63,6 +63,8 @@ @import "5-modules/placeholder"; @import "5-modules/player-big"; +@import "5-modules/player-layout"; +@import "5-modules/player-cover"; @import "5-modules/player-progress"; @import "5-modules/player-track"; @import "5-modules/volume"; diff --git a/src/components/Viewer.svelte b/src/components/Viewer.svelte index 54f2549..3d9925f 100644 --- a/src/components/Viewer.svelte +++ b/src/components/Viewer.svelte @@ -1,5 +1,5 @@ -
-
+
+
{#if $current}
$paused = !$paused}>
- + {/if}
+ {#if !isBigPlayer} +
+
+ {#if $current} + cover + + {/if} +
+
+ {/if} -->
- +
@@ -45,6 +70,7 @@ import { getContext } from 'svelte' import Controls from '/components/Controls.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 YoutubePlayer from '/components/YoutubePlayer' import Progress from '/components/player/Progress' @@ -61,6 +87,7 @@ let currentTime = null let duration = null let seek = null + let isBigPlayer = false $: if (ended || error) { selectNext() @@ -70,4 +97,12 @@ seek(seconds, seekAhead) currentTime = seconds } + + const switchBigPlayer = () => { + + isBigPlayer = !isBigPlayer + console.log('switch player'); + console.log($current.media); + + } diff --git a/src/services/misc.js b/src/services/misc.js index ca87ba0..09f1ae3 100644 --- a/src/services/misc.js +++ b/src/services/misc.js @@ -88,7 +88,6 @@ export async function* tracksIterator(refererGenerator, cache) { referer, media: { title: metadata.title, - cover: metadata.thumbnail_url, url: mediaUrl, credentials: mediaCredentials }