[A] hide controls, animate.css, loadData interval
This commit is contained in:
parent
772279751f
commit
2a938fb248
5 changed files with 165 additions and 47 deletions
35
index.js
35
index.js
|
|
@ -25,26 +25,39 @@ async function listDir(dir = process.env.WEBFRAME_PATH) {
|
|||
return directoryItems;
|
||||
}
|
||||
|
||||
function dlFile(file, dir = process.env.WEBFRAME_PATH) {
|
||||
return client.createReadStream(dir+'/'+file).pipe(fs.createWriteStream('./files/'+file));
|
||||
async function dlFile(file, dir = process.env.WEBFRAME_PATH) {
|
||||
const isDirExists = fs.existsSync(dir) && fs.lstatSync(dir).isDirectory();
|
||||
if (!isDirExists) {
|
||||
fs.mkdirSync(dir, { recursive: true });
|
||||
console.log('Created dir:', dir);
|
||||
}
|
||||
// return client.createReadStream(dir+'/'+file).pipe(fs.createWriteStream('./files/'+file));
|
||||
return client.getFileContents(dir+'/'+file);
|
||||
}
|
||||
|
||||
function loadImages() {
|
||||
client.exists(process.env.WEBFRAME_PATH).then(async data => {
|
||||
async function loadImages() {
|
||||
try {
|
||||
const data = await client.exists(process.env.WEBFRAME_PATH);
|
||||
if (data) {
|
||||
const list = await listDir(process.env.WEBFRAME_PATH);
|
||||
list.forEach(file => {
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const file = list[i];
|
||||
const path = './files/'
|
||||
const inDb = db.get('files').find({ basename: file.basename }).value() !== undefined ? true : false;
|
||||
if (!inDb) {
|
||||
const blob = await dlFile(file.basename);
|
||||
console.log('Downloaded new File:', file.basename);
|
||||
dlFile(file.basename);
|
||||
db.get('files').push(file).write();
|
||||
db.update('count', n => n + 1).write();
|
||||
fs.writeFile(path+file.basename, blob, () => {
|
||||
db.get('files').push(file).write();
|
||||
db.update('count', n => n + 1).write();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}).catch(e => console.error('Path', process.env.WEBFRAME_PATH, 'not found.'));
|
||||
setTimeout(() => loadImages(), process.env.POLL_TIMEOUT);
|
||||
setTimeout(() => loadImages(), process.env.POLL_TIMEOUT);
|
||||
} catch (e) {
|
||||
console.error('[loadImages]', e);
|
||||
}
|
||||
}
|
||||
|
||||
loadImages();
|
||||
|
|
|
|||
9
public/animate.min.css
vendored
Normal file
9
public/animate.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -7,6 +7,8 @@ new Vue({
|
|||
carouselTimeout: 20000,
|
||||
carouselActive: true,
|
||||
videoSrc: null,
|
||||
isDownloading: false,
|
||||
controlsTimeout: null,
|
||||
},
|
||||
methods: {
|
||||
next: function () {
|
||||
|
|
@ -15,13 +17,7 @@ new Vue({
|
|||
} else {
|
||||
this.index = 0;
|
||||
}
|
||||
// force video src reload
|
||||
this.videoSrc = null;
|
||||
setTimeout(() => {
|
||||
if (this.files[this.index].mime.includes('video')) {
|
||||
this.videoSrc = '/files/'+this.files[this.index].basename;
|
||||
}
|
||||
}, 100)
|
||||
this.refreshVideoSrc();
|
||||
},
|
||||
nextClick: function () {
|
||||
this.next();
|
||||
|
|
@ -33,24 +29,34 @@ new Vue({
|
|||
} else {
|
||||
this.index = this.files.length - 1;
|
||||
}
|
||||
// force video src reload
|
||||
setTimeout(() => {
|
||||
if (this.files[this.index].mime.includes('video')) {
|
||||
this.videoSrc = '/files/'+this.files[this.index].basename;
|
||||
}
|
||||
}, 100)
|
||||
this.refreshVideoSrc();
|
||||
},
|
||||
prevClick: function () {
|
||||
this.next();
|
||||
this.startCarousel();
|
||||
},
|
||||
loadData: function () {
|
||||
fetch('api/files').then(response => response.json()).then(
|
||||
this.isDownloading = true;
|
||||
const prom = fetch('api/files').then(response => response.json());
|
||||
prom.then(
|
||||
data => {
|
||||
this.files = data.resource;
|
||||
this.files = data.resource || [];
|
||||
this.startCarousel();
|
||||
this.refreshVideoSrc();
|
||||
this.isDownloading = false;
|
||||
setTimeout(() => this.loadData(), (this.files.length*this.carouselTimeout)+1000);
|
||||
}
|
||||
)
|
||||
);
|
||||
return prom;
|
||||
},
|
||||
refreshVideoSrc: function () {
|
||||
// force video src reload
|
||||
this.videoSrc = null;
|
||||
setTimeout(() => {
|
||||
if (this.files[this.index].mime.includes('video')) {
|
||||
this.videoSrc = '/files/'+this.files[this.index].basename;
|
||||
}
|
||||
}, 100);
|
||||
},
|
||||
startCarousel: function (time = this.carouselTimeout) {
|
||||
this.carouselActive = true;
|
||||
|
|
@ -67,9 +73,53 @@ new Vue({
|
|||
} else {
|
||||
this.startCarousel();
|
||||
}
|
||||
},
|
||||
toggleControls: function () {
|
||||
clearTimeout(this.controlsTimeout)
|
||||
if (document.querySelector('.controls').style.display === "none") {
|
||||
document.querySelector('.controls').style.display = "";
|
||||
this.animateCSS('.floatBtn.left', 'fadeInLeft');
|
||||
this.animateCSS('.floatBtn.right', 'fadeInRight');
|
||||
this.animateCSS('.floatBtn.bottom', 'fadeInUp');
|
||||
this.controlsTimeout = setTimeout(() => this.toggleControls(), 15000);
|
||||
} else {
|
||||
Promise.all([
|
||||
this.animateCSS('.floatBtn.left', 'fadeOutLeft'),
|
||||
this.animateCSS('.floatBtn.right', 'fadeOutRight'),
|
||||
this.animateCSS('.floatBtn.bottom', 'fadeOutDown')
|
||||
]).then(data => {
|
||||
document.querySelector('.controls').style.display = "none"
|
||||
});
|
||||
}
|
||||
},
|
||||
animateCSS: function (element, animation, prefix = 'animate__') {
|
||||
// We create a Promise and return it
|
||||
return new Promise((resolve, reject) => {
|
||||
const animationName = `${prefix}${animation}`;
|
||||
const node = document.querySelector(element);
|
||||
|
||||
node.classList.add(`${prefix}animated`, animationName);
|
||||
|
||||
// When the animation ends, we clean the classes and resolve the Promise
|
||||
function handleAnimationEnd() {
|
||||
node.classList.remove(`${prefix}animated`, animationName);
|
||||
node.removeEventListener('animationend', handleAnimationEnd);
|
||||
|
||||
resolve('Animation ended');
|
||||
}
|
||||
|
||||
node.addEventListener('animationend', handleAnimationEnd);
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.loadData();
|
||||
this.loadData().then(data => {
|
||||
setTimeout(() => {
|
||||
this.animateCSS('.floatBtn.left', 'fadeInLeft');
|
||||
this.animateCSS('.floatBtn.right', 'fadeInRight');
|
||||
this.animateCSS('.floatBtn.bottom', 'fadeInUp');
|
||||
this.controlsTimeout = setTimeout(() => this.toggleControls(), 2500);
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
})
|
||||
|
|
@ -4,13 +4,47 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
#app,
|
||||
#app div {
|
||||
#app {
|
||||
display: flex;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#app .loading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
text-align: center;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#app .touchCanvas,
|
||||
#app .content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#app .controls {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
#app .touchCanvas {
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
#app .content {
|
||||
z-index: 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#app img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
|
@ -21,6 +55,7 @@ body {
|
|||
|
||||
#app video {
|
||||
height: 100vh;
|
||||
max-width: 100vw;
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -32,8 +67,7 @@ body {
|
|||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, .3);
|
||||
color: white;
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 50vh;
|
||||
text-align: center;
|
||||
padding-top: 8px;
|
||||
|
|
@ -49,7 +83,8 @@ body {
|
|||
|
||||
#app .floatBtn.bottom {
|
||||
left: 49%;
|
||||
top: 90%;
|
||||
top: unset;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
#app .empty {
|
||||
|
|
|
|||
|
|
@ -7,28 +7,39 @@
|
|||
<link rel="manifest" href="/manifest.webmanifest">
|
||||
<link rel="stylesheet" type="text/css" href="index.css">
|
||||
<script src="vue.js"></script>
|
||||
<link rel="stylesheet" href="animate.min.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<div v-if="files && files.length > 0">
|
||||
<div class="floatBtn left" v-on:click="prevClick()">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" fill="currentColor"/></svg>
|
||||
<!-- controls -->
|
||||
<div class="controls">
|
||||
<div class="floatBtn left" v-on:click="prevClick()">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M4 12C4 11.4477 4.44772 11 5 11H19C19.5523 11 20 11.4477 20 12C20 12.5523 19.5523 13 19 13H5C4.44772 13 4 12.5523 4 12Z" fill="currentColor"/></svg>
|
||||
</div>
|
||||
<div class="floatBtn right" v-on:click="nextClick()">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z" fill="currentColor"/></svg>
|
||||
</div>
|
||||
<div class="floatBtn bottom" v-on:click="toggleCarousel()">
|
||||
<svg v-if="!carouselActive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 12.3301L9 16.6603L9 8L15 12.3301Z" fill="currentColor"/></svg>
|
||||
<svg v-if="carouselActive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 7H8V17H11V7Z" fill="currentColor"/> <path d="M13 17H16V7H13V17Z" fill="currentColor"/></svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="floatBtn right" v-on:click="nextClick()">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 4C11.4477 4 11 4.44772 11 5V11H5C4.44772 11 4 11.4477 4 12C4 12.5523 4.44772 13 5 13H11V19C11 19.5523 11.4477 20 12 20C12.5523 20 13 19.5523 13 19V13H19C19.5523 13 20 12.5523 20 12C20 11.4477 19.5523 11 19 11H13V5C13 4.44772 12.5523 4 12 4Z" fill="currentColor"/></svg>
|
||||
<!-- touch canvas -->
|
||||
<div class="touchCanvas" v-on:click="toggleControls()"></div>
|
||||
<!-- content -->
|
||||
<div class="content">
|
||||
<img v-if="files[index].mime.includes('image')" v-bind:src="'/files/'+files[index].basename" alt="">
|
||||
<video v-if="videoSrc" autoplay muted loop>
|
||||
<source v-bind:src="videoSrc" v-bind:type="files[index].mime">
|
||||
</video>
|
||||
</div>
|
||||
<div class="floatBtn bottom" v-on:click="toggleCarousel()">
|
||||
<svg v-if="!carouselActive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M15 12.3301L9 16.6603L9 8L15 12.3301Z" fill="currentColor"/></svg>
|
||||
<svg v-if="carouselActive" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M11 7H8V17H11V7Z" fill="currentColor"/> <path d="M13 17H16V7H13V17Z" fill="currentColor"/></svg>
|
||||
</div>
|
||||
<img v-if="files[index].mime.includes('image')" v-bind:src="'/files/'+files[index].basename" alt="">
|
||||
<video v-if="videoSrc" autoplay muted loop>
|
||||
<source v-bind:src="videoSrc" v-bind:type="files[index].mime">
|
||||
</video>
|
||||
</div>
|
||||
<div v-else class="empty">
|
||||
No images
|
||||
<div class="loading" v-else class="empty">
|
||||
<span v-if="!isDownloading">No images.</span>
|
||||
<span v-if="!isDownloading">Downloading images...</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<script src="app.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue