RPJosh
/
memories
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix folder loading

pull/37/head
Varun Patil 2022-09-12 02:28:37 -07:00
parent b28bb84cde
commit 475f02505c
3 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
js/memories-main.js
View File

File diff suppressed because one or more lines are too long

2
js/memories-main.js.map
View File

File diff suppressed because one or more lines are too long

32
src/components/Folder.vue
View File

@ -17,15 +17,24 @@
</div> </div>
<div class="previews"> <div class="previews">
<img v-for="info of previewFileInfos" <div class="img-outer" v-for="info of previewFileInfos">
<img
:key="'fpreview-' + info.fileid" :key="'fpreview-' + info.fileid"
:src="getPreviewUrl(info.fileid, info.etag)" /> :src="getPreviewUrl(info.fileid, info.etag)"
:class="{
'p-loading': !(info.flag & c.FLAG_LOADED),
'p-load-fail': info.flag & c.FLAG_LOAD_FAIL,
}"
@load="info.flag |= c.FLAG_LOADED"
@error="info.flag |= c.FLAG_LOAD_FAIL" />
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import * as dav from "../services/DavRequests"; import * as dav from "../services/DavRequests";
import constants from "../mixins/constants"
import { getPreviewUrl } from "../services/FileUtils"; import { getPreviewUrl } from "../services/FileUtils";
export default { export default {
@ -42,6 +51,7 @@ export default {
}, },
data() { data() {
return { return {
c: constants,
previewFileInfos: [], previewFileInfos: [],
} }
}, },
@ -65,6 +75,7 @@ export default {
const folderPath = this.data.path.split('/').slice(3).join('/'); const folderPath = this.data.path.split('/').slice(3).join('/');
dav.getFolderPreviewFileIds(folderPath, 4).then(fileInfos => { dav.getFolderPreviewFileIds(folderPath, 4).then(fileInfos => {
fileInfos = fileInfos.filter(f => f.hasPreview); fileInfos = fileInfos.filter(f => f.hasPreview);
fileInfos.forEach(f => f.flag = 0);
if (fileInfos.length > 0 && fileInfos.length < 4) { if (fileInfos.length > 0 && fileInfos.length < 4) {
fileInfos = [fileInfos[0]]; fileInfos = [fileInfos[0]];
} }
@ -135,14 +146,27 @@ export default {
width: calc(100% - 4px); width: calc(100% - 4px);
top: 2px; left: 2px; top: 2px; left: 2px;
img { .img-outer {
background-color: var(--color-loading-light);
padding: 0; padding: 0;
margin: 0;
width: 50%; width: 50%;
height: 50%; height: 50%;
display: inline-block; display: inline-block;
transition: filter 0.2s ease-in-out; }
img {
padding: 0;
width: 100%;
height: 100%;
filter: brightness(50%); filter: brightness(50%);
opacity: 1;
transition: opacity 0.3s ease, filter 0.2s ease-in-out;
will-change: opacity, filter;
&.p-loading { opacity: 0; }
&.p-load-fail { display: none; }
.folder:hover & { .folder:hover & {
filter: brightness(100%); filter: brightness(100%);
} }