mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 19:06:15 -08:00
添加画中画功能
This commit is contained in:
Harvey Zack committed
1 parent
ca7e24a525
commit
a257e93c0f
12 files changed
+136
-42
No files matched your search
@@ -13,4 +13,5 @@
|
||||
.artplayer-video-player.artplayer-hide-cursor *{cursor:none!important}
|
||||
.artplayer-video-player[data-aspect-ratio] video{box-sizing:content-box;-o-object-fit:fill;object-fit:fill}
|
||||
.artplayer-video-player.artplayer-web-fullscreen{position:fixed;z-index:9999;width:100%;height:100%;left:0;top:0;right:0;bottom:0}
|
||||
button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]Line truncated
|
||||
button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[data-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:normal!important;text-shadow:none!important;font-size:12px!important;background:rgba(17,17,17,.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:nowrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;pointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-balloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;content:""}[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before{filter:alpha(opactiy=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";-moz-opacity:1;-khtml-opacity:1;opacity:1;pointer-events:auto}[data-balloon].font-awesome:after{font-family:FontAwesome}[data-balloon][data-balloon-break]:after{white-space:pre}[data-balloon][data-balloon-blunt]:after,[data-balloon][data-balloon-blunt]:before{transition:none}[data-balloon][data-balloon-pos=up]:after{margin-bottom:11px}[data-balloon][data-balloon-pos=up]:after,[data-balloon][data-balloon-pos=up]:before{bottom:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up]:before{margin-bottom:5px}[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=up-left]:after{left:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-left]:after,[data-balloon][data-balloon-pos=up-left]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-left]:before{left:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-left]:hover:after,[data-balloon][data-balloon-pos=up-left]:hover:before,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-left][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=up-right]:after{right:0;margin-bottom:11px}[data-balloon][data-balloon-pos=up-right]:after,[data-balloon][data-balloon-pos=up-right]:before{bottom:100%;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transform-origin:top;transform-origin:top}[data-balloon][data-balloon-pos=up-right]:before{right:5px;margin-bottom:5px}[data-balloon][data-balloon-pos=up-right]:hover:after,[data-balloon][data-balloon-pos=up-right]:hover:before,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up-right][data-balloon-visible]:before{-webkit-transform:translate(0);transform:translate(0)}[data-balloon][data-balloon-pos=down]:after{margin-top:11px}[data-balloon][data-balloon-pos=down]:after,[data-balloon][data-balloon-pos=down]:before{left:50%;top:100%;-webkit-transform:translate(-50%,-10px);transform:translate(-50%,-10px)}[data-balloon][data-balloon-pos=down]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;margin-top:5px}[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before{-webkit-transform:translate(-50%);transform:translate(-50%)}[data-balloon][data-balloon-pos=down-left]:after{left:0;margin-top:11px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17,17,17,0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");background-size:100% auto;width:18px;height:6px;left:5px;margin-top:5px;top:100%;-webkit-transform:translateY(-10px);transform:translateY(-10px)}[data-balloon][data-balloon-pos=down-left]Line truncated
|
||||
.artplayer-video-player.artplayer-pip{background:red}
|
||||
+63
-21
@@ -994,8 +994,7 @@
|
||||
$video = _art$refs.$video,
|
||||
$player = _art$refs.$player,
|
||||
i18n = art.i18n,
|
||||
notice = art.notice,
|
||||
contextmenu = art.contextmenu;
|
||||
notice = art.notice;
|
||||
Object.defineProperty(player, 'playbackRate', {
|
||||
value: function value(rate) {
|
||||
var newRate = clamp(rate, 0.1, 10);
|
||||
@@ -1007,8 +1006,11 @@
|
||||
});
|
||||
Object.defineProperty(player, 'playbackRateRemove', {
|
||||
value: function value() {
|
||||
if (contextmenu.$playbackRate) {
|
||||
var $normal = contextmenu.$playbackRate.querySelector('.normal');
|
||||
player.playbackRate(1);
|
||||
delete $player.dataset.playbackRate;
|
||||
|
||||
if (art.contextmenu.$playbackRate) {
|
||||
var $normal = art.contextmenu.$playbackRate.querySelector('.normal');
|
||||
sublings($normal).forEach(function (item) {
|
||||
return item.classList.remove('current');
|
||||
});
|
||||
@@ -1032,8 +1034,7 @@
|
||||
$video = _art$refs.$video,
|
||||
$player = _art$refs.$player,
|
||||
i18n = art.i18n,
|
||||
notice = art.notice,
|
||||
contextmenu = art.contextmenu;
|
||||
notice = art.notice;
|
||||
Object.defineProperty(player, 'aspectRatio', {
|
||||
value: function value(ratio) {
|
||||
var ratioName = ratio.length === 2 ? "".concat(ratio[0], ":").concat(ratio[1]) : i18n.get('Default');
|
||||
@@ -1061,10 +1062,7 @@
|
||||
|
||||
$player.dataset.aspectRatio = ratioName;
|
||||
} else {
|
||||
setStyle($video, 'width', null);
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.aspectRatio;
|
||||
player.aspectRatioRemove();
|
||||
}
|
||||
|
||||
notice.show("".concat(i18n.get('Aspect ratio'), ": ").concat(ratioName));
|
||||
@@ -1076,9 +1074,10 @@
|
||||
setStyle($video, 'width', null);
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.aspectRatio;
|
||||
|
||||
if (contextmenu.$aspectRatio) {
|
||||
var $default = contextmenu.$aspectRatio.querySelector('.default');
|
||||
if (art.contextmenu.$aspectRatio) {
|
||||
var $default = art.contextmenu.$aspectRatio.querySelector('.default');
|
||||
sublings($default).forEach(function (item) {
|
||||
return item.classList.remove('current');
|
||||
});
|
||||
@@ -1346,12 +1345,10 @@
|
||||
});
|
||||
Object.defineProperty(player, 'fullscreenToggle', {
|
||||
value: function value() {
|
||||
if (screenfull.enabled) {
|
||||
if (screenfull.isFullscreen) {
|
||||
player.fullscreenExit();
|
||||
} else {
|
||||
player.fullscreenEnabled();
|
||||
}
|
||||
if (player.fullscreenState) {
|
||||
player.fullscreenExit();
|
||||
} else {
|
||||
player.fullscreenEnabled();
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1389,9 +1386,47 @@
|
||||
Object.defineProperty(player, 'fullscreenWebToggle', {
|
||||
value: function value() {
|
||||
if (player.fullscreenWebState) {
|
||||
player.exit();
|
||||
player.fullscreenWebExit();
|
||||
} else {
|
||||
player.enabled();
|
||||
player.fullscreenWebEnabled();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function pipMix(art, player) {
|
||||
var $player = art.refs.$player;
|
||||
Object.defineProperty(player, 'pipState', {
|
||||
get: function get() {
|
||||
return $player.classList.contains('artplayer-pip');
|
||||
}
|
||||
});
|
||||
Object.defineProperty(player, 'pipEnabled', {
|
||||
value: function value() {
|
||||
$player.classList.add('artplayer-pip');
|
||||
player.fullscreenExit();
|
||||
player.fullscreenWebExit();
|
||||
player.aspectRatioRemove();
|
||||
player.playbackRateRemove();
|
||||
art.emit('pip', true);
|
||||
}
|
||||
});
|
||||
Object.defineProperty(player, 'pipExit', {
|
||||
value: function value() {
|
||||
$player.classList.remove('artplayer-pip');
|
||||
player.fullscreenExit();
|
||||
player.fullscreenWebExit();
|
||||
player.aspectRatioRemove();
|
||||
player.playbackRateRemove();
|
||||
art.emit('pip', false);
|
||||
}
|
||||
});
|
||||
Object.defineProperty(player, 'pipToggle', {
|
||||
value: function value() {
|
||||
if (player.pipState) {
|
||||
player.pipExit();
|
||||
} else {
|
||||
player.pipEnabled();
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -1417,6 +1452,7 @@
|
||||
screenshotMix(art, this);
|
||||
fullscreenMix(art, this);
|
||||
fullscreenWebMix(art, this);
|
||||
pipMix(art, this);
|
||||
};
|
||||
|
||||
function _arrayWithHoles(arr) {
|
||||
@@ -1639,7 +1675,13 @@
|
||||
createClass(Pip, [{
|
||||
key: "apply",
|
||||
value: function apply(art, $control) {
|
||||
this.art = art;
|
||||
var proxy = art.events.proxy,
|
||||
i18n = art.i18n,
|
||||
player = art.player;
|
||||
this.$pip = append($control, '画中画');
|
||||
proxy($control, 'click', function () {
|
||||
player.pipToggle();
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/index.js","../../node_modules/option-validator/dist/option-validator.js","../../src/scheme/validElement.js","../../src/scheme/index.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player/attrInit.js","../../src/player/eventInit.js","../../src/player/playMix.js","../../src/player/pauseMin.js","../../src/player/toggleMix.js","../../src/player/seekMix.js","../../src/player/volumeMix.js","../../src/player/currentTimeMix.js","../../src/player/durationMix.js","../../src/player/switchMix.js","../../src/player/playbackRateMix.js","../../src/player/aspectRatioMix.js","../../src/player/screenshotMix.js","../../node_modules/screenfull/dist/screenfull.js","../../src/player/fullscreenMix.js","../../src/player/fullscreenWebMix.js","../../src/player/index.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../src/icons/index.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/fullscreenWeb.js","../../src/controls/pip.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/screenshot.js","../../src/controls/quality.js","../../src/controls/index.js","../../src/contextmenu/playbackRate.js","../../src/contextmenu/aspectRatio.js","../../src/contextmenu/info.js","../../src/contextmenu/version.js","../../src/contextmenu/close.js","../../src/contextmenu/index.js","../../src/danmu.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/setting/common.js","../../src/setting/index.js","../../src/index.js"],"sourcesContent":["function _setPrototypeOf(o, p) {\n module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction _construct(Parent, args, Class) {\n if (isNativeReflectConstruct()) {\n module.exports = _construct = Reflect.construct;\n } else {\n module.exports = _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n\n return _construct.apply(null, arguments);\n}\n\nmodule.exports = _construct;","function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n }\n}\n\nmodule.exports = _arrayWithoutHoles;","function _iterableToArray(iter) {\n if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nmodule.exports = _iterableToArray;","function _nonIterableSpread(Line truncated
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/@babel/runtime/helpers/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/arrayWithoutHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArray.js","../../node_modules/@babel/runtime/helpers/nonIterableSpread.js","../../node_modules/@babel/runtime/helpers/toConsumableArray.js","../../node_modules/@babel/runtime/helpers/classCallCheck.js","../../node_modules/@babel/runtime/helpers/createClass.js","../../node_modules/@babel/runtime/helpers/typeof.js","../../node_modules/@babel/runtime/helpers/assertThisInitialized.js","../../node_modules/@babel/runtime/helpers/possibleConstructorReturn.js","../../node_modules/@babel/runtime/helpers/getPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/defineProperty.js","../../node_modules/@babel/runtime/helpers/objectSpread.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/index.js","../../node_modules/option-validator/dist/option-validator.js","../../src/scheme/validElement.js","../../src/scheme/index.js","../../src/config/mimeCodec.js","../../src/config/mse.js","../../src/config/video.js","../../src/config/index.js","../../node_modules/tiny-emitter/index.js","../../src/template.js","../../src/i18n.js","../../src/player/attrInit.js","../../src/player/eventInit.js","../../src/player/playMix.js","../../src/player/pauseMin.js","../../src/player/toggleMix.js","../../src/player/seekMix.js","../../src/player/volumeMix.js","../../src/player/currentTimeMix.js","../../src/player/durationMix.js","../../src/player/switchMix.js","../../src/player/playbackRateMix.js","../../src/player/aspectRatioMix.js","../../src/player/screenshotMix.js","../../node_modules/screenfull/dist/screenfull.js","../../src/player/fullscreenMix.js","../../src/player/fullscreenWebMix.js","../../src/player/pipMix.js","../../src/player/index.js","../../node_modules/@babel/runtime/helpers/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/slicedToArray.js","../../src/icons/index.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/fullscreenWeb.js","../../src/controls/pip.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/thumbnails.js","../../src/controls/screenshot.js","../../src/controls/quality.js","../../src/controls/index.js","../../src/contextmenu/playbackRate.js","../../src/contextmenu/aspectRatio.js","../../src/contextmenu/info.js","../../src/contextmenu/version.js","../../src/contextmenu/close.js","../../src/contextmenu/index.js","../../src/danmu.js","../../src/info.js","../../src/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/setting/common.js","../../src/setting/index.js","../../src/index.js"],"sourcesContent":["function _setPrototypeOf(o, p) {\n module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n\n return _setPrototypeOf(o, p);\n}\n\nmodule.exports = _setPrototypeOf;","var setPrototypeOf = require(\"./setPrototypeOf\");\n\nfunction isNativeReflectConstruct() {\n if (typeof Reflect === \"undefined\" || !Reflect.construct) return false;\n if (Reflect.construct.sham) return false;\n if (typeof Proxy === \"function\") return true;\n\n try {\n Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));\n return true;\n } catch (e) {\n return false;\n }\n}\n\nfunction _construct(Parent, args, Class) {\n if (isNativeReflectConstruct()) {\n module.exports = _construct = Reflect.construct;\n } else {\n module.exports = _construct = function _construct(Parent, args, Class) {\n var a = [null];\n a.push.apply(a, args);\n var Constructor = Function.bind.apply(Parent, a);\n var instance = new Constructor();\n if (Class) setPrototypeOf(instance, Class.prototype);\n return instance;\n };\n }\n\n return _construct.apply(null, arguments);\n}\n\nmodule.exports = _construct;","function _arrayWithoutHoles(arr) {\n if (Array.isArray(arr)) {\n for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) {\n arr2[i] = arr[i];\n }\n\n return arr2;\n }\n}\n\nmodule.exports = _arrayWithoutHoles;","function _iterableToArray(iter) {\n if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter);\n}\n\nmodule.exports = _iterableToArray;",Line truncated
|
||||
+7
-1
@@ -1,9 +1,15 @@
|
||||
import { append } from '../utils';
|
||||
|
||||
export default class Pip {
|
||||
constructor(option) {
|
||||
this.option = option;
|
||||
}
|
||||
|
||||
apply(art, $control) {
|
||||
this.art = art;
|
||||
const { events: { proxy }, i18n, player } = art;
|
||||
this.$pip = append($control, '画中画');
|
||||
proxy($control, 'click', () => {
|
||||
player.pipToggle();
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { setStyle, sublings } from '../utils';
|
||||
|
||||
export default function aspectRatioMix(art, player) {
|
||||
const { refs: { $video, $player }, i18n, notice, contextmenu } = art;
|
||||
const { refs: { $video, $player }, i18n, notice } = art;
|
||||
|
||||
Object.defineProperty(player, 'aspectRatio', {
|
||||
value: ratio => {
|
||||
@@ -27,10 +27,7 @@ export default function aspectRatioMix(art, player) {
|
||||
|
||||
$player.dataset.aspectRatio = ratioName;
|
||||
} else {
|
||||
setStyle($video, 'width', null);
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
delete $player.dataset.aspectRatio;
|
||||
player.aspectRatioRemove();
|
||||
}
|
||||
|
||||
notice.show(`${i18n.get('Aspect ratio')}: ${ratioName}`);
|
||||
@@ -43,8 +40,9 @@ export default function aspectRatioMix(art, player) {
|
||||
setStyle($video, 'width', null);
|
||||
setStyle($video, 'height', null);
|
||||
setStyle($video, 'padding', null);
|
||||
if (contextmenu.$aspectRatio) {
|
||||
const $default = contextmenu.$aspectRatio.querySelector('.default');
|
||||
delete $player.dataset.aspectRatio;
|
||||
if (art.contextmenu.$aspectRatio) {
|
||||
const $default = art.contextmenu.$aspectRatio.querySelector('.default');
|
||||
sublings($default).forEach(item => item.classList.remove('current'));
|
||||
$default.classList.add('current');
|
||||
}
|
||||
|
||||
@@ -45,12 +45,10 @@ export default function fullscreenMix(art, player) {
|
||||
|
||||
Object.defineProperty(player, 'fullscreenToggle', {
|
||||
value: () => {
|
||||
if (screenfull.enabled) {
|
||||
if (screenfull.isFullscreen) {
|
||||
player.fullscreenExit();
|
||||
} else {
|
||||
player.fullscreenEnabled();
|
||||
}
|
||||
if (player.fullscreenState) {
|
||||
player.fullscreenExit();
|
||||
} else {
|
||||
player.fullscreenEnabled();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -30,9 +30,9 @@ export default function fullscreenWebMix(art, player) {
|
||||
Object.defineProperty(player, 'fullscreenWebToggle', {
|
||||
value: () => {
|
||||
if (player.fullscreenWebState) {
|
||||
player.exit();
|
||||
player.fullscreenWebExit();
|
||||
} else {
|
||||
player.enabled();
|
||||
player.fullscreenWebEnabled();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@@ -13,6 +13,7 @@ import aspectRatioMix from './aspectRatioMix';
|
||||
import screenshotMix from './screenshotMix';
|
||||
import fullscreenMix from './fullscreenMix';
|
||||
import fullscreenWebMix from './fullscreenWebMix';
|
||||
import pipMix from './pipMix';
|
||||
|
||||
export default class Player {
|
||||
constructor(art) {
|
||||
@@ -34,5 +35,6 @@ export default class Player {
|
||||
screenshotMix(art, this);
|
||||
fullscreenMix(art, this);
|
||||
fullscreenWebMix(art, this);
|
||||
pipMix(art, this);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
export default function pipMix(art, player) {
|
||||
const { refs: { $player } } = art;
|
||||
|
||||
Object.defineProperty(player, 'pipState', {
|
||||
get: () => $player.classList.contains('artplayer-pip')
|
||||
});
|
||||
|
||||
Object.defineProperty(player, 'pipEnabled', {
|
||||
value: () => {
|
||||
$player.classList.add('artplayer-pip');
|
||||
player.fullscreenExit();
|
||||
player.fullscreenWebExit();
|
||||
player.aspectRatioRemove();
|
||||
player.playbackRateRemove();
|
||||
art.emit('pip', true);
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(player, 'pipExit', {
|
||||
value: () => {
|
||||
$player.classList.remove('artplayer-pip');
|
||||
player.fullscreenExit();
|
||||
player.fullscreenWebExit();
|
||||
player.aspectRatioRemove();
|
||||
player.playbackRateRemove();
|
||||
art.emit('pip', false);
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(player, 'pipToggle', {
|
||||
value: () => {
|
||||
if (player.pipState) {
|
||||
player.pipExit();
|
||||
} else {
|
||||
player.pipEnabled();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { clamp, sublings } from '../utils';
|
||||
|
||||
export default function playbackRateMix(art, player) {
|
||||
const { refs: { $video, $player }, i18n, notice, contextmenu } = art;
|
||||
const { refs: { $video, $player }, i18n, notice } = art;
|
||||
|
||||
Object.defineProperty(player, 'playbackRate', {
|
||||
value: rate => {
|
||||
@@ -15,8 +15,10 @@ export default function playbackRateMix(art, player) {
|
||||
|
||||
Object.defineProperty(player, 'playbackRateRemove', {
|
||||
value: () => {
|
||||
if (contextmenu.$playbackRate) {
|
||||
const $normal = contextmenu.$playbackRate.querySelector('.normal');
|
||||
player.playbackRate(1);
|
||||
delete $player.dataset.playbackRate;
|
||||
if (art.contextmenu.$playbackRate) {
|
||||
const $normal = art.contextmenu.$playbackRate.querySelector('.normal');
|
||||
sublings($normal).forEach(item => item.classList.remove('current'));
|
||||
$normal.classList.add('current');
|
||||
}
|
||||
|
||||
@@ -13,3 +13,4 @@ import './info.scss';
|
||||
import './hideCursor.scss';
|
||||
import './aspectRatio.scss';
|
||||
import './fullscreenWeb.scss';
|
||||
import './pip.scss';
|
||||
@@ -0,0 +1,5 @@
|
||||
.artplayer-video-player {
|
||||
&.artplayer-pip {
|
||||
background: red;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user