Рефакторит плеер и перемотку

web-standards-ru · Sep 5, 2023 · 6f99623 · 6f99623
1 parent 9a6e785
commit 6f99623
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 40 deletions.
diff --git a/src/pages/episode.njk b/src/pages/episode.njk
@@ -33,10 +33,15 @@ eleventyComputed:
             </section>
         </header>
 
-        <div class="podcast__player-wrapper">
-            <button class="podcast__player-rewind"></button>
+        <div class="podcast__player player">
+            <button class="player__rewind player__rewind--back" aria-label="Назад на 10 секунд">
+                <svg class="player__icon" viewBox="0 0 900 900" width="40" height="40"><path d="M150 450a300 300 0 1 0 300-300H350V25L200 175l150 150V200h100a250 250 0 1 1-250 250h-50Z"/><path d="M362.2 354h30.5v196h-38.1V395.7l-45 28.9v-37.3l52.6-33.3Zm70.7 98c0-62.7 27.4-101.4 77.8-101.4s77.9 38.7 77.9 101.4-27.5 101.4-77.9 101.4c-50.4 0-77.8-38.7-77.8-101.4Zm38 0c0 46.2 15.5 70.6 39.8 70.6 24.4 0 40-24.4 40-70.6 0-46.2-15.6-70.6-40-70.6-24.3 0-39.7 24.4-39.7 70.6Z"/></svg>
+            </button>
+            <button class="player__rewind player__rewind--forward" aria-label="Вперёд на 10 секунд">
+                <svg class="player__icon" viewBox="0 0 900 900" width="40" height="40"><path d="M750 450a300 300 0 1 1-300-300h100V25l150 150-150 150V200H450a250 250 0 1 0 250 250h50Z"/><path d="M362.2 354h30.5v196h-38.1V395.7l-45 28.9v-37.3l52.6-33.3Zm70.7 98c0-62.7 27.4-101.4 77.8-101.4s77.9 38.7 77.9 101.4-27.5 101.4-77.9 101.4c-50.4 0-77.8-38.7-77.8-101.4Zm38 0c0 46.2 15.5 70.6 39.8 70.6 24.4 0 40-24.4 40-70.6 0-46.2-15.6-70.6-40-70.6-24.3 0-39.7 24.4-39.7 70.6Z"/></svg>
+            </button>
             <audio
-                class="podcast__player"
+                class="player__audio"
                 src="{{ episode.audio }}"
                 controls
                 type="audio/mpeg"

diff --git a/src/scripts/modules/podcast.js b/src/scripts/modules/podcast.js
@@ -1,5 +1,6 @@
-const player = document.querySelector('.podcast__player');
-const rewindButton = document.querySelector('.podcast__player-rewind');
+const player = document.querySelector('.player__audio');
+const backButton = document.querySelector('.player__rewind--back');
+const forwardButton = document.querySelector('.player__rewind--forward');
 
 /**
  * Выделяет из строки временные метки вида `00:14:30` или `14:30`.
@@ -62,24 +63,21 @@ if (player) {
     initAnchor();
 }
 
-rewindButton.addEventListener('click', () => {
+backButton.addEventListener('click', () => {
     rewindAudio(-10);
 });
 
+forwardButton.addEventListener('click', () => {
+    rewindAudio(10);
+});
+
 /** Перемотка аудио назад на `seconds` секунд
  * @param seconds количество секунд
  */
 function rewindAudio(seconds) {
     if (player.duration && !isNaN(player.duration)) {
         const currentTime = player.currentTime;
-        const duration = player.duration;
-        let targetTime = currentTime + seconds;
-
-        if (targetTime > duration) {
-            targetTime = duration;
-        } else if (targetTime < 0) {
-            targetTime = 0;
-        }
+        const targetTime = currentTime + seconds;
 
         player.currentTime = targetTime;
     }

diff --git a/src/styles/blocks/player.css b/src/styles/blocks/player.css
@@ -0,0 +1,35 @@
+.player {
+    display: grid;
+    grid-template-columns:
+        min-content
+        min-content
+        1fr;
+    align-items: center;
+    width: 100%;
+    height: 40px;
+}
+
+.player__rewind {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    background-color: transparent;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.player__icon {
+    display: block;
+    margin: auto;
+}
+
+.player__audio {
+    width: 100%;
+    height: 40px;
+    margin-left: 12px;
+    border-radius: 20px;
+    filter: drop-shadow(
+        2px 2px 4px rgba(0, 0, 0, 0.2)
+    );
+}
diff --git a/src/styles/blocks/podcast.css b/src/styles/blocks/podcast.css
@@ -94,36 +94,11 @@
     white-space: nowrap;
 }
 
-.podcast__player-wrapper {
+.podcast__player {
     position: sticky;
     top: 16px;
     z-index: 1;
-    display: flex;
     grid-column: 1 / -1;
-    width: 100%;
-    height: 40px;
-}
-
-.podcast__player {
-    width: 100%;
-    height: 40px;
-    border-radius: 20px;
-    filter: drop-shadow(
-        2px 2px 4px rgba(0, 0, 0, 0.2)
-    );
-}
-
-.podcast__player-rewind {
-    width: 40px;
-    height: 40px;
-    margin-right: 10px;
-    background-image: url('data:image/svg+xml,%3Csvg fill="%23000000" width="800px" height="800px" viewBox="0 0 32 32" id="icon" xmlns="http://www.w3.org/2000/svg"%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:none;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Erewind--10%3C/title%3E%3Cpath d="M4,18A12,12,0,1,0,16,6H12V1L6,7l6,6V8h4A10,10,0,1,1,6,18Z"/%3E%3Cpath d="M19.63,22.13a2.84,2.84,0,0,1-1.28-.27,2.44,2.44,0,0,1-.89-.77,3.57,3.57,0,0,1-.52-1.25,7.69,7.69,0,0,1-.17-1.68,7.83,7.83,0,0,1,.17-1.68,3.65,3.65,0,0,1,.52-1.25,2.44,2.44,0,0,1,.89-.77,2.84,2.84,0,0,1,1.28-.27,2.44,2.44,0,0,1,2.16,1,5.23,5.23,0,0,1,.7,2.93,5.23,5.23,0,0,1-.7,2.93A2.44,2.44,0,0,1,19.63,22.13Zm0-1.22a1.07,1.07,0,0,0,1-.55A3.38,3.38,0,0,0,21,18.85V17.47a3.31,3.31,0,0,0-.29-1.5,1.23,1.23,0,0,0-2.06,0,3.31,3.31,0,0,0-.29,1.5v1.38a3.38,3.38,0,0,0,.29,1.51A1.06,1.06,0,0,0,19.63,20.91Z"/%3E%3Cpath d="M10.63,22V20.82h2V15.63l-1.86,1-.55-1.06,2.32-1.3H14v6.5h1.78V22Z"/%3E%3Crect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/%3E%3C/svg%3E');
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 70%;
-    border: none;
-    border-radius: 50%;
-    cursor: pointer;
 }
 
 .podcast__timecode {

diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -27,6 +27,7 @@
 @import 'blocks/video.css';
 @import 'blocks/tooltip.css';
 @import 'blocks/not-found.css';
+@import 'blocks/player.css';
 @import 'blocks/podcast.css';
 @import 'blocks/podcast-preview.css';
 @import 'blocks/podcast-preview-grid.css';