feat(info-tab): Add info tab

- #391
podlove · Aug 6, 2017 · bb32e41 · bb32e41
1 parent b5f6716
commit bb32e41
Show file tree

Hide file tree

Showing 70 changed files with 615 additions and 232 deletions.
diff --git a/docs/config.md b/docs/config.md
@@ -156,3 +156,24 @@ _Not providing chapters will disable all chapter related functions._
     }
 }
 ```
+
+#### Contributors
+
+| contributor.name   | Name of contributor (e.g. speaker)   |
+| contributor.avatar | Absolute Url to contributor's avatar |
+
+```javascript
+ contributors: [{
+      avatar: 'https://freakshow.fm/wp-content/cache/podlove/47/08928e3c26dcb1141d67ad75869619/tim-pritlove_50x50.jpg',
+      name: 'Tim Pritlove'
+  }, {
+      avatar: 'https://freakshow.fm/wp-content/cache/podlove/0f/9c18f5e825496b9060337f92814142/clemens-schrimpe_50x50.jpg',
+      name: '	Clemens Schrimpe'
+  }, {
+      avatar: 'https://freakshow.fm/wp-content/cache/podlove/8e/f30cbe274c3f5e43dc4a7219676f50/hukl_50x50.jpg',
+      name: 'hukl'
+  }, {
+      avatar: 'https://freakshow.fm/wp-content/cache/podlove/b2/425e5c8f180ddf548c95be1c2d7bcf/denis-ahrens_50x50.jpg',
+      name: 'Denis Ahrens'
+  }]
+```
diff --git a/docs/embedding.md b/docs/embedding.md
@@ -111,7 +111,20 @@ The _podlovePlayer_ returns a promise with a redux store as a result that can be
         reference: {
             config: '//podlove-player.surge.sh/fixtures/example.json',
             share: '//podlove-player.surge.sh/share'
-        }
+        },
+        contributors: [{
+            avatar: 'https://freakshow.fm/wp-content/cache/podlove/47/08928e3c26dcb1141d67ad75869619/tim-pritlove_50x50.jpg',
+            name: 'Tim Pritlove'
+        }, {
+            avatar: 'https://freakshow.fm/wp-content/cache/podlove/0f/9c18f5e825496b9060337f92814142/clemens-schrimpe_50x50.jpg',
+            name: '	Clemens Schrimpe'
+        }, {
+            avatar: 'https://freakshow.fm/wp-content/cache/podlove/8e/f30cbe274c3f5e43dc4a7219676f50/hukl_50x50.jpg',
+            name: 'hukl'
+        }, {
+            avatar: 'https://freakshow.fm/wp-content/cache/podlove/b2/425e5c8f180ddf548c95be1c2d7bcf/denis-ahrens_50x50.jpg',
+            name: 'Denis Ahrens'
+        }]
     });
 </script>
 ```
diff --git a/docs/error.md b/docs/error.md
@@ -59,7 +59,20 @@ navigation: 7
         reference: {
             config: '//podlove-player.surge.sh/fixtures/example.json',
             share: '//podlove-player.surge.sh/share'
-        }
+        },
+        contributors: [{
+            avatar: 'https://freakshow.fm/wp-content/cache/podlove/47/08928e3c26dcb1141d67ad75869619/tim-pritlove_50x50.jpg',
+            name: 'Tim Pritlove'
+        }, {
+            avatar: 'https://freakshow.fm/wp-content/cache/podlove/0f/9c18f5e825496b9060337f92814142/clemens-schrimpe_50x50.jpg',
+            name: '	Clemens Schrimpe'
+        }, {
+            avatar: 'https://freakshow.fm/wp-content/cache/podlove/8e/f30cbe274c3f5e43dc4a7219676f50/hukl_50x50.jpg',
+            name: 'hukl'
+        }, {
+            avatar: 'https://freakshow.fm/wp-content/cache/podlove/b2/425e5c8f180ddf548c95be1c2d7bcf/denis-ahrens_50x50.jpg',
+            name: 'Denis Ahrens'
+        }]
     };
 
     podlovePlayer('#load-error', Object.assign({}, config, {

diff --git a/docs/fixtures/example.json b/docs/fixtures/example.json
@@ -64,5 +64,18 @@
         "config": "//podlove-player.surge.sh/fixtures/example.json",
         "share": "//podlove-player.surge.sh/share",
         "origin": "//podlove-player.surge.sh"
-    }
+    },
+    "contributors": [{
+        "avatar": "https://freakshow.fm/wp-content/cache/podlove/47/08928e3c26dcb1141d67ad75869619/tim-pritlove_50x50.jpg",
+        "name": "Tim Pritlove"
+    }, {
+        "avatar": "https://freakshow.fm/wp-content/cache/podlove/0f/9c18f5e825496b9060337f92814142/clemens-schrimpe_50x50.jpg",
+        "name": "Clemens Schrimpe"
+    }, {
+        "avatar": "https://freakshow.fm/wp-content/cache/podlove/8e/f30cbe274c3f5e43dc4a7219676f50/hukl_50x50.jpg",
+        "name": "hukl"
+    }, {
+        "avatar": "https://freakshow.fm/wp-content/cache/podlove/b2/425e5c8f180ddf548c95be1c2d7bcf/denis-ahrens_50x50.jpg",
+        "name": "Denis Ahrens"
+    }]
 }
diff --git a/docs/playground.md b/docs/playground.md
@@ -83,7 +83,20 @@ navigation: 7
         },
         runtime: {
             language: 'en'
-        }
+        },
+        contributors: [{
+            avatar: 'https://freakshow.fm/wp-content/cache/podlove/47/08928e3c26dcb1141d67ad75869619/tim-pritlove_50x50.jpg',
+            name: 'Tim Pritlove'
+        }, {
+            avatar: 'https://freakshow.fm/wp-content/cache/podlove/0f/9c18f5e825496b9060337f92814142/clemens-schrimpe_50x50.jpg',
+            name: '	Clemens Schrimpe'
+        }, {
+            avatar: 'https://freakshow.fm/wp-content/cache/podlove/8e/f30cbe274c3f5e43dc4a7219676f50/hukl_50x50.jpg',
+            name: 'hukl'
+        }, {
+            avatar: 'https://freakshow.fm/wp-content/cache/podlove/b2/425e5c8f180ddf548c95be1c2d7bcf/denis-ahrens_50x50.jpg',
+            name: 'Denis Ahrens'
+        }]
     };
 
     function loadEditor(store) {

diff --git a/docs/standalone.html b/docs/standalone.html
@@ -73,7 +73,20 @@
                 config: '//podlove-player.surge.sh/fixtures/example.json',
                 share: '//podlove-player.surge.sh/share',
                 origin: '//podlove-player.surge.sh/standalone.html'
-            }
+            },
+            contributors: [{
+                avatar: 'https://freakshow.fm/wp-content/cache/podlove/47/08928e3c26dcb1141d67ad75869619/tim-pritlove_50x50.jpg',
+                name: 'Tim Pritlove'
+            }, {
+                avatar: 'https://freakshow.fm/wp-content/cache/podlove/0f/9c18f5e825496b9060337f92814142/clemens-schrimpe_50x50.jpg',
+                name: '	Clemens Schrimpe'
+            }, {
+                avatar: 'https://freakshow.fm/wp-content/cache/podlove/8e/f30cbe274c3f5e43dc4a7219676f50/hukl_50x50.jpg',
+                name: 'hukl'
+            }, {
+                avatar: 'https://freakshow.fm/wp-content/cache/podlove/b2/425e5c8f180ddf548c95be1c2d7bcf/denis-ahrens_50x50.jpg',
+                name: 'Denis Ahrens'
+            }]
         }
     </script>
 

diff --git a/src/components/App.vue b/src/components/App.vue
@@ -45,18 +45,18 @@
 </script>
 
 <style lang="scss">
-  @import 'variables';
-  @import 'global';
-  @import 'utils';
-  @import 'font';
-  @import 'resets/resets';
+  @import '~styles/variables';
+  @import '~styles/global';
+  @import '~styles/utils';
+  @import '~styles/font';
+  @import '~styles/text';
+  @import '~styles/resets/resets';
 
-  @import 'inputs';
-  @import 'embed';
-  @import 'share';
+  @import '~styles/inputs';
+  @import '~styles/share';
 
-  @import 'transitions';
-  @import 'animations';
+  @import '~styles/transitions';
+  @import '~styles/animations';
 
   .podlove {
     display: block;

diff --git a/src/components/header/Error.vue b/src/components/header/Error.vue
@@ -40,7 +40,7 @@
 </script>
 
 <style lang="scss">
-  @import 'variables';
+  @import '~styles/variables';
 
   $error-height: 100px;
 

diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
@@ -32,7 +32,7 @@
 </script>
 
 <style lang="scss">
-  @import 'variables';
+  @import '~styles/variables';
 
   .header {
     padding: $padding $padding 0 $padding;

diff --git a/src/components/header/Info.vue b/src/components/header/Info.vue
@@ -52,7 +52,7 @@
 </script>
 
 <style lang="scss">
-  @import 'variables';
+  @import '~styles/variables';
 
   $poster-size: 100px;
   $description-height: 100px;

diff --git a/src/components/icons/AudioIcon.vue b/src/components/icons/AudioIcon.vue
@@ -1,44 +1,14 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="24.8" height="21" viewBox="0 0 24.8 21">
-    <!-- Muted / 0% -->
-    <g v-if="muted || volume <= 0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-      <g :stroke="color || 'currentColor'">
-        <polyline points="9,17 12.5,20.5 12.5,12"/>
-        <path d="M12.5,6V0.5l-7,7H2C1.2,7.5,0.5,8.2,0.5,9v3c0,0.8,0.7,1.5,1.5,1.5h2.5"/>
-        <path d="M15.5,10.5c0,1.4-1.1,2.5-2.5,2.5h-0.5"/>
-        <path d="M1.5,20.5l20-20"/>
-      </g>
-    </g>
-    <!-- 25% -->
-    <g v-else-if="!muted && volume > 0 && volume <= 25" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-      <g :stroke="color || 'currentColor'">
-        <path d="M5.5,7.5H2C1.2,7.5,0.5,8.2,0.5,9v3c0,0.8,0.7,1.5,1.5,1.5h3.5l7,7v-20L5.5,7.5L5.5,7.5z"/>
-        <path d="M15.5,7c1.1,0.8,2,2,2,3.5s-0.9,2.7-2,3.5"/>
-      </g>
-    </g>
-    <!-- 50% -->
-    <g v-else-if="!muted && volume > 25 && volume <= 50" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-      <g :stroke="color || 'currentColor'">
-        <path d="M5.5,7.5H2C1.2,7.5,0.5,8.2,0.5,9v3c0,0.8,0.7,1.5,1.5,1.5h3.5l7,7v-20L5.5,7.5L5.5,7.5z"/>
-        <path d="M17.5,4.5c1.7,1.4,3,3.7,3,6c0,2.3-1.3,4.6-3,6"/>
-        <path d="M15.5,7c1.1,0.8,2,2,2,3.5s-0.9,2.7-2,3.5"/>
-      </g>
-    </g>
-    <!-- 75% -->
-    <g v-else stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
-      <g :stroke="color || 'currentColor'">
-        <path d="M5.5,7.5H2C1.2,7.5,0.5,8.2,0.5,9v3c0,0.8,0.7,1.5,1.5,1.5h3.5l7,7v-20L5.5,7.5L5.5,7.5z"/>
-        <path d="M20,2.5c2.2,1.9,3.5,4.8,3.5,8s-1.3,6.1-3.5,8"/>
-        <path d="M17.5,4.5c1.7,1.4,3,3.7,3,6c0,2.3-1.3,4.6-3,6"/>
-        <path d="M15.5,7c1.1,0.8,2,2,2,3.5s-0.9,2.7-2,3.5"/>
-      </g>
-    </g>
-  </svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="23px" height="23px" viewBox="0 0 20 20">
+  <ellipse cx="6.11" cy="3.55" fill="none" :stroke="color || 'currentColor'" rx="2.11" ry="2.15"/>
+  <ellipse cx="13.15" cy="15.55" fill="none" :stroke="color || 'currentColor'" rx="2.1" ry="2.15"/>
+  <circle cx="13.15" cy="9.55" r="2.15" fill="none" :stroke="color || 'currentColor'"/>
+  <path :fill="color || 'currentColor'" d="M1 3h3v1H1zm9 0h8v1h-8zM1 9h8v1H1zm14 0h3v1h-3zM1 15h8v1H1zm14 0h3v1h-3z"/>
+</svg>
 </template>
 
 <script>
   export default {
-    props: ['color', 'volume', 'muted']
+    props: ['color']
   }
 </script>
-
diff --git a/src/components/icons/CalendarIcon.vue b/src/components/icons/CalendarIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size || '20px'" :height="size || '20px'" viewBox="0 0 20 20">
+    <path :fill="color || 'currentColor'" d="M 2,3 2,17 18,17 18,3 2,3 Z M 17,16 3,16 3,8 17,8 17,16 Z M 17,7 3,7 3,4 17,4 17,7 Z"></path>
+    <rect :fill="color || 'currentColor'" width="1" height="3" x="6" y="2"></rect>
+    <rect :fill="color || 'currentColor'" width="1" height="3" x="13" y="2"></rect>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: ['color', 'size']
+}
+</script>
+
diff --git a/src/components/icons/ChaptersIcon.vue b/src/components/icons/ChaptersIcon.vue
@@ -1,11 +1,6 @@
 <template>
-  <svg width="18px" height="15px" viewBox="0 0 20 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <polygon stroke="none" :fill="color" fill-rule="evenodd" points="0 16.5 3.36 16.5 3.36 13.0625 0 13.0625"></polygon>
-      <polygon stroke="none" :fill="color" fill-rule="evenodd" points="0 10.025 3.36 10.025 3.36 6.58875 0 6.58875"></polygon>
-      <polygon stroke="none" :fill="color" fill-rule="evenodd" points="0 3.54875 3.36 3.54875 3.36 0.1125 0 0.1125"></polygon>
-      <polygon stroke="none" :fill="color" fill-rule="evenodd" points="6 2.41249995 20 2.41249995 20 1.1125 6 1.1125"></polygon>
-      <polygon stroke="none" :fill="color" fill-rule="evenodd" points="6 8.95687498 20 8.95687498 20 7.65687502 6 7.65687502"></polygon>
-      <polygon stroke="none" :fill="color" fill-rule="evenodd" points="6 15.43125 20 15.43125 20 14.13125 6 14.13125"></polygon>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20">
+    <path :fill="color || 'currentColor'" d="M6 4h12v1H6zM6 9h12v1H6zM6 14h12v1H6zM2 4h2v1H2zM2 9h2v1H2zM2 14h2v1H2z"></path>
   </svg>
 </template>
 

diff --git a/src/components/icons/ClockIcon.vue b/src/components/icons/ClockIcon.vue
@@ -0,0 +1,14 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" :width="size || '20px'" :height="size || '20px'" viewBox="0 0 20 20">
+    <circle fill="none" :stroke="color || 'currentColor'" stroke-width="1.1" cx="10" cy="10" r="9"></circle>
+    <rect x="9" y="4" width="1" height="7"></rect>
+    <path fill="none" :stroke="color || 'currentColor'" stroke-width="1.1" d="M13.018,14.197 L9.445,10.625"></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  props: ['color', 'size']
+}
+</script>
+
diff --git a/src/components/icons/DownloadIcon.vue b/src/components/icons/DownloadIcon.vue
@@ -1,6 +1,8 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
-    <path :fill="color" d="M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z"/>
+  <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 20 20">
+    <path fill="none" :stroke="color || 'currentColor'" stroke-width="1.1" d="M6.5,14.61 L3.75,14.61 C1.96,14.61 0.5,13.17 0.5,11.39 C0.5,9.76 1.72,8.41 3.3,8.2 C3.38,5.31 5.75,3 8.68,3 C11.19,3 13.31,4.71 13.89,7.02 C14.39,6.8 14.93,6.68 15.5,6.68 C17.71,6.68 19.5,8.45 19.5,10.64 C19.5,12.83 17.71,14.6 15.5,14.6 L12.5,14.6"></path>
+    <polyline fill="none" :stroke="color || 'currentColor'" points="11.75 16 9.5 18.25 7.25 16"></polyline>
+    <path fill="none" :stroke="color || 'currentColor'" d="M9.5,18 L9.5,9.5"></path>
   </svg>
 </template>
 

diff --git a/src/components/icons/InfoIcon.vue b/src/components/icons/InfoIcon.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 20">
+      <path :fill="color" d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path>
+      <circle fill="none" :stroke="color || 'currentColor'" stroke-width="1.1" cx="10" cy="10" r="9"></circle>
+  </svg>
+</template>
+
+<script>
+  export default {
+    props: ['color']
+  }
+</script>
+
diff --git a/src/components/icons/ShareIcon.vue b/src/components/icons/ShareIcon.vue
@@ -1,10 +1,8 @@
 <template>
-  <svg width="17px" height="21px" viewBox="295 67 17 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <g stroke="none" stroke-width="1" fill-rule="evenodd" transform="translate(296.000000, 67.000000)">
-          <polygon :fill="color" points="7.81097143 0.501942857 3.10125714 5.20937143 6.2384 5.20937143 6.2384 16.9133714 9.38125714 16.9133714 9.38125714 5.20937143 12.5184 5.20937143"></polygon>
-          <polygon :fill="color" points="11.6681143 7.23805714 11.6681143 8.38091429 14.4761143 8.38091429 14.4761143 19.4289143 1.1424 19.4289143 1.1424 8.38091429 3.95382857 8.38091429 3.95382857 7.23805714 -0.000457142857 7.23805714 -0.000457142857 20.5717714 15.6201143 20.5717714 15.6201143 7.23805714"></polygon>
-      </g>
-  </svg>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="23" viewBox="0 0 20 20">
+    <path :fill="color || 'currentColor'" d="M12.15 4L9.5 1.4 6.85 4l-.7-.7L9.5 0l3.35 3.3"></path>
+    <path fill="none" :stroke="color || 'currentColor'" d="M9.5 10V1M6 5.5H3.5v13h12v-13H13"></path>
+</svg>
 </template>
 
 <script>

diff --git a/src/components/icons/SpeakerIcon.vue b/src/components/icons/SpeakerIcon.vue
@@ -1,11 +1,44 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
-    <path :fill="color" d="M5 17h-5v-10h5v10zm2-10v10l9 5v-20l-9 5zm17 4h-5v2h5v-2zm-1.584-6.232l-4.332 2.5 1 1.732 4.332-2.5-1-1.732zm1 12.732l-4.332-2.5-1 1.732 4.332 2.5 1-1.732z"/>
+  <svg xmlns="http://www.w3.org/2000/svg" width="24.8" height="21" viewBox="0 0 24.8 21">
+    <!-- Muted / 0% -->
+    <g v-if="muted || volume <= 0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+      <g :stroke="color || 'currentColor'">
+        <polyline points="9,17 12.5,20.5 12.5,12"/>
+        <path d="M12.5,6V0.5l-7,7H2C1.2,7.5,0.5,8.2,0.5,9v3c0,0.8,0.7,1.5,1.5,1.5h2.5"/>
+        <path d="M15.5,10.5c0,1.4-1.1,2.5-2.5,2.5h-0.5"/>
+        <path d="M1.5,20.5l20-20"/>
+      </g>
+    </g>
+    <!-- 25% -->
+    <g v-else-if="!muted && volume > 0 && volume <= 25" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+      <g :stroke="color || 'currentColor'">
+        <path d="M5.5,7.5H2C1.2,7.5,0.5,8.2,0.5,9v3c0,0.8,0.7,1.5,1.5,1.5h3.5l7,7v-20L5.5,7.5L5.5,7.5z"/>
+        <path d="M15.5,7c1.1,0.8,2,2,2,3.5s-0.9,2.7-2,3.5"/>
+      </g>
+    </g>
+    <!-- 50% -->
+    <g v-else-if="!muted && volume > 25 && volume <= 50" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+      <g :stroke="color || 'currentColor'">
+        <path d="M5.5,7.5H2C1.2,7.5,0.5,8.2,0.5,9v3c0,0.8,0.7,1.5,1.5,1.5h3.5l7,7v-20L5.5,7.5L5.5,7.5z"/>
+        <path d="M17.5,4.5c1.7,1.4,3,3.7,3,6c0,2.3-1.3,4.6-3,6"/>
+        <path d="M15.5,7c1.1,0.8,2,2,2,3.5s-0.9,2.7-2,3.5"/>
+      </g>
+    </g>
+    <!-- 75% -->
+    <g v-else stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+      <g :stroke="color || 'currentColor'">
+        <path d="M5.5,7.5H2C1.2,7.5,0.5,8.2,0.5,9v3c0,0.8,0.7,1.5,1.5,1.5h3.5l7,7v-20L5.5,7.5L5.5,7.5z"/>
+        <path d="M20,2.5c2.2,1.9,3.5,4.8,3.5,8s-1.3,6.1-3.5,8"/>
+        <path d="M17.5,4.5c1.7,1.4,3,3.7,3,6c0,2.3-1.3,4.6-3,6"/>
+        <path d="M15.5,7c1.1,0.8,2,2,2,3.5s-0.9,2.7-2,3.5"/>
+      </g>
+    </g>
   </svg>
 </template>
 
 <script>
   export default {
-    props: ['color']
+    props: ['color', 'volume', 'muted']
   }
 </script>
+
diff --git a/src/components/icons/SpeakerMuteIcon.vue b/src/components/icons/SpeakerMuteIcon.vue
diff --git a/src/components/player/Player.vue b/src/components/player/Player.vue
@@ -35,7 +35,7 @@
 </script>
 
 <style lang="scss">
-  @import 'variables';
+  @import '~styles/variables';
 
   .player {
     width: 100%;