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); }