Gallery improvements, better layout and autoplay of next media file.
This commit is contained in:
parent
a9d713dbd0
commit
102a970174
|
|
@ -118,7 +118,6 @@ defineExpose({
|
|||
// Wrapping either end, just land outside the list
|
||||
if (Math.abs(d) >= N || Math.sign(d) !== Math.sign(moveto - index)) moveto = N
|
||||
}
|
||||
console.log("Gallery cursorMove", d, index, moveto, moveto - index)
|
||||
store.cursor = docs[moveto]?.key ?? ''
|
||||
const tr = store.cursor ? document.getElementById(`file-${store.cursor}`) : ''
|
||||
if (select) {
|
||||
|
|
|
|||
|
|
@ -3,20 +3,17 @@
|
|||
:class="{ file: !doc.dir, folder: doc.dir, cursor: store.cursor === doc.key }"
|
||||
@contextmenu.stop
|
||||
@focus.stop="store.cursor = doc.key"
|
||||
@click="ev => {
|
||||
if (m!.play()) ev.preventDefault()
|
||||
store.cursor = doc.key
|
||||
}"
|
||||
@click=onclick
|
||||
>
|
||||
<figure>
|
||||
<slot></slot>
|
||||
<MediaPreview ref=m :doc="doc" tabindex=-1 quality="sz=512" />
|
||||
<caption>
|
||||
<label>
|
||||
<MediaPreview ref=m :doc="doc" tabindex=-1 quality="sz=512" class="figcontent" />
|
||||
<div class="titlespacer"></div>
|
||||
<figcaption>
|
||||
<SelectBox :doc=doc />
|
||||
<span :title="doc.name + '\n' + doc.modified + '\n' + doc.sizedisp">{{ doc.name }}</span>
|
||||
</label>
|
||||
</caption>
|
||||
<div class=namespacer></div>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</a>
|
||||
</template>
|
||||
|
|
@ -33,10 +30,15 @@ const props = defineProps<{
|
|||
index: number
|
||||
}>()
|
||||
const m = ref<typeof MediaPreview | null>(null)
|
||||
|
||||
const onclick = (ev: Event) => {
|
||||
if (m.value!.play()) ev.preventDefault()
|
||||
store.cursor = props.doc.key
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.gallery figure {
|
||||
figure {
|
||||
max-height: 15em;
|
||||
position: relative;
|
||||
border-radius: .5em;
|
||||
|
|
@ -48,51 +50,48 @@ const m = ref<typeof MediaPreview | null>(null)
|
|||
justify-content: end;
|
||||
overflow: hidden;
|
||||
}
|
||||
.icon {
|
||||
justify-self: end;
|
||||
figure > article {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
figure caption {
|
||||
font-weight: 600;
|
||||
color: var(--text-color);
|
||||
text-shadow: 0 0 .2em var(--primary-background), 0 0 .2em var(--primary-background);
|
||||
.titlespacer {
|
||||
flex-shrink: 100000;
|
||||
width: 100%;
|
||||
height: 2em;
|
||||
}
|
||||
.cursor caption {
|
||||
background: var(--accent-color);
|
||||
text-shadow: none;
|
||||
}
|
||||
caption {
|
||||
figcaption {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
caption label {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
label span {
|
||||
flex: 1 1;
|
||||
margin-right: 2em;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
label input[type='checkbox'] {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
figcaption input[type='checkbox'] {
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin: .25em;
|
||||
opacity: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
label input[type='checkbox']:checked {
|
||||
figcaption input[type='checkbox']:checked, figcaption input[type='checkbox']:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
figcaption span {
|
||||
padding: .5em;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 0 .2em #000, 0 0 .2em #000;
|
||||
text-wrap: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.cursor figcaption span {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
figcaption .namespacer {
|
||||
flex-shrink: 100000;
|
||||
height: 2em;
|
||||
width: 2em;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@
|
|||
<img v-if=preview() :src="`${doc.previewurl}?${quality}&t=${doc.mtime}`" alt="">
|
||||
<img v-else-if=doc.img :src=doc.url alt="">
|
||||
<span v-else-if=doc.dir class="folder icon"></span>
|
||||
<video ref=vid v-else-if=video() :src=doc.url :poster="`${doc.previewurl}?${quality}&t=${doc.mtime}`" controls preload=none @click.prevent>🎞️</video>
|
||||
<audio ref=aud v-else-if=audio() :src=doc.url controls preload=metadata @click.stop>🔈</audio>
|
||||
<video ref=vid v-else-if=video() :src=doc.url :poster=poster preload=none @play=onplay @pause=onpaused @ended=next @seeking=media!.play()></video>
|
||||
<div v-else-if=audio() class="audio icon">
|
||||
<audio ref=aud :src=doc.url class=icon preload=none @play=onplay @pause=onpaused @ended=next @seeking=media!.play()></audio>
|
||||
</div>
|
||||
<span v-else-if=archive() class="archive icon"></span>
|
||||
<span v-else class="file icon" :class="`ext-${doc.ext}`"></span>
|
||||
</template>
|
||||
|
|
@ -15,20 +17,83 @@ import type { Doc } from '@/repositories/Document'
|
|||
const aud = ref<HTMLAudioElement | null>(null)
|
||||
const vid = ref<HTMLVideoElement | null>(null)
|
||||
const media = computed(() => aud.value || vid.value)
|
||||
const poster = computed(() => `${props.doc.previewurl}?${props.quality}&t=${props.doc.mtime}`)
|
||||
const props = defineProps<{
|
||||
doc: Doc
|
||||
quality: string
|
||||
}>()
|
||||
|
||||
const onplay = () => {
|
||||
if (!media.value) return
|
||||
media.value.controls = true
|
||||
media.value.setAttribute('data-playing', '')
|
||||
}
|
||||
const onpaused = () => {
|
||||
if (!media.value) return
|
||||
media.value.controls = false
|
||||
media.value.removeAttribute('data-playing')
|
||||
}
|
||||
let fscurrent: HTMLVideoElement | null = null
|
||||
const next = () => {
|
||||
if (!media.value) return
|
||||
media.value.load() // Restore poster
|
||||
const medias = Array.from(document.querySelectorAll('video, audio')) as (HTMLAudioElement | HTMLVideoElement)[]
|
||||
if (medias.length === 0) return
|
||||
let el: HTMLAudioElement | HTMLVideoElement | null = null
|
||||
for (const i in medias) {
|
||||
if (medias[i] === (fscurrent || media.value)) {
|
||||
el = medias[+i + 1] || medias[0]
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!el) return
|
||||
if (el.tagName === "VIDEO" && document.fullscreenElement === media.value) {
|
||||
// Fullscreen needs to use the current video element for the next video
|
||||
// because we are not allowed to fullscreen the next one.
|
||||
// FIXME: Write our own player to avoid this problem...
|
||||
const elem = media.value as HTMLVideoElement
|
||||
const playing = el as HTMLVideoElement
|
||||
if (elem === playing) {
|
||||
playing.play() // Only one video, just replay
|
||||
return
|
||||
}
|
||||
if (!fscurrent) {
|
||||
elem.addEventListener('fullscreenchange', ev => {
|
||||
if (!fscurrent) return
|
||||
// Restore the original video element and continue with the one that was playing
|
||||
fscurrent.currentTime = elem.currentTime
|
||||
fscurrent.click()
|
||||
if (!elem.paused) fscurrent.play()
|
||||
fscurrent = null
|
||||
elem.src = props.doc.url
|
||||
elem.poster = poster.value
|
||||
onpaused()
|
||||
}, {once: true})
|
||||
}
|
||||
fscurrent = playing
|
||||
elem.src = playing.src
|
||||
elem.poster = ''
|
||||
elem.play()
|
||||
} else {
|
||||
document.exitFullscreen()
|
||||
el.click()
|
||||
}
|
||||
}
|
||||
defineExpose({
|
||||
play() {
|
||||
if (media.value) {
|
||||
if (media.value.paused) media.value.play()
|
||||
else media.value.pause()
|
||||
return true
|
||||
if (!media.value) return false
|
||||
if (media.value.paused) {
|
||||
media.value.play()
|
||||
for (const el of Array.from(document.querySelectorAll('video, audio')) as (HTMLAudioElement | HTMLVideoElement)[]) {
|
||||
if (el === media.value) continue
|
||||
el.pause()
|
||||
}
|
||||
return false
|
||||
} else {
|
||||
media.value.pause()
|
||||
}
|
||||
return true
|
||||
},
|
||||
media,
|
||||
})
|
||||
|
||||
|
||||
|
|
@ -44,20 +109,12 @@ const preview = () => (
|
|||
|
||||
<style scoped>
|
||||
img, embed, .icon, audio, video {
|
||||
font-size: 10em;
|
||||
font-size: 8em;
|
||||
overflow: hidden;
|
||||
min-width: 50%;
|
||||
max-width: 100%;
|
||||
min-height: 50%;
|
||||
max-height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: .05em;
|
||||
}
|
||||
img {
|
||||
justify-self: start;
|
||||
}
|
||||
audio, video {
|
||||
padding-bottom: 2rem;
|
||||
border-radius: calc(.5em / 8);
|
||||
}
|
||||
.folder::before {
|
||||
content: '📁';
|
||||
|
|
@ -80,6 +137,22 @@ audio, video {
|
|||
.ext-torrent::before {
|
||||
content: '🏴☠️';
|
||||
}
|
||||
.audio audio {
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-time) ease-in-out;
|
||||
}
|
||||
.audio:hover audio {
|
||||
opacity: 1;
|
||||
}
|
||||
.audio.icon::before {
|
||||
width: 100%;
|
||||
content: '🔈';
|
||||
}
|
||||
.audio.icon:has(audio[data-playing])::before {
|
||||
position: absolute;
|
||||
content: '🔊';
|
||||
bottom: 0;
|
||||
}
|
||||
.icon {
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
|
@ -87,7 +160,7 @@ figure.cursor .icon {
|
|||
filter: brightness(1);
|
||||
}
|
||||
img::before, video::before {
|
||||
/* broken image */
|
||||
/* broken media */
|
||||
background: #888;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<input type=checkbox tabindex=-1 :checked="store.selected.has(doc.key)"
|
||||
<input type=checkbox tabindex=-1 :checked="store.selected.has(doc.key)" @click.stop
|
||||
@change="ev => {
|
||||
if ((ev.target as HTMLInputElement).checked) {
|
||||
store.selected.add(doc.key)
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ watchEffect(() => {
|
|||
justify-content: center;
|
||||
height: 100%;
|
||||
font-size: 2rem;
|
||||
text-shadow: 0 0 1rem #000, 0 0 2rem #000;
|
||||
text-shadow: 0 0 .3rem #000, 0 0 2rem #0008;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
@keyframes rotate {
|
||||
|
|
@ -118,6 +118,6 @@ svg.cog {
|
|||
margin: 0 auto;
|
||||
animation: rotate 10s linear infinite;
|
||||
filter: drop-shadow(0 0 1rem black);
|
||||
fill: var(--primary-color);
|
||||
fill: #888;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user