Skip to content

Commit

Permalink
[bugfix | update]
Browse files Browse the repository at this point in the history
what:
1. progressbar/volumebar 在用户设置translate 时, layerX 相对位置是 translate 之前的那个点,使用 offsetX 替代
2. 增加 sytlelint
Why:
How:
  • Loading branch information
yandeqiang committed Sep 29, 2017
1 parent 3403681 commit f8a8d16
Show file tree
Hide file tree
Showing 12 changed files with 210 additions and 148 deletions.
8 changes: 8 additions & 0 deletions .stylelintrc
@@ -0,0 +1,8 @@
{
"extends": "stylelint-config-standard",
"rules": {
"selector-type-no-unknown": [true, {
"ignore": ["custom-elements", "default-namespace"]
}]
}
}
4 changes: 4 additions & 0 deletions build/rollup.config.base.js
Expand Up @@ -16,6 +16,8 @@ import uglify from 'rollup-plugin-uglify';
import nested from 'postcss-nested';
import cssnano from 'cssnano';
import base64 from 'postcss-base64';
import postcssReporter from 'postcss-reporter';
import stylelint from 'stylelint';

const babelConfig = {
cjs: {
Expand Down Expand Up @@ -82,6 +84,8 @@ export default function (modeConf) {
extensions: ['.svg'],
root: './src/'
}),
stylelint(),
postcssReporter(),
nested(),
cssnano()
],
Expand Down
82 changes: 41 additions & 41 deletions demo/index.html
Expand Up @@ -30,46 +30,46 @@
wrapper: '#wrap',
src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_371ab0c0fda-143d-4755-8727-d3cd12dce02d.mp4',
isLive: false,
// plugin: [{
// name: chimeePluginControlbar.name,
// children: {
// play: {
// icon: {
// play: './icon/play.svg',
// pause: './icon/pause.svg'
// },
// width: '29px',
// height: '29px'
// },
// progressTime: true,
// progressBar: {
// layout: 'two-line'
// },
// volume: {
// icon: {
// high: './icon/volume-high.svg',
// low: './icon/volume-low.svg',
// mute: './icon/volume-mute.svg'
// },
// width: '29px',
// height: '26px'
// },
// clarity: {
// list: [
// {name: '标清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4'},
// {name: '高清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_369ed890f51-1c38-42a7-9ce2-828492660c60.mp4'},
// {name: '超清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_370cc2f40bd-a39f-472a-884f-f44fcd9c5ae0.mp4'},
// {name: '原画', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_371ab0c0fda-143d-4755-8727-d3cd12dce02d.mp4'}
// ]
// },
// screen: {
// icon: {
// small: './icon/screen-small.svg',
// full: './icon/screen-full.svg'
// }
// }
// }
// }],
plugin: [{
name: chimeePluginControlbar.name,
children: {
play: {
icon: {
play: './icon/play.svg',
pause: './icon/pause.svg'
},
width: '29px',
height: '29px'
},
progressTime: true,
progressBar: {
layout: 'two-line'
},
volume: {
icon: {
high: './icon/volume-high.svg',
low: './icon/volume-low.svg',
mute: './icon/volume-mute.svg'
},
width: '29px',
height: '26px'
},
clarity: {
list: [
{name: '标清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4'},
{name: '高清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_369ed890f51-1c38-42a7-9ce2-828492660c60.mp4'},
{name: '超清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_370cc2f40bd-a39f-472a-884f-f44fcd9c5ae0.mp4'},
{name: '原画', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_371ab0c0fda-143d-4755-8727-d3cd12dce02d.mp4'}
]
},
screen: {
icon: {
small: './icon/screen-small.svg',
full: './icon/screen-full.svg'
}
}
}
}],
// plugin: [{
// name: chimeePluginControlbar.name,
// children: {
Expand All @@ -91,7 +91,7 @@
// }
// }],

plugin: [chimeePluginControlbar.name],
// plugin: [chimeePluginControlbar.name],
controls: true,
autoplay: true
});
Expand Down
16 changes: 11 additions & 5 deletions lib/index.browser.js
@@ -1,6 +1,6 @@

/**
* chimee-plugin-controlbar v0.1.11
* chimee-plugin-controlbar v0.1.12
* (c) 2017 yandeqiang
* Released under ISC
*/
Expand Down Expand Up @@ -4717,7 +4717,7 @@ var Volume = (_class = function (_Base) {
key: 'barClick',
value: function barClick(e) {
if (this.inBall) return;
var volume = e.layerX / this.$bg[0].offsetWidth;
var volume = e.offsetX / this.$bg[0].offsetWidth;
this.parent.volume = volume < 0 ? 0 : volume > 1 ? 1 : volume;
this.update();
}
Expand Down Expand Up @@ -4927,7 +4927,7 @@ var ProgressBar = (_class$1 = function (_Base) {
var ballRight = ballRect.left + ballRect.width;
this.inBall = e.clientX <= ballRight && e.clientX >= ballLeft;
if (e.target === this.$tip[0]) return;
this._currentTime = e.layerX / this.$wrap[0].offsetWidth * this.parent.duration;
this._currentTime = e.offsetX / this.$wrap[0].offsetWidth * this.parent.duration;
if (!this.inBall) this.update();
this.startX = e.clientX;
this.startTime = this._currentTime;
Expand Down Expand Up @@ -4979,10 +4979,10 @@ var ProgressBar = (_class$1 = function (_Base) {
key: 'tipShow',
value: function tipShow(e) {
if (e.target === this.$tip[0]) return;
var time = e.layerX / this.$wrap[0].offsetWidth * this.parent.duration;
var time = e.offsetX / this.$wrap[0].offsetWidth * this.parent.duration;
time = time < 0 ? 0 : time > this.parent.duration ? this.parent.duration : time;
var tipContent = formatTime(time);
var left = e.layerX - this.$tip[0].offsetWidth / 2;
var left = e.offsetX - this.$tip[0].offsetWidth / 2;
var leftBound = this.$wrap[0].offsetWidth - this.$tip[0].offsetWidth;
left = left < 0 ? 0 : left > leftBound ? leftBound : left;
this.$tip.text(tipContent);
Expand Down Expand Up @@ -5456,6 +5456,9 @@ var chimeeControl = {
this._showItself();
},
load: function load() {},
c_touchmove: function c_touchmove() {
this._mousemove();
},
c_mousemove: function c_mousemove() {
this._mousemove();
},
Expand Down Expand Up @@ -5515,6 +5518,9 @@ var chimeeControl = {
}
}
},
touchstart: function touchstart(e) {
!this.disabled && this.children.play && this.children.play.click(e);
},
click: function click(e) {
!this.disabled && this.children.play && this.children.play.click(e);
},
Expand Down
14 changes: 10 additions & 4 deletions lib/index.js
Expand Up @@ -488,7 +488,7 @@ var Volume = (_class = function (_Base) {
key: 'barClick',
value: function barClick(e) {
if (this.inBall) return;
var volume = e.layerX / this.$bg[0].offsetWidth;
var volume = e.offsetX / this.$bg[0].offsetWidth;
this.parent.volume = volume < 0 ? 0 : volume > 1 ? 1 : volume;
this.update();
}
Expand Down Expand Up @@ -698,7 +698,7 @@ var ProgressBar = (_class$1 = function (_Base) {
var ballRight = ballRect.left + ballRect.width;
this.inBall = e.clientX <= ballRight && e.clientX >= ballLeft;
if (e.target === this.$tip[0]) return;
this._currentTime = e.layerX / this.$wrap[0].offsetWidth * this.parent.duration;
this._currentTime = e.offsetX / this.$wrap[0].offsetWidth * this.parent.duration;
if (!this.inBall) this.update();
this.startX = e.clientX;
this.startTime = this._currentTime;
Expand Down Expand Up @@ -750,10 +750,10 @@ var ProgressBar = (_class$1 = function (_Base) {
key: 'tipShow',
value: function tipShow(e) {
if (e.target === this.$tip[0]) return;
var time = e.layerX / this.$wrap[0].offsetWidth * this.parent.duration;
var time = e.offsetX / this.$wrap[0].offsetWidth * this.parent.duration;
time = time < 0 ? 0 : time > this.parent.duration ? this.parent.duration : time;
var tipContent = chimeeHelper.formatTime(time);
var left = e.layerX - this.$tip[0].offsetWidth / 2;
var left = e.offsetX - this.$tip[0].offsetWidth / 2;
var leftBound = this.$wrap[0].offsetWidth - this.$tip[0].offsetWidth;
left = left < 0 ? 0 : left > leftBound ? leftBound : left;
this.$tip.text(tipContent);
Expand Down Expand Up @@ -1227,6 +1227,9 @@ var chimeeControl = {
this._showItself();
},
load: function load() {},
c_touchmove: function c_touchmove() {
this._mousemove();
},
c_mousemove: function c_mousemove() {
this._mousemove();
},
Expand Down Expand Up @@ -1286,6 +1289,9 @@ var chimeeControl = {
}
}
},
touchstart: function touchstart(e) {
!this.disabled && this.children.play && this.children.play.click(e);
},
click: function click(e) {
!this.disabled && this.children.play && this.children.play.click(e);
},
Expand Down
2 changes: 1 addition & 1 deletion lib/index.min.js

Large diffs are not rendered by default.

14 changes: 10 additions & 4 deletions lib/index.mjs
Expand Up @@ -484,7 +484,7 @@ var Volume = (_class = function (_Base) {
key: 'barClick',
value: function barClick(e) {
if (this.inBall) return;
var volume = e.layerX / this.$bg[0].offsetWidth;
var volume = e.offsetX / this.$bg[0].offsetWidth;
this.parent.volume = volume < 0 ? 0 : volume > 1 ? 1 : volume;
this.update();
}
Expand Down Expand Up @@ -694,7 +694,7 @@ var ProgressBar = (_class$1 = function (_Base) {
var ballRight = ballRect.left + ballRect.width;
this.inBall = e.clientX <= ballRight && e.clientX >= ballLeft;
if (e.target === this.$tip[0]) return;
this._currentTime = e.layerX / this.$wrap[0].offsetWidth * this.parent.duration;
this._currentTime = e.offsetX / this.$wrap[0].offsetWidth * this.parent.duration;
if (!this.inBall) this.update();
this.startX = e.clientX;
this.startTime = this._currentTime;
Expand Down Expand Up @@ -746,10 +746,10 @@ var ProgressBar = (_class$1 = function (_Base) {
key: 'tipShow',
value: function tipShow(e) {
if (e.target === this.$tip[0]) return;
var time = e.layerX / this.$wrap[0].offsetWidth * this.parent.duration;
var time = e.offsetX / this.$wrap[0].offsetWidth * this.parent.duration;
time = time < 0 ? 0 : time > this.parent.duration ? this.parent.duration : time;
var tipContent = formatTime(time);
var left = e.layerX - this.$tip[0].offsetWidth / 2;
var left = e.offsetX - this.$tip[0].offsetWidth / 2;
var leftBound = this.$wrap[0].offsetWidth - this.$tip[0].offsetWidth;
left = left < 0 ? 0 : left > leftBound ? leftBound : left;
this.$tip.text(tipContent);
Expand Down Expand Up @@ -1223,6 +1223,9 @@ var chimeeControl = {
this._showItself();
},
load: function load() {},
c_touchmove: function c_touchmove() {
this._mousemove();
},
c_mousemove: function c_mousemove() {
this._mousemove();
},
Expand Down Expand Up @@ -1282,6 +1285,9 @@ var chimeeControl = {
}
}
},
touchstart: function touchstart(e) {
!this.disabled && this.children.play && this.children.play.click(e);
},
click: function click(e) {
!this.disabled && this.children.play && this.children.play.click(e);
},
Expand Down
5 changes: 4 additions & 1 deletion package.json
@@ -1,6 +1,6 @@
{
"name": "chimee-plugin-controlbar",
"version": "0.1.11",
"version": "0.1.12",
"description": "controlbar for chimee",
"main": "lib/index.js",
"module": "lib/index.mjs",
Expand Down Expand Up @@ -66,6 +66,7 @@
"karma-webpack": "^2.0.4",
"postcss-base64": "^0.7.1",
"postcss-nested": "^2.0.2",
"postcss-reporter": "^5.0.0",
"rollup": "^0.45.1",
"rollup-plugin-babel": "^2.7.1",
"rollup-plugin-buble": "^0.15.0",
Expand All @@ -74,6 +75,8 @@
"rollup-plugin-postcss": "^0.5.3",
"rollup-plugin-uglify": "^2.0.1",
"style-loader": "^0.18.2",
"stylelint": "^8.0.0",
"stylelint-config-standard": "^17.0.0",
"toxic-decorators": "^0.3.6",
"url-loader": "^0.5.9",
"webpack": "^3.4.1"
Expand Down

0 comments on commit f8a8d16

Please sign in to comment.