fix(player): Moved loader hiding outside of timer on play event

openplayerjs · Nov 14, 2018 · 1f081ae · 1f081ae
1 parent c2e8d0a
commit 1f081ae
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 29 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -36,21 +36,8 @@
 <body>
     <div class="players video-player">
         <h1>Video Sample</h1>
-        <video class="op-player__media" id="video" controls playsinline
-            data-op-ads="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpostoptimizedpod&cmsid=496&vid=short_onecue&correlator=">
-            <source src="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8">
-        </video>
-        <div>
-            <label>Change source <select name="sources">
-                <option value="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4" selected>MP4</option>
-                <option value="https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm">WebM</option>
-                <option value="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8">HLS</option>
-                <option value="https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd">M(PEG)-DASH</option>
-            </select>
-            </label>
-            <button class="destroy-player">Destroy player</button>
-            <button class="load-caption">Load caption</button>
-        </div>
+        <video class="op-player__media" id="video" controls playsinline>
+            <source src="https://cdn5.anivid.nut.cc/vid/s1/10481/1/5.mp4/playlist.m3u8" type="application/x-mpegURL"></video>
     </div>
 
     <div class="players audio-player">
@@ -75,10 +62,12 @@ <h1>Audio Sample</h1>
         script.src = '../dist/openplayer.js?rand=' + new Date().getTime();
         script.async = true;
         script.onload = function () {
-            var script = document.createElement('script');
-            script.src = 'demo.js?rand=' + new Date().getTime();
-            script.async = true;
-            document.head.appendChild(script);
+            var player = new OpenPlayer('video');
+            player.init();
+            const events = ['loadstart', 'durationchange', 'loadedmetadata', 'loadeddata', 'progress', 'canplay', 'canplaythrough', 'suspend', 'abort', 'error', 'emptied', 'stalled', 'play', 'playing', 'pause', 'waiting', 'seeking', 'seeked', 'timeupdate', 'ended', 'ratechange', 'volumechange'];
+            events.forEach(event => {
+                player.getElement().addEventListener(event, () => console.log(event));
+            });
         };
         document.head.appendChild(script);
     </script>

diff --git a/dist/openplayer.js b/dist/openplayer.js
@@ -1674,15 +1674,15 @@ var Player = function () {
 
           _this3.playBtn.setAttribute('aria-hidden', 'true');
 
-          _this3.loader.setAttribute('aria-hidden', el instanceof media_1.default ? 'false' : 'true');
+          _this3.loader.setAttribute('aria-hidden', el instanceof media_1.default || constants_1.IS_ANDROID || constants_1.IS_IOS ? 'false' : 'true');
         };
 
         this.events.durationchange = function () {
           var el = _this3.activeElement();
 
           _this3.playBtn.setAttribute('aria-hidden', 'true');
 
-          _this3.loader.setAttribute('aria-hidden', el instanceof media_1.default ? 'false' : 'true');
+          _this3.loader.setAttribute('aria-hidden', el instanceof media_1.default || constants_1.IS_ANDROID || constants_1.IS_IOS ? 'false' : 'true');
         };
 
         this.events.canplay = function () {
@@ -1712,10 +1712,10 @@ var Player = function () {
 
           _this3.playBtn.classList.add('op-player__play--paused');
 
+          _this3.loader.setAttribute('aria-hidden', el instanceof media_1.default || constants_1.IS_ANDROID || constants_1.IS_IOS ? 'false' : 'true');
+
           setTimeout(function () {
             _this3.playBtn.setAttribute('aria-hidden', 'true');
-
-            _this3.loader.setAttribute('aria-hidden', el instanceof media_1.default ? 'false' : 'true');
           }, 350);
         };
 
@@ -1732,7 +1732,7 @@ var Player = function () {
 
           var el = _this3.activeElement();
 
-          _this3.playBtn.setAttribute('aria-hidden', el instanceof media_1.default ? 'false' : 'true');
+          _this3.playBtn.setAttribute('aria-hidden', el instanceof media_1.default || constants_1.IS_ANDROID || constants_1.IS_IOS ? 'false' : 'true');
         };
       }
 

diff --git a/dist/openplayer.min.js b/dist/openplayer.min.js
diff --git a/src/js/player.ts b/src/js/player.ts
@@ -699,12 +699,12 @@ class Player {
             this.events.waiting = () => {
                 const el = this.activeElement();
                 this.playBtn.setAttribute('aria-hidden', 'true');
-                this.loader.setAttribute('aria-hidden', el instanceof Media ? 'false' : 'true');
+                this.loader.setAttribute('aria-hidden', el instanceof Media || IS_ANDROID || IS_IOS ? 'false' : 'true');
             };
             this.events.durationchange = () => {
                 const el = this.activeElement();
                 this.playBtn.setAttribute('aria-hidden', 'true');
-                this.loader.setAttribute('aria-hidden', el instanceof Media ? 'false' : 'true');
+                this.loader.setAttribute('aria-hidden', el instanceof Media || IS_ANDROID || IS_IOS ? 'false' : 'true');
             };
             this.events.canplay = () => {
                 this.playBtn.setAttribute('aria-hidden', 'true');
@@ -723,9 +723,10 @@ class Player {
             this.events.play = () => {
                 const el = this.activeElement();
                 this.playBtn.classList.add('op-player__play--paused');
+                this.loader.setAttribute('aria-hidden', el instanceof Media || IS_ANDROID || IS_IOS ? 'false' : 'true');
+
                 setTimeout(() => {
                     this.playBtn.setAttribute('aria-hidden', 'true');
-                    this.loader.setAttribute('aria-hidden', el instanceof Media ? 'false' : 'true');
                 }, 350);
             };
             this.events.playing = () => {
@@ -736,7 +737,7 @@ class Player {
                 this.playBtn.classList.remove('op-player__play--paused');
                 this.loader.setAttribute('aria-hidden', 'true');
                 const el = this.activeElement();
-                this.playBtn.setAttribute('aria-hidden', el instanceof Media ? 'false' : 'true');
+                this.playBtn.setAttribute('aria-hidden', el instanceof Media || IS_ANDROID || IS_IOS ? 'false' : 'true');
             };
         }