[ui] video viewer improvements
fix layout before thumb loads fix vertical overflow don't start video on thumb click
This commit is contained in:
parent
6fdc3e2f48
commit
eb618e0ccd
1 changed files with 27 additions and 6 deletions
|
@ -17,7 +17,7 @@
|
|||
let videoEl: HTMLVideoElement;
|
||||
|
||||
const seek = throttle((progress: number) => {
|
||||
if (state === State.PREVIEWING) {
|
||||
if (state === State.PREVIEWING && videoEl.duration) {
|
||||
videoEl.currentTime = videoEl.duration * progress;
|
||||
}
|
||||
}, 100);
|
||||
|
@ -39,9 +39,11 @@
|
|||
}
|
||||
|
||||
function startPlaying() {
|
||||
if (detail) {
|
||||
state = State.PLAYING;
|
||||
videoEl.play();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="video-viewer {state}">
|
||||
|
@ -49,6 +51,7 @@
|
|||
<Spinner />
|
||||
|
||||
<img
|
||||
class="thumb"
|
||||
src="api/thumb/{address}"
|
||||
alt={address}
|
||||
on:load={() => (state = State.PREVIEW)}
|
||||
|
@ -78,11 +81,23 @@
|
|||
|
||||
<style lang="scss">
|
||||
.video-viewer {
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
|
||||
&,
|
||||
.player {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%;
|
||||
max-height: 100%;
|
||||
min-height: 0;
|
||||
|
||||
background: rgba(128, 128, 128, 128);
|
||||
// background: rgba(128, 128, 128, 128);
|
||||
|
||||
transition: filter 0.2s;
|
||||
}
|
||||
|
@ -107,10 +122,10 @@
|
|||
line-height: 1;
|
||||
|
||||
border-radius: calc($size / 4);
|
||||
border: .07em solid white;
|
||||
border: 0.07em solid white;
|
||||
|
||||
.icon {
|
||||
margin-left: .04em;
|
||||
margin-left: 0.04em;
|
||||
}
|
||||
|
||||
opacity: 0;
|
||||
|
@ -128,6 +143,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.loading img {
|
||||
min-width: 640px;
|
||||
min-height: 480px;
|
||||
background: gray;
|
||||
}
|
||||
|
||||
&.previewing video {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue