diff --git a/public/app.js b/public/app.js index 6bbefb3..7ac1e7f 100644 --- a/public/app.js +++ b/public/app.js @@ -9,6 +9,7 @@ new Vue({ videoSrc: null, isDownloading: false, controlsTimeout: null, + menuVisible: false, }, methods: { next: function () { @@ -107,6 +108,7 @@ new Vue({ } }, toggleMenu: function () { + this.menuVisible = !this.menuVisible; if (document.querySelector('.fullScreenMenu').style.display === "none") { document.querySelector('.fullScreenMenu').style.display = ""; this.animateCSS('.fullScreenMenu', 'rotateIn'); @@ -137,9 +139,14 @@ new Vue({ node.addEventListener('animationend', handleAnimationEnd); }) }, - interfaceClick: function () { + interfaceClick: function (time = 5000) { clearTimeout(this.controlsTimeout) - this.controlsTimeout = setTimeout(() => this.toggleControls(), 5000); + this.controlsTimeout = setTimeout(() => this.toggleControls(), time); + }, + moveToBlacklist: function (file) { + const index = this.files.findIndex(f => f.filename === file.filename); + this.files.splice(index, 1); + // TODO add file to blacklist } }, mounted() { diff --git a/public/index.css b/public/index.css index ea5dd2d..e9980b9 100644 --- a/public/index.css +++ b/public/index.css @@ -139,3 +139,28 @@ body { top: 10px; right: 10px; } + +#app .fullScreenMenu .container { + width: 60vw; + margin: 0 auto; + overflow: hidden scroll; +} + +#app .fullScreenMenu .container ul { + list-style-type: none; + width: 80%; +} + +#app .fullScreenMenu .container li { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 10px; + margin-bottom: 10px; +} + +#app .fullScreenMenu .container img, #app .fullScreenMenu .container video { + height: 40px; + width: auto; + margin: 0; +} diff --git a/public/index.html b/public/index.html index b04847d..a6b3889 100644 --- a/public/index.html +++ b/public/index.html @@ -35,12 +35,28 @@