octo
/
mastoradio-fork
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add designed progress bar

This commit is contained in:
Tixie 2020-02-15 23:10:03 +01:00
parent 2ff9ba0e89
commit 3fb9b6e240
8 changed files with 185 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.postcssrc
View File

@ -1,6 +1,7 @@
{
"modules": false,
"plugins": {
"autoprefixer": true
"autoprefixer": true,
"postcss-input-range": true
}
}

40
package-lock.json generated
View File

@ -4736,6 +4736,12 @@
"locate-path": "^3.0.0"
}
},
"flatten": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
"integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==",
"dev": true
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@ -7202,6 +7208,40 @@
"postcss": "^7.0.0"
}
},
"postcss-input-range": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/postcss-input-range/-/postcss-input-range-4.0.0.tgz",
"integrity": "sha1-gpwvqcU/ub6+U8dTPhY46R5k4XM=",
"dev": true,
"requires": {
"postcss": "^6.0.3",
"postcss-selector-parser": "^2.2.3"
},
"dependencies": {
"postcss": {
"version": "6.0.23",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
}
},
"postcss-selector-parser": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-2.2.3.tgz",
"integrity": "sha1-+UN3iGBsPJrO4W/+jYsWKX8nu5A=",
"dev": true,
"requires": {
"flatten": "^1.0.2",
"indexes-of": "^1.0.1",
"uniq": "^1.0.1"
}
}
}
},
"postcss-merge-longhand": {
"version": "4.0.11",
"resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-4.0.11.tgz",

1
package.json
View File

@ -18,6 +18,7 @@
"parcel": "^1.12.4",
"parcel-plugin-static-files-copy": "^2.3.1",
"parcel-plugin-svelte": "^4.0.5",
"postcss-input-range": "^4.0.0",
"sass": "^1.25.0",
"svelte": "^3.16.7"
},

100
src/assets/scss/5-modules/player-progress.scss Normal file
View File

@ -0,0 +1,100 @@
/* ----------------------------------------------------------- */
/* == Player progress module */
/* ----------------------------------------------------------- */
/* Progress bar
-------------------------------------------------------------- */
.playerProgress__progress {
position: relative;
}
.playerProgress__progressBg {
position: absolute;
width: 100%;
height: .5rem;
border-radius: .2rem;
background-color: #e5e5e5;
}
.playerBig .playerProgress__progressBg {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.playerProgress__progressBgProgress {
position: absolute;
width: 0;
height: .5rem;
border-top-left-radius: .2rem;
border-bottom-left-radius: .2rem;
background-color: $color-primary;
}
.playerBig .playerProgress__progressBgProgress {
border-top-left-radius: 0;
}
.playerProgress__progressInput {
position: relative;
z-index: 1;
display: block;
appearance: none;
margin: 0;
padding: 0;
max-width: inherit;
width: 100%;
height: .5rem;
border: none;
border-radius: .2rem;
background-color: transparent;
box-shadow: none;
cursor: pointer;
}
.playerBig .playerProgress__progressInput {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.playerProgress__progressInput::range-thumb {
appearance: none;
margin-top: -.1rem;
width: 1.5rem;
height: 1.5rem;
border: none;
border-radius: 5rem;
background: #fff;
box-shadow: -.1rem .2rem .2rem rgba(99, 87, 118, .4);
opacity: 0;
transition: .15s opacity;
}
.playerProgress__progressInput:hover::range-thumb {
opacity: 1;
}
.playerProgress__progressInput::range-lower {
height: .5rem;
border-top-left-radius: .2rem;
border-bottom-left-radius: .2rem;
background-color: $color-primary;
}
.playerBig .playerProgress__progressInput::range-lower {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* Timecodes
-------------------------------------------------------------- */
.playerProgress__timecode {
display: flex;
justify-content: space-between;
margin: 1rem 0;
color: $color-grey-1;
font-size: 1.2rem;
}

11
src/assets/scss/_colors.scss
View File

@ -21,14 +21,7 @@ $color-dark-text: $color-primary;
$color-link: $color-primary;
// brand
// greys
// --------------------------------------------------------------
$color-twitter: #55acee;
$color-facebook: #3b5998;
$color-google: #dd4b39;
$color-youtube: #e52d27;
$color-pinterest: #cc2127;
$color-vimeo: #1ab7ea;
$color-linkedin: #0976b4;
$color-instagram: #3f729b;
$color-grey-1: #767676;

1
src/assets/scss/style.scss
View File

@ -62,6 +62,7 @@
// --------------------------------------------------------------
@import "5-modules/player-big";
@import "5-modules/player-progress";
// --------------------------------------------------------------

28
src/components/Viewer.svelte
View File

@ -1,4 +1,4 @@
<div>
<div class="playerBig">
<div class="playerBig__player">
<YoutubePlayer
id={$current ? $current.data.id : null}
@ -21,30 +21,24 @@
LOADING TRACK
{/if}
<div>
{currentTimeText}
<input
type="range"
min="0"
max={duration}
value="{currentTime}"
on:input={event => updateCurrentTime(event.target.value, false)}
on:change={event => updateCurrentTime(event.target.value, true)}
disabled={currentTime === null || duration === null}
>
{durationText}
</div>
<Progress
duration={duration}
currentTime={currentTime}
currentTimeText={currentTimeText}
durationText={durationText}
on:input={event => updateCurrentTime(event.target.value, false)}
on:change={event => updateCurrentTime(event.target.value, true)}
></Progress>
</div>
<script>
import { get } from 'svelte/store'
import YoutubePlayer from '/components/YoutubePlayer'
import Progress from '/components/player/Progress'
import { secondsToElapsedTime } from '/services/misc.js'
import { paused, muted, volume, current, selectNext, loading } from '/store.js'
let ready = null
let ended = null
let error = null

28
src/components/player/Progress.svelte Normal file
View File

@ -0,0 +1,28 @@
<div class="playerProgress">
<div class="playerProgress__progress">
<div class="playerProgress__progressBg"></div>
<div class="playerProgress__progressBgProgress" style="width:{currentPercent}%;"></div>
<input
class="playerProgress__progressInput"
type="range"
min="0"
max={duration}
value="{currentTime}"
on:input
on:change
disabled={currentTime === null || duration === null}
>
</div>
<div class="playerProgress__timecode">
<div class="playerProgress__timecodeItem">{currentTimeText}</div>
<div class="playerProgress__timecodeItem">{durationText}</div>
</div>
</div>
<script>
export let duration
export let currentTime
export let currentTimeText
export let durationText
$: currentPercent = currentTime ? (currentTime / duration) * 100 : 0
</script>