From 3fb9b6e2405ad6ca4cc5b10454b7607e04530f8b Mon Sep 17 00:00:00 2001 From: Tixie Date: Sat, 15 Feb 2020 23:10:03 +0100 Subject: [PATCH] add designed progress bar --- .postcssrc | 3 +- package-lock.json | 40 +++++++ package.json | 1 + .../scss/5-modules/player-progress.scss | 100 ++++++++++++++++++ src/assets/scss/_colors.scss | 11 +- src/assets/scss/style.scss | 1 + src/components/Viewer.svelte | 28 ++--- src/components/player/Progress.svelte | 28 +++++ 8 files changed, 185 insertions(+), 27 deletions(-) create mode 100644 src/assets/scss/5-modules/player-progress.scss create mode 100644 src/components/player/Progress.svelte diff --git a/.postcssrc b/.postcssrc index 0e58c48..834d8c4 100644 --- a/.postcssrc +++ b/.postcssrc @@ -1,6 +1,7 @@ { "modules": false, "plugins": { - "autoprefixer": true + "autoprefixer": true, + "postcss-input-range": true } } diff --git a/package-lock.json b/package-lock.json index 760ba22..743ea1d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index f96a454..21e2525 100644 --- a/package.json +++ b/package.json @@ -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" }, diff --git a/src/assets/scss/5-modules/player-progress.scss b/src/assets/scss/5-modules/player-progress.scss new file mode 100644 index 0000000..ea39b3e --- /dev/null +++ b/src/assets/scss/5-modules/player-progress.scss @@ -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; +} diff --git a/src/assets/scss/_colors.scss b/src/assets/scss/_colors.scss index 53f483e..5010ddc 100755 --- a/src/assets/scss/_colors.scss +++ b/src/assets/scss/_colors.scss @@ -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; diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss index 18d97c4..aeb1353 100755 --- a/src/assets/scss/style.scss +++ b/src/assets/scss/style.scss @@ -62,6 +62,7 @@ // -------------------------------------------------------------- @import "5-modules/player-big"; +@import "5-modules/player-progress"; // -------------------------------------------------------------- diff --git a/src/components/Viewer.svelte b/src/components/Viewer.svelte index 73cd67c..863b092 100644 --- a/src/components/Viewer.svelte +++ b/src/components/Viewer.svelte @@ -1,4 +1,4 @@ -
+
- {currentTimeText} - - updateCurrentTime(event.target.value, false)} - on:change={event => updateCurrentTime(event.target.value, true)} - disabled={currentTime === null || duration === null} - > - - {durationText} -
- + updateCurrentTime(event.target.value, false)} + on:change={event => updateCurrentTime(event.target.value, true)} + >
\ No newline at end of file