Player icons fix

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', () => {
+      /* video.addEventListener('play', () => {
-        this.updateButton(toggle);
+      }); */
-      });
 
       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>
@@ -541,14 +541,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
     const player = this.wrapper;

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 {

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

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