Added to program button on vids.

index.html

@@ -71,7 +71,8 @@
         </div>
     </template>
     <template id="vidTemplate">
-        <span id="movieID" class="movieStyle" tabindex="1">
+        <span id="movieID" class="movieStyle" tabindex="1" style="background-image: url('')">
+            <div class="popOutBttnInner" title="Open In Local Program">&#8765;</div>
             <input id="titleID" class="movieTitle" type="text" value="" readonly="true" />
         </span>
     </template>

resources/css/main.css

@@ -175,8 +175,8 @@
     width: 100%;
     bottom: 0.64em;
     left: 0em;
-	background-color: rgba(0, 0, 0, 0.64);
-	color: rgb(255, 255, 255);
+    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);
@@ -246,6 +246,19 @@
     border-color: rgb(255,255,255);
 }
 
+.popOutBttnInner {
+    float: right;
+    z-index: 2;
+    width: 2em;
+    height: 2em;
+    text-align: center;
+    background-color: rgba(0,0,0, 0.85);
+    color: rgb(255,255,255);
+    border-style:solid;
+    border-color: rgb(255,255,255);
+}
+
+
 .completionBar {
     float:left;
     clear:left;
@@ -257,11 +270,14 @@
 .dirTitle:hover,
 .iconImg:hover,
 .closeBttn:hover,
+.popOutBttnInner:hover,
 .popOutBttn:hover {
     cursor: pointer;
 }
 
-.closeBttn:hover, .popOutBttn:hover {
+.popOutBttnInner:hover,
+.popOutBttn:hover,
+.closeBttn:hover {
     background-color: rgba(255,255,255, 0.85);
     color: #000000;
     border-color: #000000;

resources/js/uiActions.js

@@ -11,7 +11,7 @@ const tgglElmView = (id) => {
 
 const searchPage = (elm) => {
     let query = elm.value.toLowerCase();
-    let list  = document.getElementById("dynDiv").childNodes;
+    let list  = document.getElementById("dynDiv").querySelectorAll("[title]");
     let size  = list.length;
 
     for (var i = 0; i < size; i++) {
@@ -24,7 +24,7 @@ const searchPage = (elm) => {
 }
 
 const clearSearch = () => {
-    let list = document.getElementById("dynDiv").childNodes;
+    let list = document.getElementById("dynDiv").querySelectorAll("[title]");
     let size = list.length;
 
     for (var i = 0; i < size; i++) {

resources/js/xmlParser.js

@@ -149,6 +149,11 @@ const createElmBlock = (elm, imgSrc, fileName, isVideo = null) => {
     if (isVideo) {
         contnrTag.style = "background-image: url('" + imgSrc + "')";
         inputTag.className = "videoInputField";
+        let path         = document.getElementById("path").innerHTML;
+        let fullMedia    = path + fileName;
+        elm.querySelector("div").addEventListener("click", function (eve) {
+            openInLocalProg(fullMedia);
+        });
     } else {
         imgTag      = elm.querySelector("img");
         imgTag.src  = imgSrc;