add designed progress bar
This commit is contained in:
Tixie
parent
2ff9ba0e89
commit
3fb9b6e240
@ -1,6 +1,7 @@
|
||||
{
|
||||
"modules": false,
|
||||
"plugins": {
|
||||
"autoprefixer": true
|
||||
"autoprefixer": true,
|
||||
"postcss-input-range": true
|
||||
}
|
||||
}
|
||||
|
||||
40
package-lock.json
generated
40
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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
100
src/assets/scss/5-modules/player-progress.scss
Normal 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;
|
||||
}
|
||||
@ -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;
|
||||
|
||||
@ -62,6 +62,7 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@import "5-modules/player-big";
|
||||
@import "5-modules/player-progress";
|
||||
|
||||
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@ -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
28
src/components/player/Progress.svelte
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user