feat: trigger pulse effect on arrow shortcuts

Author: Eddie-Thuo

mp4-video-player.js

@@ -19,10 +19,10 @@ class MP4VideoPlayer extends PolymerElement {
         <div class="title">
           <h3 id="video_title">[[title]]</h3>
         </div>
-        <div class="pulse-icon icon-left">
+        <div id="replay_pulse" class="pulse-icon icon-left">
           <iron-icon icon="player-icons:replay-5"></iron-icon>
         </div>
-        <div class="pulse-icon icon-right">
+        <div id="forward_pulse" class="pulse-icon icon-right">
           <iron-icon icon="player-icons:forward-5"></iron-icon>
         </div>
         <div class="large-btn" on-click="play">
@@ -650,6 +650,8 @@ class MP4VideoPlayer extends PolymerElement {
     const maxVol = 1;
     const minVol = 0;
     const { currentTime, volume } = this._getShadowElementById('video_player');
+    const forwardPulse = this._getShadowElementById('forward_pulse');
+    const replayPulse = this._getShadowElementById('replay_pulse');
     switch (event.keyCode) {
       case this._SPACE_BAR_KEY:
       case this._P_KEY:
@@ -663,10 +665,18 @@ class MP4VideoPlayer extends PolymerElement {
         break;
       case this._LEFT_ARROW: {
         this._updateCurrentTime(currentTime - this.skipBy);
+        replayPulse.classList.remove('on');
+        // eslint-disable-next-line no-unused-expressions
+        replayPulse.offsetWidth; // trigger reflow..
+        replayPulse.classList.add('on');
         break;
       }
       case this._RIGHT_ARROW: {
         this._updateCurrentTime(currentTime + this.skipBy);
+        forwardPulse.classList.remove('on');
+        // eslint-disable-next-line no-unused-expressions
+        forwardPulse.offsetWidth; // trigger reflow..
+        forwardPulse.classList.add('on');
         break;
       }
       case this._UP_ARROW: {

player-styles.js

@@ -33,10 +33,9 @@ const playerStyles = html`
       height: 100px;
       border-radius: 50%;
       margin-top: -50px;
-      background: red;
+      background: var(--video-pulse-icon-color, #d32f2f);
+      transform: scale(0);
       box-shadow: 0 0 0 0 rgba(224,20,20, 1);
-      animation: pulse 1s ease-out;
-      animation-iteration-count: infinite;
     }
 
     .pulse-icon.icon-left {
@@ -57,6 +56,10 @@ const playerStyles = html`
       transform: translate(-50%, -50%);
     }
 
+    .pulse-icon.on {
+      animation: pulse 0.55s ease-out;
+    }
+
     @keyframes pulse {
       0% {
         transform: scale(0.1, 0.1);

test/mp4-video-player_test.html

@@ -329,7 +329,8 @@
             '--video-menu-item-color': 'Cyan',
             '--video-menu-item-icon-color': 'DarkViolet',
             '--video-tooltip-background-color': 'Magenta',
-            '--video-large-play-button-color': 'Azure'
+            '--video-large-play-button-color': 'Azure',
+            '--video-pulse-icon-color': 'LightSteelBlue'
           });
 
           assertComputed(player, '750px', '--video-min-width');
@@ -361,6 +362,12 @@
 
           const largePlayBtn = player.shadowRoot.querySelector('.tooltip');
           assertComputed(largePlayBtn, 'Azure', '--video-large-play-button-color');
+
+          const forwardPulse = player.shadowRoot.querySelector('#forward_pulse');
+          assertComputed(forwardPulse, 'LightSteelBlue', '--video-pulse-icon-color');
+
+          const replayPulse = player.shadowRoot.querySelector('#replay_pulse');
+          assertComputed(replayPulse, 'LightSteelBlue', '--video-pulse-icon-color');
         });
       });