add designed progress bar

.postcssrc

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

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",

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"
   },

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;
+}

src/assets/scss/_colors.scss

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

src/assets/scss/style.scss

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

src/components/Viewer.svelte

@@ -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>
+    <Progress
-        {currentTimeText}
+        duration={duration}
-
+        currentTime={currentTime}
-        <input
+        currentTimeText={currentTimeText}
-            type="range"
+        durationText={durationText}
-            min="0"
+        on:input={event => updateCurrentTime(event.target.value, false)}
-            max={duration}
+        on:change={event => updateCurrentTime(event.target.value, true)}
-            value="{currentTime}"
+    ></Progress>
-            on:input={event => updateCurrentTime(event.target.value, false)}
-            on:change={event => updateCurrentTime(event.target.value, true)}
-            disabled={currentTime === null || duration === null}
-        >
-
-        {durationText}
-    </div>
-
 </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

src/components/player/Progress.svelte

@@ -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>