Server : Apache/2.4.6 (CentOS) OpenSSL/1.0.2k-fips PHP/7.4.20 System : Linux st2.domain.com 3.10.0-1127.10.1.el7.x86_64 #1 SMP Wed Jun 3 14:28:03 UTC 2020 x86_64 User : apache ( 48) PHP Version : 7.4.20 Disable Function : NONE Directory : /var/www/html/netphim/layout/default/node_modules/artplayer/src/plugins/ |
import { setStyle, addClass, removeClass, hasClass } from '../utils';
export default function autoOrientation(art) {
const {
constructor,
template: { $player, $video },
} = art;
art.on('fullscreenWeb', (state) => {
if (state) {
const { videoWidth, videoHeight } = $video;
const { clientWidth: viewWidth, clientHeight: viewHeight } = document.documentElement;
if (
(videoWidth > videoHeight && viewWidth < viewHeight) ||
(videoWidth < videoHeight && viewWidth > viewHeight)
) {
// There is a conflict with the fullscreen event, and it is changed to asynchronous execution
setTimeout(() => {
setStyle($player, 'width', `${viewHeight}px`);
setStyle($player, 'height', `${viewWidth}px`);
setStyle($player, 'transform-origin', '0 0');
setStyle($player, 'transform', `rotate(90deg) translate(0, -${viewWidth}px)`);
addClass($player, 'art-auto-orientation');
art.isRotate = true;
art.emit('resize');
}, constructor.AUTO_ORIENTATION_TIME);
}
} else {
if (hasClass($player, 'art-auto-orientation')) {
removeClass($player, 'art-auto-orientation');
art.isRotate = false;
art.emit('resize');
}
}
});
art.on('fullscreen', async (state) => {
const lastOrientation = screen.orientation.type;
if (state) {
const { videoWidth, videoHeight } = $video;
const { clientWidth: viewWidth, clientHeight: viewHeight } = document.documentElement;
if (
(videoWidth > videoHeight && viewWidth < viewHeight) ||
(videoWidth < videoHeight && viewWidth > viewHeight)
) {
const oppositeOrientation = lastOrientation.startsWith('portrait') ? 'landscape' : 'portrait';
await screen.orientation.lock(oppositeOrientation);
addClass($player, 'art-auto-orientation-fullscreen');
}
} else {
if (hasClass($player, 'art-auto-orientation-fullscreen')) {
await screen.orientation.lock(lastOrientation);
removeClass($player, 'art-auto-orientation-fullscreen');
}
}
});
return {
name: 'autoOrientation',
get state() {
return hasClass($player, 'art-auto-orientation');
},
};
}