x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-11 13:56:15 -08:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Harvey Zack committed 2018-10-19 20:15:05 +08:00
1 parent 8aa7dc98df
commit 62a6ba96ac
6 files changed
+44 -38
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/js/artplayer.js
+17 -18
View File
@@ -817,10 +817,11 @@
proxy = _this$art.events.proxy,
$video = _this$art.refs.$video,
player = _this$art.player;
append(this.option.ref, "\n <div class=\"art-control-progress-inner\">\n <div class=\"art-progress-loaded\"></div>\n <div class=\"art-progress-played\" style=\"background: ".concat(theme, "\"></div>\n <div class=\"art-progress-highlight\"></div>\n <div class=\"art-progress-indicator\" style=\"background: ").concat(theme, "\"></div>\n <div class=\"art-progress-timer\">00:00</div>\n </div>\n "));
append(this.option.ref, "\n <div class=\"art-control-progress-inner\">\n <div class=\"art-progress-loaded\"></div>\n <div class=\"art-progress-played\" style=\"background: ".concat(theme, "\"></div>\n <div class=\"art-progress-highlight\">\n <div class=\"highlight-text\"></div>\n </div>\n <div class=\"art-progress-screenshot\"></div>\n <div class=\"art-progress-indicator\" style=\"background: ").concat(theme, "\"></div>\n <div class=\"art-progress-timer\">00:00</div>\n </div>\n "));
this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
this.$played = this.option.ref.querySelector('.art-progress-played');
this.$highlight = this.option.ref.querySelector('.art-progress-highlight');
this.$screenshot = this.option.ref.querySelector('.art-progress-screenshot');
this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
this.$timer = this.option.ref.querySelector('.art-progress-timer');
this.art.on('video:canplay', function () {
@@ -828,7 +829,7 @@
highlight.forEach(function (item) {
var left = Number(item.time) / $video.duration;
append(_this.$highlight, "<span data-text=\"".concat(item.text, "\" data-time=\"").concat(item.time, "\" style=\"left: ").concat(left * 100, "%\"></span>"));
append(_this.$highlight, "\n <span data-text=\"".concat(item.text, "\" data-time=\"").concat(item.time, "\" style=\"left: ").concat(left * 100, "%\"></span>\n "));
});
});
this.art.on('video:progress', function () {
@@ -842,11 +843,18 @@
});
proxy(this.option.ref, 'mousemove', function (event) {
if (event.path.indexOf(_this.$highlight) > -1) {
_this.showHighlight();
_this.$timer.style.visibility = 'hidden';
_this.showHighlight(event);
} else {
_this.$timer.style.visibility = 'visible';
_this.showTime(event);
}
});
proxy(this.option.ref, 'mouseleave', function (event) {
console.log(event);
});
proxy(this.option.ref, 'click', function (event) {
if (event.target !== _this.$indicator) {
var _this$getPos = _this.getPos(event),
@@ -884,7 +892,7 @@
}
}, {
key: "showHighlight",
value: function showHighlight() {
value: function showHighlight(event) {
console.log('showHighlight');
}
}, {
@@ -904,6 +912,10 @@
this.$timer.innerHTML = time;
}
}, {
key: "showScreenshot",
value: function showScreenshot() {//
}
}, {
key: "getPos",
value: function getPos(event) {
@@ -912,7 +924,7 @@
var _this$option$ref$getB = this.option.ref.getBoundingClientRect(),
left = _this$option$ref$getB.left;
var width = event.x - left;
var width = Math.max(0, event.x - left);
var second = width / this.option.ref.clientWidth * $video.duration;
var time = secondToTime(second);
var percentage = clamp(width / this.option.ref.clientWidth, 0, 1);
@@ -949,13 +961,6 @@
return Progress;
}();
var Screenshot = function Screenshot(art, option) {
classCallCheck(this, Screenshot);
this.art = art;
this.option = option;
};
var Subtitle = function Subtitle(art, option) {
classCallCheck(this, Subtitle);
@@ -1013,12 +1018,6 @@
position: 'top',
index: 10
});
this.add({
control: Screenshot,
disable: false,
position: 'top',
index: 20
});
this.add({
control: PlayAndPause,
disable: false,
docs/js/artplayer.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"file":"artplayer.js","sources":["../../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/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/ArtPlayerError.js","../../src/utils/index.js","../../src/verification/player.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.js","../../src/mse.js","../../src/verification/control.js","../../src/controls/danmu.js","../../src/controls/fullscreen.js","../../src/controls/pip.js","../../src/controls/playAndPause.js","../../src/controls/progress.js","../../src/controls/screenshot.js","../../src/controls/subtitle.js","../../src/controls/time.js","../../src/controls/volume.js","../../src/controls/setting.js","../../src/controls/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.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/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/icons/index.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}\n\nmodule.exports = _createClass;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n module.exports = _typeof = function _typeof(obj) {\n return _typeof2(obj);\n };\n } else {\n module.exports = _typeof = function _typeof(obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n };\n }\n\n return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n return call;\n }\n\n return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","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 _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"SuperLine truncated
{"version":3,"file":"artplayer.js","sources":["../../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/setPrototypeOf.js","../../node_modules/@babel/runtime/helpers/inherits.js","../../node_modules/@babel/runtime/helpers/isNativeFunction.js","../../node_modules/@babel/runtime/helpers/construct.js","../../node_modules/@babel/runtime/helpers/wrapNativeSuper.js","../../src/utils/ArtPlayerError.js","../../src/utils/index.js","../../src/verification/player.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.js","../../src/mse.js","../../src/verification/control.js","../../src/controls/danmu.js","../../src/controls/fullscreen.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/index.js","../../src/contextmenu.js","../../src/danmu.js","../../src/info.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/subtitle.js","../../src/events.js","../../src/hotkey.js","../../src/layers.js","../../src/icons/index.js","../../src/loading.js","../../src/notice.js","../../src/mask.js","../../src/index.js"],"sourcesContent":["function _classCallCheck(instance, Constructor) {\n if (!(instance instanceof Constructor)) {\n throw new TypeError(\"Cannot call a class as a function\");\n }\n}\n\nmodule.exports = _classCallCheck;","function _defineProperties(target, props) {\n for (var i = 0; i < props.length; i++) {\n var descriptor = props[i];\n descriptor.enumerable = descriptor.enumerable || false;\n descriptor.configurable = true;\n if (\"value\" in descriptor) descriptor.writable = true;\n Object.defineProperty(target, descriptor.key, descriptor);\n }\n}\n\nfunction _createClass(Constructor, protoProps, staticProps) {\n if (protoProps) _defineProperties(Constructor.prototype, protoProps);\n if (staticProps) _defineProperties(Constructor, staticProps);\n return Constructor;\n}\n\nmodule.exports = _createClass;","function _typeof2(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof2(obj); }\n\nfunction _typeof(obj) {\n if (typeof Symbol === \"function\" && _typeof2(Symbol.iterator) === \"symbol\") {\n module.exports = _typeof = function _typeof(obj) {\n return _typeof2(obj);\n };\n } else {\n module.exports = _typeof = function _typeof(obj) {\n return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : _typeof2(obj);\n };\n }\n\n return _typeof(obj);\n}\n\nmodule.exports = _typeof;","function _assertThisInitialized(self) {\n if (self === void 0) {\n throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");\n }\n\n return self;\n}\n\nmodule.exports = _assertThisInitialized;","var _typeof = require(\"../helpers/typeof\");\n\nvar assertThisInitialized = require(\"./assertThisInitialized\");\n\nfunction _possibleConstructorReturn(self, call) {\n if (call && (_typeof(call) === \"object\" || typeof call === \"function\")) {\n return call;\n }\n\n return assertThisInitialized(self);\n}\n\nmodule.exports = _possibleConstructorReturn;","function _getPrototypeOf(o) {\n module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {\n return o.__proto__ || Object.getPrototypeOf(o);\n };\n return _getPrototypeOf(o);\n}\n\nmodule.exports = _getPrototypeOf;","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 _inherits(subClass, superClass) {\n if (typeof superClass !== \"function\" && superClass !== null) {\n throw new TypeError(\"Super expression must either be null or Line truncated
src/controls/index.js
-8
View File
@@ -4,7 +4,6 @@ import Fullscreen from './fullscreen';
import Pip from './pip';
import PlayAndPause from './playAndPause';
import Progress from './progress';
import Screenshot from './screenshot';
import Subtitle from './subtitle';
import Time from './time';
import Volume from './volume';
@@ -31,13 +30,6 @@ export default class Controls {
index: 10
});
this.add({
control: Screenshot,
disable: false,
position: 'top',
index: 20
});
this.add({
control: PlayAndPause,
disable: false,
src/controls/progress.js
+21 -5
View File
@@ -26,7 +26,10 @@ export default class Progress {
<div class="art-control-progress-inner">
<div class="art-progress-loaded"></div>
<div class="art-progress-played" style="background: ${theme}"></div>
<div class="art-progress-highlight"></div>
<div class="art-progress-highlight">
<div class="highlight-text"></div>
</div>
<div class="art-progress-screenshot"></div>
<div class="art-progress-indicator" style="background: ${theme}"></div>
<div class="art-progress-timer">00:00</div>
</div>
@@ -36,6 +39,7 @@ export default class Progress {
this.$loaded = this.option.ref.querySelector('.art-progress-loaded');
this.$played = this.option.ref.querySelector('.art-progress-played');
this.$highlight = this.option.ref.querySelector('.art-progress-highlight');
this.$screenshot = this.option.ref.querySelector('.art-progress-screenshot');
this.$indicator = this.option.ref.querySelector('.art-progress-indicator');
this.$timer = this.option.ref.querySelector('.art-progress-timer');
@@ -43,7 +47,9 @@ export default class Progress {
this.set('loaded', this.getLoaded());
highlight.forEach(item => {
const left = Number(item.time) / $video.duration;
append(this.$highlight, `<span data-text="${item.text}" data-time="${item.time}" style="left: ${left * 100}%"></span>`);
append(this.$highlight, `
<span data-text="${item.text}" data-time="${item.time}" style="left: ${left * 100}%"></span>
`);
});
});
@@ -61,12 +67,18 @@ export default class Progress {
proxy(this.option.ref, 'mousemove', event => {
if (event.path.indexOf(this.$highlight) > -1) {
this.showHighlight();
this.$timer.style.visibility = 'hidden';
this.showHighlight(event);
} else {
this.$timer.style.visibility = 'visible';
this.showTime(event);
}
});
proxy(this.option.ref, 'mouseleave', event => {
console.log(event);
});
proxy(this.option.ref, 'click', event => {
if (event.target !== this.$indicator) {
const { second, percentage } = this.getPos(event);
@@ -96,7 +108,7 @@ export default class Progress {
});
}
showHighlight() {
showHighlight(event) {
console.log('showHighlight');
}
@@ -112,10 +124,14 @@ export default class Progress {
this.$timer.innerHTML = time;
}
showScreenshot() {
//
}
getPos(event) {
const { $video } = this.art.refs;
const { left } = this.option.ref.getBoundingClientRect();
const width = event.x - left;
const width = Math.max(0, event.x - left);
const second = width / this.option.ref.clientWidth * $video.duration;
const time = secondToTime(second);
const percentage = clamp(width / this.option.ref.clientWidth, 0, 1);
src/controls/screenshot.js
-6
View File
@@ -1,6 +0,0 @@
export default class Screenshot {
constructor(art, option) {
this.art = art;
this.option = option;
}
}
src/style/index.scss
+5
View File
@@ -159,6 +159,11 @@
right: 0;
bottom: 0;
height: 0;
.highlight-text{
//
}
span {
display: inline-block;
position: absolute;