Первые наброски объекта-плеера

src/main/resources/kinosearch/webapp/player.ftl

@@ -1,7 +1,7 @@
 [#ftl]
 [#include "/header.inc.ftl"]
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.0/js.cookie.min.js"></script>
-<script type="text/javascript" src="/js/player.js"></script>
+<script type="text/javascript" src="/js/ksplayer.js"></script>
 
 <div class="modal fade" tabindex="-1" role="dialog" id="modal">
     <div class="modal-dialog modal-sm">
@@ -26,35 +26,9 @@
 
 <hr>
 
-<div id="pl-season" class="dropdown hide" style="display: inline-block;">
+<div id="ksplayer"></div>
-    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownSeason" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-        Seasons
-        <span class="caret"></span>
-    </button>
-    <ul id="pl-season-menu" class="dropdown-menu" aria-labelledby="dropdownSeason">
-        <li><a href="#">Season</a></li>
-    </ul>
-</div>
-
-<div id="pl-serial" class="dropdown hide" style="display: inline-block;">
-    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownSerial" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
-        Serials
-        <span class="caret"></span>
-    </button>
-    <ul id="pl-serial-menu" class="dropdown-menu" aria-labelledby="dropdownSerial">
-        <li><a href="#">Serial</a></li>
-    </ul>
-</div>
-
-<br id="plbr">
-
-<h2 id="title"></h2>
-
-<br>
-
-<video id="player" class="center-block" controls="controls" preload="none"></video>
 <br>
 <script type="text/javascript"> 
-    const playerCore = initPlayer(${json}); 
+    const ksplayer = new KSPlayer('ksplayer');
 </script>
 [#include "/fother.inc.ftl"]

src/main/resources/kinosearch/webapp/static/js/ksplayer.js

@@ -0,0 +1,47 @@
+const KSPlayer = function(containerId) {
+    /* --- FIELDS -------------- */
+
+    var videoType = 'unknown';
+    var isShowTitle = false;
+
+    /* --- PRIVATE FUNCTIONS --- */
+
+    /* --- CONSTRUCTOR --------- */
+
+    const containerElement = document.getElementById(containerId);
+    if (containerElement === null) {
+        throw `Container "${containerId}" not found!`;
+    }
+
+    let videoElement = document.createElement('video');
+    videoElement.id = 'player';
+    videoElement.className = 'center-block';
+    videoElement.setAttribute('controls', 'controls');
+    videoElement.setAttribute('preload', 'none');
+
+    var titleElement = document.createElement('h2');
+    titleElement.id = 'title';
+
+    containerElement.appendChild(videoElement);
+
+    /* --- FUNCTIONS ----------- */
+
+    this.getType = function() {
+        return videoType;
+    }
+
+    this.setTitle = function(text) {
+        if (text) {
+            titleElement.innerText = text;
+            if (!isShowTitle) {
+                containerElement.insertBefore(titleElement, videoElement);
+                isShowTitle = true;
+            }
+        } else {
+            if (isShowTitle) {
+                containerElement.removeChild(titleElement);
+                isShowTitle = false;
+            }
+        }
+    }
+}