diff --git a/index.html b/index.html
index cb41fd5..a8200e9 100644
--- a/index.html
+++ b/index.html
@@ -72,8 +72,7 @@
-
-
+
diff --git a/resources/css/main.css b/resources/css/main.css
index f840a5b..51168ed 100644
--- a/resources/css/main.css
+++ b/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;
}
diff --git a/resources/js/uiActions.js b/resources/js/uiActions.js
index 25d1f94..3936950 100644
--- a/resources/js/uiActions.js
+++ b/resources/js/uiActions.js
@@ -39,13 +39,11 @@ const enableEdit = (obj) => {
formerFileName = obj.value;
}
-const disableEdits = () => {
- // this references the passed object from
- // addEventListener than us passing it
- this.style.backgroundColor = "#ffffff00";
- this.style.color = '#ffffff';
- this.value = formerFileName;
- this.readOnly = "true";
+const disableEdits = (elm) => {
+ elm.style.backgroundColor = "";
+ elm.style.color = '';
+ elm.value = formerFileName;
+ elm.readOnly = "true";
}
const showMedia = async (mediaLoc, type) => {
diff --git a/resources/js/uiEvents.js b/resources/js/uiEvents.js
index e0b38dc..0801259 100644
--- a/resources/js/uiEvents.js
+++ b/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;
diff --git a/resources/js/xmlParser.js b/resources/js/xmlParser.js
index f611180..8c9d8d2 100644
--- a/resources/js/xmlParser.js
+++ b/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);
}