wires/hypnagaga
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #85 from reuters-graphics/video-controls-middle

Browse source 
Added option of center for controlsPosition prop of Video
This commit is contained in:
Jon McClure 2023-06-21 12:01:47 +01:00 committed by GitHub
commit 85f23e7bbb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/Video/Controls.svelte
View file

@ -20,8 +20,8 @@
paused = !paused; paused = !paused;
clickedOnPauseBtn = paused === true; // so video doesn't autoplay when coming into view again if paused previously clickedOnPauseBtn = paused === true; // so video doesn't autoplay when coming into view again if paused previously
dispatch('pausePlayEvent', { dispatch('pausePlayEvent', {
paused: paused, paused,
clickedOnPauseBtn: clickedOnPauseBtn, clickedOnPauseBtn,
}); });
} }
</script> </script>
@ -32,9 +32,14 @@
opacity: {controlsOpacity}; opacity: {controlsOpacity};
top: {controlsPosition === 'top left' || controlsPosition === 'top right' top: {controlsPosition === 'top left' || controlsPosition === 'top right'
? `${10}px` ? `${10}px`
: controlsPosition === 'center'
? `${(heightVideoContainer - controlsBorderOffset) / 2}px`
: `${heightVideoContainer - controlsBorderOffset}px`}; : `${heightVideoContainer - controlsBorderOffset}px`};
left: {controlsPosition === 'top left' || controlsPosition === 'bottom left' left: {controlsPosition === 'top left' || controlsPosition === 'bottom left'
? `${10}px` ? `${10}px`
: controlsPosition === 'center'
? `${(widthVideoContainer - controlsBorderOffset) / 2}px`
: `${widthVideoContainer - controlsBorderOffset}px`}; : `${widthVideoContainer - controlsBorderOffset}px`};
" "
> >

2
src/components/Video/stories/docs/controls.md
View file

@ -12,7 +12,7 @@ If you do want to leave the controls, you have a couple of options to style them
- Set `controlsColour` to a colour of your choosing. - Set `controlsColour` to a colour of your choosing.
- Set `controlsOpacity` to a value between `0` and `1` to control the opacity. The default is `0.5`. - Set `controlsOpacity` to a value between `0` and `1` to control the opacity. The default is `0.5`.
- Change the placement of the controls to one of: `top right`, `top left`, `bottom right`, `bottom left` by setting `controlsPosition`. - Change the placement of the controls to one of: `top right`, `top left`, `bottom right`, `bottom left`, `center` by setting `controlsPosition`.
- Change the play button to a replay button at the end of the video with the option `separateReplayIcon={true}`. - Change the play button to a replay button at the end of the video with the option `separateReplayIcon={true}`.
Here is an example with bottom right corner white opaque controls, with a replay button, where you have to hover on the video to see the controls. Here is an example with bottom right corner white opaque controls, with a replay button, where you have to hover on the video to see the controls.