mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-11 13:56:15 -08:00
feat: enhance autoOrientation plugin for better fullscreen handling
- Refactored rotation logic for web fullscreen to use a dedicated function. - Added checks to prevent race conditions when applying rotation. - Improved handling of native fullscreen orientation locking. - Simplified class management for orientation states. - Updated state retrieval to use constants for class names.
This commit is contained in:
Harvey Zack committed
1 parent
f1fcbd75fe
commit
bd071b2d63
4 files changed
+123
-67
No files matched your search
@@ -8,6 +8,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||
|
||||
- 移除 `svg` 默认的 `fill` 颜色值
|
||||
- 优化 `artplayer.d.ts`, 现在可以直接导入 `Option`
|
||||
- 优化 `autoOrientation` 逻辑
|
||||
|
||||
```ts
|
||||
import type { Option } from 'artplayer'
|
||||
|
||||
@@ -4327,47 +4327,73 @@ parcelHelpers.defineInteropFlag(exports);
|
||||
parcelHelpers.export(exports, "default", ()=>autoOrientation);
|
||||
var _utils = require("../utils");
|
||||
function autoOrientation(art) {
|
||||
const { constructor, template: { $player, $video } } = art;
|
||||
const { notice, constructor, template: { $player, $video } } = art;
|
||||
const WEB_CLASS = 'art-auto-orientation';
|
||||
const FS_CLASS = 'art-auto-orientation-fullscreen';
|
||||
let fsLocked = false;
|
||||
function applyWebRotate() {
|
||||
const viewWidth = document.documentElement.clientWidth;
|
||||
const viewHeight = document.documentElement.clientHeight;
|
||||
(0, _utils.setStyle)($player, 'width', `${viewHeight}px`);
|
||||
(0, _utils.setStyle)($player, 'height', `${viewWidth}px`);
|
||||
(0, _utils.setStyle)($player, 'transform-origin', '0 0');
|
||||
(0, _utils.setStyle)($player, 'transform', `rotate(90deg) translate(0, -${viewWidth}px)`);
|
||||
(0, _utils.addClass)($player, WEB_CLASS);
|
||||
art.isRotate = true;
|
||||
art.emit('resize');
|
||||
}
|
||||
function clearWebRotate() {
|
||||
(0, _utils.setStyle)($player, 'width', '');
|
||||
(0, _utils.setStyle)($player, 'height', '');
|
||||
(0, _utils.setStyle)($player, 'transform-origin', '');
|
||||
(0, _utils.setStyle)($player, 'transform', '');
|
||||
(0, _utils.removeClass)($player, WEB_CLASS);
|
||||
art.isRotate = false;
|
||||
art.emit('resize');
|
||||
}
|
||||
function needRotate() {
|
||||
const { videoWidth, videoHeight } = $video;
|
||||
const vw = document.documentElement.clientWidth;
|
||||
const vh = document.documentElement.clientHeight;
|
||||
return videoWidth > videoHeight && vw < vh || videoWidth < videoHeight && vw > vh;
|
||||
}
|
||||
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(()=>{
|
||||
(0, _utils.setStyle)($player, 'width', `${viewHeight}px`);
|
||||
(0, _utils.setStyle)($player, 'height', `${viewWidth}px`);
|
||||
(0, _utils.setStyle)($player, 'transform-origin', '0 0');
|
||||
(0, _utils.setStyle)($player, 'transform', `rotate(90deg) translate(0, -${viewWidth}px)`);
|
||||
(0, _utils.addClass)($player, 'art-auto-orientation');
|
||||
art.isRotate = true;
|
||||
art.emit('resize');
|
||||
}, constructor.AUTO_ORIENTATION_TIME);
|
||||
} else if ((0, _utils.hasClass)($player, 'art-auto-orientation')) {
|
||||
(0, _utils.removeClass)($player, 'art-auto-orientation');
|
||||
art.isRotate = false;
|
||||
art.emit('resize');
|
||||
}
|
||||
if (needRotate()) {
|
||||
const delay = Number(constructor.AUTO_ORIENTATION_TIME ?? 0);
|
||||
setTimeout(()=>{
|
||||
if (art.fullscreenWeb && !(0, _utils.hasClass)($player, WEB_CLASS)) applyWebRotate();
|
||||
}, delay);
|
||||
}
|
||||
} else if ((0, _utils.hasClass)($player, WEB_CLASS)) clearWebRotate();
|
||||
});
|
||||
art.on('fullscreen', async (state)=>{
|
||||
if (!screen?.orientation?.lock) return;
|
||||
const lastOrientation = screen.orientation.type;
|
||||
const canLock = !!screen?.orientation?.lock;
|
||||
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);
|
||||
(0, _utils.addClass)($player, 'art-auto-orientation-fullscreen');
|
||||
if (canLock && needRotate()) try {
|
||||
const last = screen.orientation.type;
|
||||
const opposite = last.startsWith('portrait') ? 'landscape' : 'portrait';
|
||||
await screen.orientation.lock(opposite);
|
||||
fsLocked = true;
|
||||
(0, _utils.addClass)($player, FS_CLASS);
|
||||
} catch (err) {
|
||||
fsLocked = false;
|
||||
notice.show = err;
|
||||
}
|
||||
} else {
|
||||
if ((0, _utils.hasClass)($player, FS_CLASS)) (0, _utils.removeClass)($player, FS_CLASS);
|
||||
if (canLock && fsLocked) {
|
||||
try {
|
||||
screen.orientation.unlock();
|
||||
} catch {}
|
||||
fsLocked = false;
|
||||
}
|
||||
} else if ((0, _utils.hasClass)($player, 'art-auto-orientation-fullscreen')) {
|
||||
await screen.orientation.lock(lastOrientation);
|
||||
(0, _utils.removeClass)($player, 'art-auto-orientation-fullscreen');
|
||||
}
|
||||
});
|
||||
return {
|
||||
name: 'autoOrientation',
|
||||
get state () {
|
||||
return (0, _utils.hasClass)($player, 'art-auto-orientation');
|
||||
return (0, _utils.hasClass)($player, WEB_CLASS);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"mappings":"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 truncated
|
||||
{"mappings":"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 truncated
|
||||
@@ -2,60 +2,89 @@ import { addClass, hasClass, removeClass, setStyle } from '../utils'
|
||||
|
||||
export default function autoOrientation(art) {
|
||||
const {
|
||||
notice,
|
||||
constructor,
|
||||
template: { $player, $video },
|
||||
} = art
|
||||
|
||||
const WEB_CLASS = 'art-auto-orientation'
|
||||
const FS_CLASS = 'art-auto-orientation-fullscreen'
|
||||
let fsLocked = false
|
||||
|
||||
function applyWebRotate() {
|
||||
const viewWidth = document.documentElement.clientWidth
|
||||
const viewHeight = document.documentElement.clientHeight
|
||||
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, WEB_CLASS)
|
||||
art.isRotate = true
|
||||
art.emit('resize')
|
||||
}
|
||||
|
||||
function clearWebRotate() {
|
||||
setStyle($player, 'width', '')
|
||||
setStyle($player, 'height', '')
|
||||
setStyle($player, 'transform-origin', '')
|
||||
setStyle($player, 'transform', '')
|
||||
removeClass($player, WEB_CLASS)
|
||||
art.isRotate = false
|
||||
art.emit('resize')
|
||||
}
|
||||
|
||||
function needRotate() {
|
||||
const { videoWidth, videoHeight } = $video
|
||||
const vw = document.documentElement.clientWidth
|
||||
const vh = document.documentElement.clientHeight
|
||||
return (videoWidth > videoHeight && vw < vh) || (videoWidth < videoHeight && vw > vh)
|
||||
}
|
||||
|
||||
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
|
||||
if (needRotate()) {
|
||||
const delay = Number(constructor.AUTO_ORIENTATION_TIME ?? 0)
|
||||
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)
|
||||
if (art.fullscreenWeb && !hasClass($player, WEB_CLASS)) {
|
||||
applyWebRotate()
|
||||
}
|
||||
}, delay)
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (hasClass($player, 'art-auto-orientation')) {
|
||||
removeClass($player, 'art-auto-orientation')
|
||||
art.isRotate = false
|
||||
art.emit('resize')
|
||||
}
|
||||
if (hasClass($player, WEB_CLASS))
|
||||
clearWebRotate()
|
||||
}
|
||||
})
|
||||
|
||||
art.on('fullscreen', async (state) => {
|
||||
if (!screen?.orientation?.lock)
|
||||
return
|
||||
const canLock = !!screen?.orientation?.lock
|
||||
|
||||
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')
|
||||
if (canLock && needRotate()) {
|
||||
try {
|
||||
const last = screen.orientation.type
|
||||
const opposite = last.startsWith('portrait') ? 'landscape' : 'portrait'
|
||||
await screen.orientation.lock(opposite)
|
||||
fsLocked = true
|
||||
addClass($player, FS_CLASS)
|
||||
}
|
||||
catch (err) {
|
||||
fsLocked = false
|
||||
notice.show = err
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (hasClass($player, 'art-auto-orientation-fullscreen')) {
|
||||
await screen.orientation.lock(lastOrientation)
|
||||
removeClass($player, 'art-auto-orientation-fullscreen')
|
||||
if (hasClass($player, FS_CLASS)) {
|
||||
removeClass($player, FS_CLASS)
|
||||
}
|
||||
if (canLock && fsLocked) {
|
||||
try {
|
||||
screen.orientation.unlock()
|
||||
}
|
||||
catch { }
|
||||
fsLocked = false
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -63,7 +92,7 @@ export default function autoOrientation(art) {
|
||||
return {
|
||||
name: 'autoOrientation',
|
||||
get state() {
|
||||
return hasClass($player, 'art-auto-orientation')
|
||||
return hasClass($player, WEB_CLASS)
|
||||
},
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user