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