Changed movie file styling and handling.

index.html

@@ -72,8 +72,7 @@
         </div>
     </template>
     <template id="vidTemplate">
-        <span class="movieStyle" tabindex="1">
+        <span id="movieID" class="movieStyle" tabindex="1">
-            <img id="movieID" class="thumbnail" src="" />
             <input id="titleID" class="movieTitle" type="text" value="" readonly="true" />
         </span>
     </template>

resources/css/main.css

@@ -155,17 +155,35 @@
 .movieStyle, .fileStyle { background-color: rgba(101, 101, 101, 0.56); }
 
 .movieStyle {
+    position: relative;
     float: left;
     width: 15em;
     height: 8.5em;
     overflow: hidden;
     margin: 0.5em;
     padding: 0.5em;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+}
+
+.videoInputField {
+    position: absolute;
+    width: 100%;
+    bottom: 0.64em;
+    left: 0em;
+	background-color: rgba(0, 0, 0, 0.64);
+	color: rgb(255, 255, 255);
+    text-align: center;
+    border-top: 1px solid rgb(255, 255, 255);
+    border-bottom: 1px solid rgb(255, 255, 255);
+    text-overflow: ellipsis;
 }
 
 .dirStyle:hover, .movieStyle:hover, .fileStyle:hover {
     background-color: rgba(0, 141, 166, 0.56);
     cursor: pointer;
+    box-shadow: 0px 0px 15px rgb(114,184,199);
+    border-radius: 0.5em;
 }
 
 

resources/js/uiActions.js

@@ -39,13 +39,11 @@ const enableEdit = (obj) => {
     formerFileName             = obj.value;
 }
 
-const disableEdits = () => {
+const disableEdits = (elm) => {
-    // this references the passed object from
+    elm.style.backgroundColor  = "";
-    // addEventListener than us passing it
+    elm.style.color            = '';
-    this.style.backgroundColor  = "#ffffff00";
+    elm.value                  = formerFileName;
-    this.style.color            = '#ffffff';
+    elm.readOnly               = "true";
-    this.value                  = formerFileName;
-    this.readOnly               = "true";
 }
 
 const showMedia = async (mediaLoc, type) => {

resources/js/uiEvents.js

@@ -1,5 +1,6 @@
 let itemObj = undefined;
 
+// For context menu to have element
 document.onclick = (event) => {
     let obj       = event.target;
     let callingID = obj.id;
@@ -19,7 +20,7 @@ document.onclick = (event) => {
        }
     }
 }
-
+// Actions for content
 document.ondblclick = (event) => {
     let obj       = event.target;
     let callingID = obj.id;

resources/js/xmlParser.js

@@ -92,7 +92,7 @@ const updateHTMLDirList = async (data) => {
         thumbnail     = videos[i].children[1].innerHTML;
         let vidClone  = document.importNode(vidTemplate.content, true);
 
-        createElmBlock(vidClone, thumbnail, vidNme);
+        createElmBlock(vidClone, thumbnail, vidNme, true);
     }
 
     // Insert images
@@ -141,15 +141,25 @@ const sortElms = (obj) => {
     });
 }
 
-const createElmBlock = (elm, imgSrc, fileName) => {
+const createElmBlock = (elm, imgSrc, fileName, isVideo = null) => {
     contnrTag       = elm.firstElementChild;
-    let imgTag      = elm.querySelector("img");
+    let imgTag      = null;
     let inputTag    = elm.querySelector("input");
+
+    if (isVideo) {
+        contnrTag.style = "background-image: url('" + imgSrc + "')";
+        inputTag.className = "videoInputField";
+    } else {
+        imgTag      = elm.querySelector("img");
+        imgTag.src  = imgSrc;
+        imgTag.alt  = fileName;
+    }
+
     contnrTag.title = fileName;
-    imgTag.src      = imgSrc;
-    imgTag.alt      = fileName;
     inputTag.value  = fileName;
-    inputTag.addEventListener("focusout", disableEdits);
+    inputTag.addEventListener("focusout", function (eve) {
+        disableEdits(eve.target);
+    });
     insertArea.appendChild(elm);
 }