@latest-thinking/lt-player 1.0.6 → 1.0.7-b

package/src/views/controls.handlebars

@@ -82,12 +82,9 @@
       <div class="bottom-controller">
         {{#mobile}}
         <div class="bottom-controller__left-buttons">
-          <div class="bottom-controller__volume_control">
-            <button type="button" class="plyr__control volume_control__volume-button">
-              <img class="volume-max d-none filter button-open" data-range-value="1" src="{{icons.volume-3}}" alt="">
-              <img class="volume-mute d-none filter button-open" data-range-value="0" src="{{icons.mute}}" alt="">
-            </button>
-          </div>
+          <button type="button" class="plyr__control plyr__controls_settings-button settings">
+              <img class="filter settings" src="{{icons.settings}}" alt="">
+          </button>
         </div>
         {{/mobile}}
         {{#desktop}}
@@ -98,15 +95,15 @@
             <div class="bottom-controller__volume_control">
               <button type="button" class="plyr__control volume_control__volume-button button-open">
                 <img class="volume-max filter button-open" data-range-value="1" src="{{icons.volume-3}}" alt="">
-                <img class="volume-75 d-none filter button-open" data-range-value="0.65" src="{{icons.volume-2}}" alt="">
-                <img class="volume-50 d-none filter button-open" data-range-value="0.35" src="{{icons.volume-1}}" alt="">
+                <img class="volume-75 d-none filter button-open" data-range-value="0.40" src="{{icons.volume-2}}" alt="">
+                <img class="volume-50 d-none filter button-open" data-range-value="0.02" src="{{icons.volume-1}}" alt="">
                 <img class="volume-mute d-none filter button-open" data-range-value="0" src="{{icons.mute}}" alt="">
               </button>
               <div class="volume_control__background d-none">
                 <button class="volume_control__volume-button-close button-close">
                   <img class="volume-max button-close" data-range-value="1" src="{{icons.volume-3}}" alt="">
-                  <img class="volume-75 d-none button-close" data-range-value="0.65" src="{{icons.volume-2}}" alt="">
-                  <img class="volume-50 d-none button-close" data-range-value="0.35" src="{{icons.volume-1}}" alt="">
+                  <img class="volume-75 d-none button-close" data-range-value="0.40" src="{{icons.volume-2}}" alt="">
+                  <img class="volume-50 d-none button-close" data-range-value="0.02" src="{{icons.volume-1}}" alt="">
                   <img class="volume-mute d-none button-close" data-range-value="0" src="{{icons.mute}}" alt="">
                 </button>
               </div>
@@ -125,18 +122,22 @@
               <img class="filter" src="{{icons.skip-backward}}" alt="">
             </button>
           </div>
+          {{#desktop}}
           <button type="button" class="plyr__control skip-backward-seconds" data-lt-player-chapterTimeStamp="">
             <img class="filter" src="{{icons.fast-backward}}" alt="">
           </button>
+          {{/desktop}}
           <div class="bottom-controller__play-button_body bottom-controller__play-button_body__landscape">
             <button type="button" class="plyr__control play-button">
               <img class="bottom-controller__play-icon d-none" src="{{icons.play}}" alt="">
               <img class="bottom-controller__pause-icon" src="{{icons.pause}}" alt="">
             </button>
           </div>
+          {{#desktop}}
           <button type="button" class="plyr__control skip-forward-seconds" data-lt-player-chapterTimeStamp="">
             <img class="filter" src="{{icons.fast-forward}}" alt="">
           </button>
+          {{/desktop}}
           <div class="bottom-controller__next-chapter-view-wrapper">
             <button type="button" class="plyr__control skip-forward" data-lt-player-chapterTimeStamp="">
               <img class="filter" src="{{icons.skip-forward}}" alt="">
@@ -149,21 +150,19 @@
             <button type="button" class="plyr__control mini-player-control">
               <img class="filter" src="{{icons.mini-player}}" alt="">
             </button>
-
-          <button type="button" class="plyr__control fullscreen-custom-control">
-            <img class="filter minimize d-none" src="{{icons.minimize}}" alt="">
-            <img class="filter maximize" src="{{icons.maximize}}" alt="">
-          </button>
+            <button type="button" class="plyr__control fullscreen-custom-control">
+              <img class="filter minimize d-none" src="{{icons.minimize}}" alt="">
+              <img class="filter maximize" src="{{icons.maximize}}" alt="">
+            </button>
           {{/desktop}}
-            {{#mobile}}
-                <button type="button" class="plyr__control plyr__controls_speed-button settings">
-                    2X
-                </button>
-                {{/mobile}}
+          {{#mobile}}
+            <button type="button" class="plyr__control fullscreen-custom-control">
+              <img class="filter minimize d-none" src="{{icons.minimize}}" alt="">
+              <img class="filter maximize" src="{{icons.maximize}}" alt="">
+            </button>
+          {{/mobile}}
         </div>
       </div>
-      <div class="player-lt__modal__mobile__background d-none"></div>
-      <div class="player-lt__modal__mobile d-none"></div>
     </div>
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">
@@ -275,14 +274,14 @@
       <div class="bottom-controller__background"></div>
       <div class="bottom-controller">
         {{#mobile}}
-          <div class="bottom-controller__volume_control">
-            <button type="button" class="plyr__control volume_control__volume-button">
-              <img class="volume-max d-none filter button-open" data-range-value="1" src="{{icons.volume-3}}" alt="">
-              <img class="volume-mute d-none filter button-open" data-range-value="0" src="{{icons.mute}}" alt="">
+          <div class="bottom-controller__left-buttons">
+            <button type="button" class="plyr__control plyr__controls_settings-button settings">
+                <img class="filter settings" src="{{icons.settings}}" alt="">
             </button>
           </div>
         {{/mobile}}
         {{#desktop}}
+        <div class="bottom-controller__left-buttons">
           <div class="bottom-controller__volume_control">
             <button type="button" class="plyr__control volume_control__volume-button button-open">
               <img class="volume-max filter button-open" data-range-value="1" src="{{icons.volume-3}}" alt="">
@@ -304,33 +303,38 @@
                 autocomplete="off" aria-label="Volume">
             </div>
           </div>
+        </div>
         {{/desktop}}
-        <button type="button" class="plyr__control skip-backward" data-lt-player-chapterTimeStamp="">
-          <img class="filter" src="{{icons.skip-backward}}" alt="">
-        </button>
-        <div class="bottom-controller__play-button_body bottom-controller__play-button_body__portrait">
-          <button type="button" class="plyr__control play-button">
-            <img class="bottom-controller__play-icon d-none" src="{{icons.play}}" alt="">
-            <img class="bottom-controller__pause-icon" src="{{icons.pause}}" alt="">
+        <div class="bottom-controller__center-buttons">
+          <button type="button" class="plyr__control skip-backward" data-lt-player-chapterTimeStamp="">
+            <img class="filter" src="{{icons.skip-backward}}" alt="">
+          </button>
+          <div class="bottom-controller__play-button_body bottom-controller__play-button_body__portrait">
+            <button type="button" class="plyr__control play-button">
+              <img class="bottom-controller__play-icon d-none" src="{{icons.play}}" alt="">
+              <img class="bottom-controller__pause-icon" src="{{icons.pause}}" alt="">
+            </button>
+          </div>
+          <button type="button" class="plyr__control skip-forward" data-lt-player-chapterTimeStamp="">
+            <img class="filter" src="{{icons.skip-forward}}" alt="">
           </button>
         </div>
-        <button type="button" class="plyr__control skip-forward" data-lt-player-chapterTimeStamp="">
-          <img class="filter" src="{{icons.skip-forward}}" alt="">
-        </button>
         {{#mobile}}
-          <button type="button" class="plyr__control plyr__controls_speed-button settings">
-            2X
-          </button>
+        <div class="bottom-controller__right-buttons">
+        </div>
+        {{/mobile}}
+        {{#mobile}}
+         <!--Maybe fullscreen-->
         {{/mobile}}
 
         {{#desktop}}
+        <div class="bottom-controller__right-buttons">
           <button type="button" class="plyr__control plyr__controls_settings-button settings">
             <img class="filter settings" src="{{icons.settings}}" alt="">
           </button>
+        </div>
         {{/desktop}}
       </div>
-      <div class="player-lt__modal__mobile__background d-none"></div>
-      <div class="player-lt__modal__mobile d-none"></div>
     </div>
     {{#mobile}}
         <div class="plyr__controls__mobile-background d-none">

package/src/views/settings.handlebars

@@ -1,7 +1,6 @@
 <div class="settings-controllers-enable__background d-none"></div>
 <div class="settings-controllers settings">
-    <span class="line-button"></span>
-    {{#desktop}}
+    <span class="line-button settings-controllers-header"></span>
         <div class="settings-controllers-enable__subtitles settings">
             <p class="settings-text settings">Subtitles</p>
             <label class="subtitles-body__switch settings">
@@ -16,18 +15,16 @@
                 <input id="speed-range-{{id}}" type="range"  min="0" max="3" step="1" class="speed-range-input settings">
             </div>
         </div>
-    {{/desktop}}
-    {{#mobile}}
-        <div class="settings-controllers-enable__speed-range settings">
-            <p class="settings-text settings">Speed</p>
-            <div class="speed-range-input-body mobile settings">
-                <button class="button-speed settings button_active" data-speed="1">1</button>
-                <button class="button-speed settings" data-speed="1.25">1.25</button>
-                <button class="button-speed settings" data-speed="1.5">1.5</button>
-                <button class="button-speed settings" data-speed="2">2</button>
-            </div>
-        </div>
-    {{/mobile}}
+<!--        <div class="settings-controllers-enable__speed-range settings">-->
+<!--            <p class="settings-text settings">Speed</p>-->
+<!--            <div class="speed-range-input-body mobile settings">-->
+<!--                <button class="button-speed settings button_active" data-speed="1">1</button>-->
+<!--                <button class="button-speed settings" data-speed="1.25">1.25</button>-->
+<!--                <button class="button-speed settings" data-speed="1.5">1.5</button>-->
+<!--                <button class="button-speed settings" data-speed="2">2</button>-->
+<!--            </div>-->
+<!--        </div>-->
+
     <div class="settings-controllers-enable__button-save settings">
         <button class="button-save settings">Save</button>
     </div>

package/src/views/share.handlebars

@@ -1,60 +1,63 @@
-<div class="share-controller">
+<div class="share-controller lt-player-mobile-share">
     <div class="share-controller-wrapper share-inactive">
-        <div class="share-controller-content">
-          <span class="line-button"></span>
-            <div class="share-controller-frame">
+        <div class="share-controller-content lt-player-mobile-share">
+            <div class="share-controller-mobile-modal-header lt-player-mobile-share">
+                <span class="line-button lt-player-mobile-share"></span>
+            </div>
+<!--          <span class="line-button lt-player-mobile-share"></span>-->
+            <div class="share-controller-frame lt-player-mobile-share">
 <!--                <div class="player-lt__close-button-e">-->
 <!--                    <span class="player-lt__close-button">×</span>-->
 <!--                </div>-->
-                <div class="share-controller-top">
-                    <div class="share-controller-title">
-                        <h3>Share this video</h3>
+                <div class="share-controller-top lt-player-mobile-share">
+                    <div class="share-controller-title lt-player-mobile-share">
+                        <h3 class="lt-player-mobile-share">Share this video</h3>
                     </div>
-                    <div class="share-controller-link-wrapper">
-                        <span class="share-controller-url" data-lt-player-copy=""></span>
-                        <button class="share-controller-link" type="button">Copy</button>
+                    <div class="share-controller-link-wrapper lt-player-mobile-share">
+                        <span class="share-controller-url lt-player-mobile-share" data-lt-player-copy=""></span>
+                        <button class="share-controller-link lt-player-mobile-share" type="button">Copy</button>
                     </div>
-                    <hr class="share-controller-hr">
+                    <hr class="share-controller-hr lt-player-mobile-share">
                 </div>
-                <div class="share-controller-via">
-                  <h3>You can also share via:</h3>
+                <div class="share-controller-via lt-player-mobile-share">
+                  <h3 class="lt-player-mobile-share">You can also share via:</h3>
                 </div>
-                <div class="a2a_kit a2a_kit_size_32 a2a_default_style share-controller-icons" data-a2a-url="{{canonicalUrl}}" data-a2a-title="{{title}}">
-                  <a class="a2a_button_embed">
-                      <span class="share-icon__icon">
-                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <div class="a2a_kit a2a_kit_size_32 a2a_default_style share-controller-icons lt-player-mobile-share" data-a2a-url="{{canonicalUrl}}" data-a2a-title="{{title}}">
+                  <a class="button_embed lt-player-mobile-share">
+                      <span class="share-icon__icon lt-player-mobile-share">
+                        <svg class="lt-player-mobile-share" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path d="M8.00028 17.0003C7.74428 17.0003 7.48825 16.9023 7.29325 16.7073L3.29325 12.7073C2.90225 12.3163 2.90225 11.6843 3.29325 11.2933L7.29325 7.29325C7.68425 6.90225 8.31631 6.90225 8.70731 7.29325C9.09831 7.68425 9.09831 8.31631 8.70731 8.70731L5.41434 12.0003L8.70731 15.2933C9.09831 15.6843 9.09831 16.3163 8.70731 16.7073C8.51231 16.9023 8.25628 17.0003 8.00028 17.0003Z" fill="#27282A"/>
                           <path d="M16.0007 17.0003C16.2567 17.0003 16.5127 16.9023 16.7077 16.7073L20.7077 12.7073C21.0987 12.3163 21.0987 11.6843 20.7077 11.2933L16.7077 7.29325C16.3167 6.90225 15.6847 6.90225 15.2937 7.29325C14.9027 7.68425 14.9027 8.31631 15.2937 8.70731L18.5866 12.0003L15.2937 15.2933C14.9027 15.6843 14.9027 16.3163 15.2937 16.7073C15.4887 16.9023 15.7447 17.0003 16.0007 17.0003Z" fill="#27282A"/>
                         </svg>
                       </span>
                   </a>
-                    <a class="a2a_button_facebook">
-                      <span class="share-icon__icon">
-                        <svg width="10" height="20" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="a2a_button_facebook lt-player-mobile-share">
+                      <span class="share-icon__icon lt-player-mobile-share">
+                        <svg class="lt-player-mobile-share" width="10" height="20" viewBox="0 0 10 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path d="M2.55277 20V10.6154H0V7.23652H2.55277V4.3505C2.55277 2.08264 4.0607 0 7.53529 0C8.9421 0 9.98237 0.1311 9.98237 0.1311L9.9004 3.28642C9.9004 3.28642 8.83949 3.27638 7.68178 3.27638C6.42879 3.27638 6.22804 3.83768 6.22804 4.7693V7.23652H10L9.83588 10.6154H6.22804V20H2.55277Z" fill="white"/>
                         </svg>
                       </span>
                     </a>
 
-                    <a class="a2a_button_twitter">
-                      <span class="share-icon__icon">
-                        <svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="a2a_button_twitter lt-player-mobile-share">
+                      <span class="share-icon__icon lt-player-mobile-share">
+                        <svg class="lt-player-mobile-share" width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path d="M18 1.65729C17.3377 1.93837 16.626 2.12834 15.879 2.2138C16.6415 1.7764 17.227 1.08375 17.5027 0.258472C16.7778 0.670159 15.9847 0.960219 15.1577 1.11612C14.484 0.429261 13.5243 0 12.4621 0C10.4226 0 8.76909 1.58246 8.76909 3.53422C8.76909 3.81126 8.80179 4.08097 8.86472 4.33971C5.79558 4.19228 3.07448 2.78525 1.25304 0.646953C0.935227 1.16894 0.753117 1.77613 0.753117 2.42375C0.753117 3.64996 1.40513 4.73169 2.39597 5.36553C1.80953 5.34795 1.23599 5.19636 0.723234 4.92341C0.723023 4.93822 0.723023 4.95302 0.723023 4.96789C0.723023 6.68029 1.99596 8.10878 3.68529 8.43347C3.14148 8.57502 2.57107 8.59573 2.01762 8.49404C2.48752 9.89817 3.85137 10.9199 5.46729 10.9485C4.20342 11.8964 2.61105 12.4615 0.880945 12.4615C0.58282 12.4615 0.288914 12.4447 0 12.4121C1.63427 13.4149 3.57539 14 5.66086 14C12.4535 14 16.1679 8.61449 16.1679 3.9441C16.1679 3.79081 16.1644 3.63839 16.1573 3.48684C16.8802 2.98665 17.5042 2.3671 18 1.65729Z" fill="white"/>
                         </svg>
                       </span>
                     </a>
 
-                    <a class="a2a_button_linkedin">
-                      <span class="share-icon__icon">
-                        <svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="a2a_button_linkedin lt-player-mobile-share">
+                      <span class="share-icon__icon lt-player-mobile-share">
+                        <svg class="lt-player-mobile-share" width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                           <path d="M3.85913 16V5.20483H0.215002V16H3.85913ZM2.03754 3.73004C3.30831 3.73004 4.09931 2.9011 4.09931 1.8652C4.07563 0.805935 3.30836 0 2.06165 0C0.815143 0 0 0.805951 0 1.8652C0 2.90115 0.7908 3.73004 2.01375 3.73004H2.03743H2.03754ZM5.87615 16H9.52028V9.97145C9.52028 9.64881 9.54396 9.3265 9.64019 9.09586C9.90363 8.45124 10.5032 7.78359 11.5099 7.78359C12.8286 7.78359 13.3561 8.77354 13.3561 10.2247V15.9999H17V9.81007C17 6.49422 15.2022 4.95139 12.8046 4.95139C10.8387 4.95139 9.97556 6.03334 9.49604 6.77025H9.52036V5.2046H5.87623C5.92405 6.21756 5.87623 15.9998 5.87623 15.9998L5.87615 16Z" fill="white"/>
                         </svg>
                       </span>
                     </a>
 
-                    <a class="a2a_button_whatsapp">
-                        <span class="share-icon__icon">
-                          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <a class="a2a_button_whatsapp lt-player-mobile-share">
+                        <span class="share-icon__icon lt-player-mobile-share">
+                          <svg class="lt-player-mobile-share" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <g clip-path="url(#clip0_11_828)">
                             <path d="M0 16L1.13085 11.8935C0.431709 10.6882 0.0649474 9.3232 0.0687679 7.92776C0.0687679 3.55513 3.6447 0 8.03438 0C10.1662 0 12.1681 0.825095 13.6695 2.32319C15.1748 3.82129 16.0038 5.81369 16 7.93156C16 12.3042 12.4241 15.8593 8.03056 15.8593H8.02674C6.6934 15.8593 5.383 15.5247 4.21776 14.8935L0 16ZM4.42024 13.4601L4.66093 13.6046C5.67717 14.2053 6.8424 14.5209 8.03056 14.5247H8.03438C11.6829 14.5247 14.6552 11.5703 14.6552 7.93536C14.6552 6.17491 13.9675 4.52091 12.7182 3.27377C11.4689 2.02662 9.80324 1.34221 8.03438 1.34221C4.38586 1.3384 1.41356 4.29278 1.41356 7.92776C1.41356 9.17111 1.76122 10.384 2.42598 11.4335L2.58261 11.6844L1.91404 14.1141L4.42024 13.4601Z" fill="white"/>
                             <path d="M0.278809 15.7225L1.37145 11.7567C0.695236 10.597 0.339936 9.27759 0.339936 7.93158C0.343756 3.71105 3.79361 0.277588 8.03429 0.277588C10.0935 0.277588 12.0228 1.07607 13.4746 2.52093C14.9264 3.9658 15.7248 5.88976 15.7248 7.93538C15.7248 12.1559 12.2712 15.5894 8.03429 15.5894H8.03047C6.74299 15.5894 5.47842 15.2662 4.35521 14.6578L0.278809 15.7225Z" fill="#27282A"/>
@@ -69,8 +72,8 @@
                           </svg>
                         </span>
                     </a>
-                    <a class="a2a_button_messenger">
-                        <span class="share-icon__icon">
+                    <a class="a2a_button_messenger lt-player-mobile-share">
+                        <span class="share-icon__icon lt-player-mobile-share">
                           <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <g clip-path="url(#clip0_11_831)">
                             <path fill-rule="evenodd" clip-rule="evenodd" d="M8 -0.000732422C3.494 -0.000732422 0 3.30127 0 7.75927C0 10.0913 0.956 12.1073 2.512 13.4993C2.642 13.6153 2.722 13.7793 2.726 13.9553L2.77 15.3793C2.784 15.8333 3.252 16.1293 3.668 15.9453L5.256 15.2453C5.39 15.1853 5.542 15.1753 5.684 15.2133C6.414 15.4133 7.19 15.5213 8 15.5213C12.506 15.5213 16 12.2193 16 7.76127C16 3.30327 12.506 -0.000732422 8 -0.000732422Z" fill="white"/>
@@ -84,8 +87,8 @@
                           </svg>
                         </span>
                     </a>
-                    <a class="a2a_button_email">
-                        <span class="share-icon__icon">
+                    <a class="a2a_button_email lt-player-mobile-share">
+                        <span class="share-icon__icon lt-player-mobile-share">
                           <svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                             <path fill-rule="evenodd" clip-rule="evenodd" d="M11.7045 0.25C12.7102 0.25 13.6777 0.6475 14.3895 1.36075C15.102 2.0725 15.5002 3.0325 15.5002 4.0375V9.9625C15.5002 12.055 13.7977 13.75 11.7045 13.75H4.29524C2.20199 13.75 0.500244 12.055 0.500244 9.9625V4.0375C0.500244 1.945 2.19449 0.25 4.29524 0.25H11.7045ZM12.8977 5.155L12.9577 5.095C13.137 4.8775 13.137 4.5625 12.9495 4.345C12.8452 4.23325 12.702 4.165 12.5527 4.15C12.3952 4.14175 12.2452 4.195 12.132 4.3L8.75025 7C8.31525 7.36075 7.692 7.36075 7.25025 7L3.87524 4.3C3.64199 4.1275 3.31949 4.15 3.12524 4.3525C2.92274 4.555 2.90024 4.8775 3.07199 5.1025L3.17024 5.2L6.58275 7.8625C7.00275 8.1925 7.512 8.3725 8.04525 8.3725C8.577 8.3725 9.09525 8.1925 9.5145 7.8625L12.8977 5.155Z" fill="white"/>
                           </svg>

package/src/components/addInfo/LTPlayerAdditionalInfoEvents.ts

@@ -1,247 +0,0 @@
-import {additionalInformation} from "../../global/types/ModuleTypes";
-import {LTPLayerAddInfo} from "./LTPlayerAddInfoManager";
-
-export namespace LTPlayerAdditionalInfo  {
-
-    export class Desktop {
-        set(controller: LTPLayerAddInfo.Controller) {
-
-            const playerContainer = controller.plyr.elements.container;
-            const playerControlsContainer = controller.plyr.elements.controls;
-            let additionalInfoBodyOut: Element = playerContainer.nextElementSibling;
-            let additionalInfoBodyIn: Element = playerControlsContainer.querySelector('.lt-player__additional-info');
-            let instance = controller;
-
-
-            const getInfoButtons = (selector: Element): NodeList => {
-
-              if (!selector) {
-                  return null
-              }
-              return selector.querySelectorAll('button');
-            }
-
-            let buttons: NodeList = null;
-
-            const infoButtonsOut: NodeList = getInfoButtons(additionalInfoBodyOut);
-            const infoButtonsIn: NodeList = getInfoButtons(additionalInfoBodyIn);
-
-            if (!infoButtonsOut) {
-                buttons = infoButtonsIn;
-            } else {
-                buttons = infoButtonsOut;
-            }
-
-            if (buttons.length === 0) {
-                return
-            }
-
-            const  createInformationModal = (info: additionalInformation, key: string) => {
-
-                let modalTemplate = null;
-
-                if (typeof info === 'object') {
-                    modalTemplate = controller.templateService.getAdditionalInfo({
-                        desktop : true,
-                        modal : true,
-                        id : `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
-                        object_data : true,
-                        [key] : info
-                    })
-                } else {
-                    modalTemplate = controller.templateService.getAdditionalInfo({
-                        desktop : true,
-                        modal : true,
-                        id : `${key}-${controller.playerInstance.playerConfig.getPlayerId()}`,
-                        data : info
-                    })
-                }
-
-                document.querySelector('body').insertAdjacentHTML("afterend", modalTemplate);
-            }
-
-            buttons.forEach((button: HTMLElement) => {
-
-                button.addEventListener('click', function (event) {
-
-                    event.preventDefault();
-
-                    let targetModal = button.dataset.ltTarget;
-                    let data = instance.additionalData;
-
-                    if (data[targetModal] !== undefined) {
-                        createInformationModal(data[targetModal], targetModal)
-                    }
-
-                    let modal = document.querySelector(`.lt-modal-${targetModal}-${instance.playerInstance.playerConfig.getPlayerId()}`);
-
-                    if (modal) {
-                        modal.classList.add('player-lt__show-modal');
-                    }
-
-                    window.Player.players.forEach( item => {item.plyr.pause()})
-                })
-            })
-        }
-
-        windowDesktopEvents(event: MouseEvent) {
-            const modals = document.querySelectorAll('.player-lt__modal');
-            if (modals.length !== 0) {
-                modals.forEach(modal => {
-                    if (modal.classList.contains('player-lt__show-modal')) {
-                        let target = event.target as HTMLElement;
-                        if (target.classList.contains('player-lt__show-modal') || target.classList.contains('player-lt__close-button')) {
-                            modal.classList.remove('player-lt__show-modal');
-                            document.querySelectorAll(".player-lt__modal").forEach(el => el.remove());
-                        }
-                    }
-                })
-            }
-        }
-
-
-    }
-
-    export class Mobile {
-        set(controller: LTPLayerAddInfo.Controller) {
-            const playerContainer = controller.plyr.elements.container;
-            const playerControlsContainer = controller.plyr.elements.controls;
-            let additionalInfoBody: Element = playerContainer.querySelector('.lt-player__additional-info-mobile');
-            let instance = controller;
-            let __this = this;
-
-            let buttons: NodeList = additionalInfoBody.querySelectorAll('button');
-
-            if (buttons.length === 0) {
-                return
-            }
-
-            const  createInformationModal = (info: additionalInformation, key: string) => {
-                let modalTemplate = null;
-
-                if (typeof info === 'object') {
-                    modalTemplate = controller.templateService.getAdditionalInfo({
-                        mobile : true,
-                        modal : true,
-                        [controller.device] : true,
-                        object_data : true,
-                        [key] : info
-                    })
-                } else {
-                    modalTemplate = controller.templateService.getAdditionalInfo({
-                        mobile : true,
-                        modal : true,
-                        data : info,
-                        [controller.device] : true
-                    })
-                }
-
-                const playerControlsContainer = instance.plyr.elements.controls;
-                const modal = playerControlsContainer.querySelector('.player-lt__modal__mobile');
-                modal.innerHTML = modalTemplate;
-            }
-
-            buttons.forEach((button: HTMLElement) => {
-                let mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(button);
-                if (mobileEvent) {
-                    mobileEvent.on('singletap', function LTPlayerMobileAdditionalInfoButtons(event) {
-                        event.preventDefault();
-
-                        controller.playerInstance.plyr.elements.controls.classList.add('plyr__controls-enable-addInfo');
-
-                        let targetModal = button.dataset.ltTarget;
-                        let data = instance.additionalData;
-
-
-                        if (data[targetModal] !== undefined) {
-                            createInformationModal(data[targetModal], targetModal)
-                        }
-
-                        playerControlsContainer.classList.add('player-lt__modal__mobile-show-modal');
-
-                        let mobileModal: HTMLElement = playerControlsContainer.querySelector('.player-lt__modal__mobile');
-
-                        let backgroundModal = playerControlsContainer.querySelector('.player-lt__modal__mobile__background');
-
-                        mobileModal.classList.remove('d-none');
-
-                        setTimeout(() => {
-                            mobileModal.style.bottom = String(0);
-                        }, 50)
-
-                        if (backgroundModal) {
-                            backgroundModal.classList.remove('d-none')
-                        }
-
-                        if (mobileModal) {
-                            mobileModal.classList.add('player-lt__modal__mobile-show-modal');
-                        }
-
-                        window.Player.players.forEach( item => {item.plyr.pause()});
-
-                        __this.dragCloseModal(controller);
-
-                        controller.playerInstance.playerControl.mobileEvents.showControls(controller.playerInstance)
-                    })
-                }
-            })
-
-
-        }
-
-        dragCloseModal(controller: LTPLayerAddInfo.Controller) {
-
-            const playerControlsContainer = controller.plyr.elements.controls;
-            const modalHeader = playerControlsContainer.querySelector('.player-lt__mobile__modal-header');
-            const  background = playerControlsContainer.querySelector('.player-lt__modal__mobile__background');
-            const modal: HTMLElement = playerControlsContainer.querySelector('.player-lt__modal__mobile');
-
-            const closeModal = () => {
-                if (playerControlsContainer.classList.contains('player-lt__modal__mobile-show-modal')) {
-
-                    modal.style.removeProperty('bottom')
-                    playerControlsContainer.classList.remove('plyr__controls-enable-addInfo');
-
-                    setTimeout(() => {
-                        const modalBody = playerControlsContainer.querySelector('.player-lt__modal__mobile');
-
-                        playerControlsContainer.classList.remove('player-lt__modal__mobile-show-modal');
-                        modalBody.classList.remove('player-lt__modal__mobile-show-modal');
-                        modalBody.classList.add('d-none');
-
-                        if (background) {
-                            background.classList.add('d-none');
-                        }
-
-                        controller.playerInstance.playerControl.mobileEvents.showControls(controller.playerInstance);
-
-                    }, 150)
-
-                }
-            }
-
-            if (modalHeader) {
-                let mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(modalHeader);
-                if (mobileEvent) {
-                    mobileEvent.on('pan', function LTPlayerMobileDragDownModal() {
-                        closeModal();
-                        if (controller.plyr.paused) {
-                            controller.plyr.play();
-                        }
-                    })
-                }
-            }
-            if (background) {
-                let mobileEvent: HammerManager = controller.playerInstance.eventInstance.mobileEvents.setMobileEvent(background);
-                if (mobileEvent) {
-                    mobileEvent.on('singletap', function LTPlayerMobileCloseModal() {
-                        closeModal();
-                        if (controller.plyr.paused) {
-                            controller.plyr.play();
-                        }
-                    })
-                }
-            }
-        }
-    }
-}