Add play button on pause ios #6975
2 changed files with 16 additions and 6 deletions
|
@ -59,6 +59,7 @@ type Props = {
|
||||||
userId: ?number,
|
userId: ?number,
|
||||||
// allowPreRoll: ?boolean,
|
// allowPreRoll: ?boolean,
|
||||||
shareTelemetry: boolean,
|
shareTelemetry: boolean,
|
||||||
|
showAutoplayCountdown: boolean
|
||||||
};
|
};
|
||||||
|
|
||||||
// type VideoJSOptions = {
|
// type VideoJSOptions = {
|
||||||
|
@ -198,6 +199,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
userId,
|
userId,
|
||||||
// allowPreRoll,
|
// allowPreRoll,
|
||||||
shareTelemetry,
|
shareTelemetry,
|
||||||
|
showAutoplayCountdown,
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
const [reload, setReload] = useState('initial');
|
const [reload, setReload] = useState('initial');
|
||||||
|
@ -560,10 +562,11 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
player.on('error', onError);
|
player.on('error', onError);
|
||||||
player.on('ended', onEnded);
|
player.on('ended', onEnded);
|
||||||
|
|
||||||
// on ios, center the play button when paused
|
// on ios, show a play button when paused
|
||||||
player.on('pause', function() {
|
if (IS_IOS) {
|
||||||
if (IS_IOS) {
|
const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
|
||||||
const playBT = document.getElementsByClassName('vjs-big-play-button')[0];
|
|
||||||
|
player.on('pause', function() {
|
||||||
const videoDiv = player.children_[0];
|
const videoDiv = player.children_[0];
|
||||||
const controlBar = document.getElementsByClassName('vjs-control-bar')[0];
|
const controlBar = document.getElementsByClassName('vjs-control-bar')[0];
|
||||||
const leftWidth = ((videoDiv.offsetWidth - playBT.offsetWidth) / 2) + 'px';
|
const leftWidth = ((videoDiv.offsetWidth - playBT.offsetWidth) / 2) + 'px';
|
||||||
|
@ -573,8 +576,14 @@ export default React.memo<Props>(function VideoJs(props: Props) {
|
||||||
playBT.style.top = topHeight;
|
playBT.style.top = topHeight;
|
||||||
playBT.style.left = leftWidth;
|
playBT.style.left = leftWidth;
|
||||||
playBT.style.margin = 0;
|
playBT.style.margin = 0;
|
||||||
}
|
});
|
||||||
});
|
|
||||||
|
player.on('ended', function() {
|
||||||
|
if (showAutoplayCountdown) {
|
||||||
|
playBT.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Replace volume bar with custom LBRY volume bar
|
// Replace volume bar with custom LBRY volume bar
|
||||||
LbryVolumeBarClass.replaceExisting(player);
|
LbryVolumeBarClass.replaceExisting(player);
|
||||||
|
|
|
@ -336,6 +336,7 @@ function VideoViewer(props: Props) {
|
||||||
userId={userId}
|
userId={userId}
|
||||||
allowPreRoll={!embedded && !authenticated}
|
allowPreRoll={!embedded && !authenticated}
|
||||||
shareTelemetry={shareTelemetry}
|
shareTelemetry={shareTelemetry}
|
||||||
|
showAutoplayCountdown={autoplaySetting}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue