@latest-thinking/lt-player 1.0.5-e → 1.0.5-g

package/src/components/poster/LTPlayerPoster.ts

@@ -31,29 +31,43 @@ export class LTPlayerPoster {
 
 
     setImage() {
-        return new Promise((resolve, reject) => {
-            const posterImageBody: HTMLElement = this.plyr.elements.container.querySelector('.lt-player__poster__image-body');
-
-            if (posterImageBody) {
-                const imageTag = document.createElement('img');
-                imageTag.classList.add('lt-player__poster__img--set-custom');
-                imageTag.src = this.config.getPosterImage();
-
-                imageTag.onload = function LTPlayerLoadPosterImage() {
-                    posterImageBody.append(imageTag);
-                    resolve(true);
-                }
-
-                imageTag.onerror = function LTPlayerLoadPosterImageError() {
-                    reject(true);
-                }
+        const customImageSelector = this.plyr.elements.container.querySelector('.lt-player__poster__img--set-custom');
+        const defaultImageSelector = this.plyr.elements.container.querySelector('.lt-player__poster__img__set-default');
+
+        const checkImage = (imageUrl: string, callback: (arg0: boolean) => void) => {
+            let img = new Image();
+
+            img.onerror = function() {
+                callback(false);
+            };
+
+            img.onload = function() {
+                callback(true);
+            };
+
+            img.src = imageUrl;
+        }
+
+
+        const setDefault = () => {
+            if (defaultImageSelector) {
+                defaultImageSelector.classList.remove('d-none');
             }
-        })
-    }
+        }
 
-    removeDefaultImage() {
-        const posterImage: HTMLElement = this.plyr.elements.container.querySelector('.lt-player__poster__img');
-        posterImage.classList.add('d-none');
-    }
 
+        if (this.config.getPosterImage()) {
+            if (customImageSelector) {
+                checkImage(this.config.getPosterImage(), function (exist) {
+                    if (!exist) {
+                        setDefault();
+                    } else {
+                        customImageSelector.classList.remove('d-none');
+                    }
+                })
+            }
+        } else {
+           setDefault()
+        }
+    }
 }

package/src/components/poster/LTPlayerPosterEvents.ts

@@ -128,13 +128,13 @@ export namespace LTPlayerPosterEvents {
          * Remove Onload Poster from player
          */
         onload(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {
-            const playerElementContainer = instance.playerConfig.getPlayerElementContainer();
-            const playerOnloadPosterSelector = playerElementContainer.parentElement.querySelector('.lt-player-onload-poster');
-
-            if (playerOnloadPosterSelector) {
-                playerElementContainer.classList.remove('d-none');
-                playerElementContainer.parentElement.querySelector('.lt-player-onload-poster').remove();
-            }
+            // const playerElementContainer = instance.playerConfig.getPlayerElementContainer();
+            // const playerOnloadPosterSelector = playerElementContainer.parentElement.querySelector('.lt-player-onload-poster');
+            //
+            // if (playerOnloadPosterSelector) {
+            //     // playerElementContainer.classList.remove('d-none');
+            //     playerElementContainer.parentElement.querySelector('.lt-player-onload-poster').remove();
+            // }
         }
 
         showControls(instance: LTPlayer.PortraitType | LTPlayer.LandscapeType) {

package/src/components/poster/LTPlayerPosterManager.ts

@@ -23,23 +23,16 @@ export class LTPlayerPosterManager {
     }
 
     init(instance: LTPlayer.LandscapeType | LTPlayer.PortraitType) {
+
         this.instance = instance;
         this.playerConfig = instance.playerConfig;
         this.templateService = instance.templateService;
         this.iconService = instance.iconService;
 
         this.poster = new LTPlayerPoster(this.instance.plyr, this.templateService, this.playerConfig, this.iconService);
-        this.poster.setTemplate();
 
-        if (this.playerConfig.getPosterImage()) {
-            this.poster.setImage().then(
-            result => {
-                this.poster.removeDefaultImage();
-                if (this.playerConfig.getPreload()) {
-                    this.initPreload();
-                }
-            });
-        }
+        this.poster.setTemplate();
+        this.poster.setImage();
         if (this.playerConfig.getPreload()) {
             this.initPreload();
         }

package/src/services/ResizeService.ts

@@ -282,6 +282,7 @@ export class ResizeService {
                 setHeight();
             }
         } else {
+
             setWidth();
 
             if (version !== 1) {

package/src/views/controls.handlebars

@@ -31,14 +31,14 @@
           </div>
         </div>
       </div>
-      <div class="lt-player-notification">
+      <div class="lt-player-notification landscape">
         <!--                <div class="lt-player-video-content">-->
         <!--                    <div class="content__body">-->
         <!--                        <h4 class="poster-title">{{videoParagraph}}</h4>-->
         <!--                        <p class="poster-paragraph">{{videoTitle}}</p>-->
         <!--                    </div>-->
         <!--                </div>-->
-        <div class="lt-player-notification__notification-button-state">
+        <div class="lt-player-notification__notification-button-state landscape">
           <div class="player-state">
             <img class="player-state__icon filter" src="" alt="">
           </div>
@@ -167,7 +167,7 @@
     </div>
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">
-            <div class="lt-player-notification">
+            <div class="lt-player-notification portrait">
                 <div class="lt-player-rewind-area">
                 </div>
                 <div class="lt-player-rewind lt-player-notify">
@@ -222,8 +222,8 @@
           </div>
         </div>
       </div>
-      <div class="lt-player-notification">
-        <div class="lt-player-notification__notification-button-state">
+      <div class="lt-player-notification portrait">
+        <div class="lt-player-notification__notification-button-state portrait">
           <div class="player-state">
             <img class="player-state__icon filter" src="" alt="">
           </div>
@@ -334,7 +334,7 @@
     </div>
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">
-            <div class="lt-player-notification">
+            <div class="lt-player-notification portrait">
                 <div class="lt-player-rewind-area">
                 </div>
                 <div class="lt-player-rewind lt-player-notify">

package/src/views/poster.handlebars

@@ -1,6 +1,7 @@
 <div class="lt-player__poster">
     <div class="lt-player__poster__image-body lt-player__poster__background__grey" >
-        <img class="lt-player__poster__img lt-player__poster__img__set-default" alt="" src="{{logoBig}}">
+        <img class="lt-player__poster__img lt-player__poster__img__set-default d-none" alt="" src="{{logoBig}}">
+        <img class="lt-player__poster__img--set-custom d-none" alt="" src="{{config.configData.posterImage}}">
     </div>
     <div class="lt-player__poster__body">
         <div class="content">