mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-11 13:56:15 -08:00
Optimization progress bar style
This commit is contained in:
Harvey committed
1 parent
220fb06dcd
commit
9510eaf0b8
8 files changed
+49
-66
No files matched your search
@@ -118,7 +118,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
var css_248z = ".art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:55px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loading{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:70}.art-video-player.art-loading-show .art-loading{display:flex}.art-video-player .art-bottom{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;bottom:0;height:100px;left:0;opacity:0;padding:55px 10px 0;pointer-events:none;position:absolute;right:0;transition:all .2s ease-in-out;visibility:hidden;z-index:60}.art-video-player .art-bottom .art-progress{pointer-events:auto;position:relative}.art-video-player .art-bottom .art-progress .art-control-progress{align-items:center;cursor:pointer;display:flex;flex-direction:row;height:4px;position:relative}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner{background:hsla(0,0%,100%,.2);height:50%;position:relative;width:100%}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{background:hsla(0,0%,100%,.4);bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:0;z-index:10}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-played{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:0;z-index:20}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{bottom:0;height:100%;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:30}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{background:#fff;display:inline-block;height:100%;left:0;pointer-events:auto;position:absolute;top:0;width:7px}.art-videLine truncated
|
||||
var css_248z = ".art-video-player{zoom:1;-webkit-tap-highlight-color:rgba(0,0,0,0);-ms-high-contrast-adjust:none;background-color:#000;color:#eee;direction:ltr;display:flex;font-family:Roboto,Arial,Helvetica,sans-serif;font-size:14px;height:100%;line-height:1.3;margin:0 auto;outline:0;position:relative;text-align:left;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%;z-index:20}.art-video-player *{box-sizing:border-box;margin:0;padding:0}.art-video-player ::-webkit-scrollbar{width:5px}.art-video-player ::-webkit-scrollbar-thumb{background-color:#666}.art-video-player ::-webkit-scrollbar-thumb:hover{background-color:#ccc}.art-video-player .art-icon{align-items:center;display:inline-flex;justify-content:center;line-height:1.5}.art-video-player .art-icon svg{fill:#fff}.art-video-player img{max-width:100%;vertical-align:top}@supports ((-webkit-backdrop-filter:initial) or (backdrop-filter:initial)){.art-video-player .art-backdrop-filter{-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);background-color:rgba(0,0,0,.7)!important}}.art-video-player .art-video{background-color:#000;cursor:pointer;z-index:10}.art-video-player .art-poster,.art-video-player .art-video{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.art-video-player .art-poster{background-position:50%;background-repeat:no-repeat;background-size:cover;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:11}.art-video-player .art-subtitle{bottom:10px;color:#fff;display:none;font-size:20px;padding:0 20px;pointer-events:none;position:absolute;text-align:center;text-shadow:.5px .5px .5px rgba(0,0,0,.5);width:100%;z-index:20}.art-video-player .art-subtitle p{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;line-height:1.2;margin:5px 0 0;word-break:break-all}.art-video-player .art-bilingual p:nth-child(n+2){transform:scale(.6);transform-origin:center top}.art-video-player.art-subtitle-show .art-subtitle{display:block}.art-video-player.art-control-show .art-subtitle{bottom:50px}.art-video-player .art-danmuku{z-index:30}.art-video-player .art-danmuku,.art-video-player .art-layers{bottom:0;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%}.art-video-player .art-layers{display:none;z-index:40}.art-video-player .art-layers .art-layer{pointer-events:auto}.art-video-player.art-layer-show .art-layers{display:block}.art-video-player .art-mask{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;overflow:hidden;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:50}.art-video-player .art-mask .art-state{align-items:center;bottom:55px;display:flex;height:60px;justify-content:center;opacity:.6;position:absolute;right:30px;width:60px}.art-video-player.art-mask-show .art-mask{display:flex}.art-video-player .art-loading{align-items:center;bottom:0;display:none;height:100%;justify-content:center;left:0;pointer-events:none;position:absolute;right:0;top:0;width:100%;z-index:70}.art-video-player.art-loading-show .art-loading{display:flex}.art-video-player .art-bottom{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;bottom:0;height:100px;left:0;opacity:0;padding:55px 10px 0;pointer-events:none;position:absolute;right:0;transition:all .2s ease-in-out;visibility:hidden;z-index:60}.art-video-player .art-bottom .art-progress{pointer-events:auto;position:relative}.art-video-player .art-bottom .art-progress .art-control-progress{align-items:center;cursor:pointer;display:flex;flex-direction:row;height:4px;position:relative}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner{align-items:center;background:hsla(0,0%,100%,.2);display:flex;height:50%;position:relative;width:100%}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-loaded{background:hsla(0,0%,100%,.4);bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:0;z-index:10}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-played{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:0;z-index:20}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight{bottom:0;height:100%;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:30}.art-video-player .art-bottom .art-progress .art-control-progress .art-control-progress-inner .art-progress-highlight span{background:#fff;display:inline-block;height:100%;left:0;pointer-events:auto;position:abLine truncated
|
||||
styleInject(css_248z);
|
||||
|
||||
var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
|
||||
@@ -2686,8 +2686,8 @@
|
||||
|
||||
function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$i(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
||||
function getPosFromEvent(art, event) {
|
||||
var $progress = art.template.$progress,
|
||||
player = art.player;
|
||||
var player = art.player,
|
||||
$progress = art.template.$progress;
|
||||
|
||||
var _$progress$getBoundin = $progress.getBoundingClientRect(),
|
||||
left = _$progress$getBoundin.left;
|
||||
@@ -2712,7 +2712,7 @@
|
||||
player = art.player,
|
||||
icons = art.icons;
|
||||
return _objectSpread$i(_objectSpread$i({}, option), {}, {
|
||||
html: "\n <div class=\"art-control-progress-inner\">\n <div class=\"art-progress-loaded\"></div>\n <div class=\"art-progress-played\"></div>\n <div class=\"art-progress-highlight\"></div>\n <div class=\"art-progress-indicator\"></div>\n <div class=\"art-progress-tip art-tip\"></div>\n </div>\n ",
|
||||
html: "\n <div class=\"art-control-progress-inner\">\n <div class=\"art-progress-loaded\"></div>\n <div class=\"art-progress-played\"></div>\n <div class=\"art-progress-highlight\"></div>\n <div class=\"art-progress-indicator\"></div>\n <div class=\"art-progress-tip\"></div>\n </div>\n ",
|
||||
mounted: function mounted($control) {
|
||||
var isDroging = false;
|
||||
var $loaded = query('.art-progress-loaded', $control);
|
||||
@@ -2721,25 +2721,23 @@
|
||||
var $indicator = query('.art-progress-indicator', $control);
|
||||
var $tip = query('.art-progress-tip', $control);
|
||||
setStyle($played, 'backgroundColor', theme);
|
||||
var indicatorSize = 14;
|
||||
|
||||
if (icons.indicator) {
|
||||
indicatorSize = 16;
|
||||
append($indicator, icons.indicator);
|
||||
setStyles($indicator, {
|
||||
top: '-6px',
|
||||
left: '-8px',
|
||||
width: '16px',
|
||||
height: '16px'
|
||||
});
|
||||
} else {
|
||||
setStyles($indicator, {
|
||||
top: '-5px',
|
||||
left: '-7px',
|
||||
width: '14px',
|
||||
height: '14px',
|
||||
backgroundColor: theme
|
||||
});
|
||||
}
|
||||
|
||||
setStyles($indicator, {
|
||||
left: "-".concat(indicatorSize / 2, "px"),
|
||||
width: "".concat(indicatorSize, "px"),
|
||||
height: "".concat(indicatorSize, "px")
|
||||
});
|
||||
|
||||
function showHighlight(event) {
|
||||
var _getPosFromEvent = getPosFromEvent(art, event),
|
||||
width = _getPosFromEvent.width;
|
||||
@@ -2781,7 +2779,7 @@
|
||||
|
||||
if (type === 'played') {
|
||||
setStyle($played, 'width', "".concat(percentage * 100, "%"));
|
||||
setStyle($indicator, 'left', "calc(".concat(percentage * 100, "% - ").concat(getStyle($indicator, 'width') / 2, "px)"));
|
||||
setStyle($indicator, 'left', "calc(".concat(percentage * 100, "% - ").concat(indicatorSize / 2, "px)"));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2830,7 +2828,6 @@
|
||||
second = _getPosFromEvent4.second,
|
||||
percentage = _getPosFromEvent4.percentage;
|
||||
|
||||
addClass($indicator, 'art-show-indicator');
|
||||
setBar('played', percentage);
|
||||
player.seek = second;
|
||||
}
|
||||
@@ -2838,7 +2835,6 @@
|
||||
proxy(document, 'mouseup', function () {
|
||||
if (isDroging) {
|
||||
isDroging = false;
|
||||
removeClass($indicator, 'art-show-indicator');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1 +1 @@
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.jLine truncated
|
||||
{"version":3,"file":"artplayer.js","sources":["../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/classCallCheck.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/createClass.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/assertThisInitialized.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/setPrototypeOf.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/inherits.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/typeof.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/possibleConstructorReturn.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/getPrototypeOf.js","../../node_modules/_style-inject@0.3.0@style-inject/dist/style-inject.es.js","../../packages/artplayer/node_modules/_option-validator@2.0.6@option-validator/dist/option-validator.js","../../packages/artplayer/src/utils/emitter.js","../../packages/artplayer/src/utils/compatibility.js","../../packages/artplayer/src/utils/dom.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeFunction.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/isNativeReflectConstruct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/construct.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/wrapNativeSuper.js","../../packages/artplayer/src/utils/error.js","../../packages/artplayer/src/utils/subtitle.js","../../packages/artplayer/src/utils/file.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/arrayWithoutHoles.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/iterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/nonIterableSpread.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/toConsumableArray.js","../../packages/artplayer/src/utils/property.js","../../packages/artplayer/src/utils/time.js","../../packages/artplayer/src/utils/format.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/defineProperty.js","../../packages/artplayer/src/scheme/index.js","../../packages/artplayer/src/config/index.js","../../packages/artplayer/src/whitelist.js","../../packages/artplayer/src/template.js","../../packages/artplayer/src/i18n/index.js","../../packages/artplayer/src/player/urlMix.js","../../packages/artplayer/src/player/attrInit.js","../../packages/artplayer/src/player/eventInit.js","../../packages/artplayer/src/player/exclusiveInit.js","../../packages/artplayer/src/player/playMix.js","../../packages/artplayer/src/player/pauseMix.js","../../packages/artplayer/src/player/toggleMix.js","../../packages/artplayer/src/player/seekMix.js","../../packages/artplayer/src/player/volumeMix.js","../../packages/artplayer/src/player/currentTimeMix.js","../../packages/artplayer/src/player/durationMix.js","../../packages/artplayer/src/player/switchMix.js","../../packages/artplayer/src/player/playbackRateMix.js","../../packages/artplayer/src/player/aspectRatioMix.js","../../packages/artplayer/src/player/screenshotMix.js","../../packages/artplayer/node_modules/screenfull/dist/screenfull.js","../../packages/artplayer/src/player/fullscreenMix.js","../../packages/artplayer/src/player/fullscreenWebMix.js","../../packages/artplayer/src/player/pipMix.js","../../packages/artplayer/src/player/loadedMix.js","../../packages/artplayer/src/player/playedMix.js","../../packages/artplayer/src/player/playingMix.js","../../packages/artplayer/src/player/autoSizeMix.js","../../packages/artplayer/src/player/rectMix.js","../../packages/artplayer/src/player/flipMix.js","../../packages/artplayer/src/player/miniMix.js","../../packages/artplayer/src/player/loopMin.js","../../packages/artplayer/src/player/rotateMix.js","../../packages/artplayer/src/player/posterMix.js","../../packages/artplayer/src/player/index.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/superPropBase.js","../../node_modules/_@babel_runtime@7.16.3@@babel/runtime/helpers/esm/get.js","../../packages/artplayer/src/utils/component.js","../../packages/artplayer/src/control/fullscreen.js","../../packages/artplayer/src/control/fullscreenWeb.js","../../packages/artplayer/src/control/pip.js","../../packages/artplayer/src/control/playAndPause.js","../../packages/artplayer/src/control/progress.js","../../packages/artplayer/src/control/subtitle.js","../../packages/artplayer/src/control/time.js","../../packages/artplayer/src/control/volume.js","../../packages/artplayer/src/control/setting.js","../../packages/artplayer/src/control/thumbnails.js","../../packages/artplayer/src/control/screenshot.js","../../packages/artplayer/src/control/quality.jLine truncated
|
||||
@@ -1020,6 +1020,7 @@ var art = new Artplayer({
|
||||
fullscreen: '',
|
||||
fullscreenWeb: '',
|
||||
pip: '',
|
||||
indicator: '',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@@ -5,7 +5,7 @@ sidebar_position: 1
|
||||
|
||||
## Demo
|
||||
|
||||
[View full demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku)
|
||||
👉 [View full demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku)
|
||||
|
||||
## Install
|
||||
|
||||
|
||||
@@ -1021,6 +1021,7 @@ var art = new Artplayer({
|
||||
fullscreen: '',
|
||||
fullscreenWeb: '',
|
||||
pip: '',
|
||||
indicator: '',
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
@@ -5,7 +5,7 @@ sidebar_position: 1
|
||||
|
||||
## 演示
|
||||
|
||||
[查看完整演示](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku)
|
||||
👉 [查看完整演示](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku)
|
||||
|
||||
## 安装
|
||||
|
||||
|
||||
@@ -1,20 +1,9 @@
|
||||
import {
|
||||
append,
|
||||
clamp,
|
||||
secondToTime,
|
||||
setStyle,
|
||||
setStyles,
|
||||
getStyle,
|
||||
query,
|
||||
addClass,
|
||||
removeClass,
|
||||
includeFromEvent,
|
||||
} from '../utils';
|
||||
import { query, clamp, append, setStyle, setStyles, secondToTime, includeFromEvent } from '../utils';
|
||||
|
||||
export function getPosFromEvent(art, event) {
|
||||
const {
|
||||
template: { $progress },
|
||||
player,
|
||||
template: { $progress },
|
||||
} = art;
|
||||
|
||||
const { left } = $progress.getBoundingClientRect();
|
||||
@@ -41,7 +30,7 @@ export default function progress(option) {
|
||||
<div class="art-progress-played"></div>
|
||||
<div class="art-progress-highlight"></div>
|
||||
<div class="art-progress-indicator"></div>
|
||||
<div class="art-progress-tip art-tip"></div>
|
||||
<div class="art-progress-tip"></div>
|
||||
</div>
|
||||
`,
|
||||
mounted: ($control) => {
|
||||
@@ -53,24 +42,23 @@ export default function progress(option) {
|
||||
const $tip = query('.art-progress-tip', $control);
|
||||
|
||||
setStyle($played, 'backgroundColor', theme);
|
||||
|
||||
let indicatorSize = 14;
|
||||
if (icons.indicator) {
|
||||
indicatorSize = 16;
|
||||
append($indicator, icons.indicator);
|
||||
setStyles($indicator, {
|
||||
top: '-6px',
|
||||
left: '-8px',
|
||||
width: '16px',
|
||||
height: '16px',
|
||||
});
|
||||
} else {
|
||||
setStyles($indicator, {
|
||||
top: '-5px',
|
||||
left: '-7px',
|
||||
width: '14px',
|
||||
height: '14px',
|
||||
backgroundColor: theme,
|
||||
});
|
||||
}
|
||||
|
||||
setStyles($indicator, {
|
||||
left: `-${indicatorSize / 2}px`,
|
||||
width: `${indicatorSize}px`,
|
||||
height: `${indicatorSize}px`,
|
||||
});
|
||||
|
||||
function showHighlight(event) {
|
||||
const { width } = getPosFromEvent(art, event);
|
||||
const { text } = event.target.dataset;
|
||||
@@ -105,11 +93,7 @@ export default function progress(option) {
|
||||
|
||||
if (type === 'played') {
|
||||
setStyle($played, 'width', `${percentage * 100}%`);
|
||||
setStyle(
|
||||
$indicator,
|
||||
'left',
|
||||
`calc(${percentage * 100}% - ${getStyle($indicator, 'width') / 2}px)`,
|
||||
);
|
||||
setStyle($indicator, 'left', `calc(${percentage * 100}% - ${indicatorSize / 2}px)`);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -163,7 +147,6 @@ export default function progress(option) {
|
||||
proxy(document, 'mousemove', (event) => {
|
||||
if (isDroging) {
|
||||
const { second, percentage } = getPosFromEvent(art, event);
|
||||
addClass($indicator, 'art-show-indicator');
|
||||
setBar('played', percentage);
|
||||
player.seek = second;
|
||||
}
|
||||
@@ -172,7 +155,6 @@ export default function progress(option) {
|
||||
proxy(document, 'mouseup', () => {
|
||||
if (isDroging) {
|
||||
isDroging = false;
|
||||
removeClass($indicator, 'art-show-indicator');
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
.art-progress {
|
||||
position: relative;
|
||||
pointer-events: auto;
|
||||
|
||||
.art-control-progress {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -26,10 +27,13 @@
|
||||
cursor: pointer;
|
||||
|
||||
.art-control-progress-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
|
||||
.art-progress-loaded {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
@@ -76,12 +80,14 @@
|
||||
}
|
||||
|
||||
.art-progress-indicator {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
border-radius: 50%;
|
||||
transform: scale(0.1, 0.1);
|
||||
transition: all 0.1s ease-in-out;
|
||||
|
||||
.art-icon {
|
||||
width: 100%;
|
||||
@@ -89,10 +95,6 @@
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.art-show-indicator {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.art-progress-tip {
|
||||
@@ -113,16 +115,6 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-control-progress-inner {
|
||||
height: 100%;
|
||||
.art-progress-indicator,
|
||||
.art-progress-tip {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-control-thumbnails {
|
||||
@@ -273,6 +265,17 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-progress .art-control-progress .art-control-progress-inner {
|
||||
height: 100%;
|
||||
.art-progress-indicator {
|
||||
transform: scale(1, 1);
|
||||
visibility: visible;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.art-control-show,
|
||||
|
||||
Reference in new issue
Block a user