From 54493a6eecb13db95a15c0cf2827cc6230493890 Mon Sep 17 00:00:00 2001
From: morethanwords <thanwords24@gmail.com>
Date: Sun, 30 Aug 2020 14:06:24 +0300
Subject: [PATCH] Player icons fix

---
 src/lib/mediaPlayer.ts        | 20 ++++++--------------
 src/scss/partials/_ckin.scss  | 10 ++++++++++
 src/scss/partials/_fonts.scss |  4 ++--
 src/scss/partials/_ico.scss   |  2 ++
 4 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/lib/mediaPlayer.ts b/src/lib/mediaPlayer.ts
index d6294f2d..a2243707 100644
--- a/src/lib/mediaPlayer.ts
+++ b/src/lib/mediaPlayer.ts
@@ -281,6 +281,8 @@ export default class VideoPlayer {
           video.autoplay = true;
           video.play();
         }
+      }).finally(() => { // due to autoplay, play will not call
+        this.wrapper.classList.toggle('is-playing', !this.video.paused);
       });
       //(this.wrapper.querySelector('.toggle') as HTMLButtonElement).click();
     }
@@ -388,12 +390,10 @@ export default class VideoPlayer {
         this.togglePlay();
       }); */
   
-      video.addEventListener('play', () => {
-        this.updateButton(toggle);
-      });
+      /* video.addEventListener('play', () => {
+      }); */
 
       video.addEventListener('pause', () => {
-        this.updateButton(toggle);
         clearInterval(updateInterval);
       });
   
@@ -515,12 +515,12 @@ export default class VideoPlayer {
     const skin = this.skin;
     if(skin === 'default') {
       return `
-      <button class="${skin}__button--big toggle tgico-largeplay" title="Toggle Play"></button>
+      <button class="${skin}__button--big toggle tgico" title="Toggle Play"></button>
       <div class="${skin}__gradient-bottom ckin__controls"></div>
       <div class="${skin}__controls ckin__controls">
         <div class="bottom-controls">
           <div class="left-controls">
-            <button class="${skin}__button toggle tgico-play" title="Toggle Video"></button>
+            <button class="${skin}__button toggle tgico" title="Toggle Video"></button>
             <div class="time">
               <time id="time-elapsed">0:00</time>
               <span> / </span>
@@ -540,14 +540,6 @@ export default class VideoPlayer {
       `;
     }
   }
-
-  public updateButton(toggle: NodeListOf<HTMLElement>) {
-    const icon = this.video.paused ? 'tgico-play' : 'tgico-pause';
-    Array.from(toggle).forEach((button) => {
-      button.classList.remove('tgico-play', 'tgico-pause');
-      button.classList.add(icon);
-    });
-  }
   
   public toggleFullScreen(fullScreenButton: HTMLElement) {
     // alternative standard method
diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss
index 981fbc27..9fb188c6 100644
--- a/src/scss/partials/_ckin.scss
+++ b/src/scss/partials/_ckin.scss
@@ -159,6 +159,10 @@
     pointer-events: none;
   }
 
+  .toggle:before {
+    content: $tgico-play;
+  }
+
   &.is-playing {
     .default__gradient-bottom {
       transform: translateY(50px);
@@ -188,6 +192,12 @@
     .default__controls {
       transform: translateY(52px);
     }
+
+    .toggle {
+      &:before {
+        content: $tgico-pause;
+      }
+    }
   }
 
   .player-volume {
diff --git a/src/scss/partials/_fonts.scss b/src/scss/partials/_fonts.scss
index 806ff692..a84d0bea 100644
--- a/src/scss/partials/_fonts.scss
+++ b/src/scss/partials/_fonts.scss
@@ -264,7 +264,7 @@
   content: "\e94c";
 }
 .tgico-pause:before {
-  content: "\e94d";
+  content: $tgico-pause;
 }
 .tgico-permissions:before {
   content: "\e94e";
@@ -282,7 +282,7 @@
   content: "\e952";
 }
 .tgico-play:before {
-  content: "\e953";
+  content: $tgico-play;
 }
 .tgico-poll:before {
   content: "\e954";
diff --git a/src/scss/partials/_ico.scss b/src/scss/partials/_ico.scss
index d06ee5cd..3c275deb 100644
--- a/src/scss/partials/_ico.scss
+++ b/src/scss/partials/_ico.scss
@@ -20,3 +20,5 @@ $tgico-unarchive: "\e968";
 $tgico-smile: "\e963";
 $tgico-info2: "\e934";
 $tgico-keyboard: "\e935";
+$tgico-play: "\e953";
+$tgico-pause: "\e94d";