diff --git a/package.json b/package.json index ea250b49c..0794d2f81 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "sass-loader": "^6.0.6", "strip-loader": "^0.1.2", "style-loader": "^0.20.1", + "svg-inline-loader": "0.8.0", "template-string-optimize-loader": "^2.2.3", "url-loader": "^0.6.2", "webpack": "^3.10.0", @@ -54,7 +55,6 @@ }, "dependencies": { "balloon-css": "^0.5.0", - "object-assign": "4.1.1", "promise-polyfill": "7.0.2" } } diff --git a/src/assets/camera.svg b/src/assets/camera.svg new file mode 100644 index 000000000..8b2787855 --- /dev/null +++ b/src/assets/camera.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/comment-off.svg b/src/assets/comment-off.svg new file mode 100644 index 000000000..0cf3914e2 --- /dev/null +++ b/src/assets/comment-off.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/comment.svg b/src/assets/comment.svg new file mode 100644 index 000000000..6707ed9e4 --- /dev/null +++ b/src/assets/comment.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/full-web.svg b/src/assets/full-web.svg new file mode 100644 index 000000000..e0be3dde7 --- /dev/null +++ b/src/assets/full-web.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/full.svg b/src/assets/full.svg new file mode 100644 index 000000000..ca32b4c00 --- /dev/null +++ b/src/assets/full.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/loading.svg b/src/assets/loading.svg new file mode 100644 index 000000000..6d19db579 --- /dev/null +++ b/src/assets/loading.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/pallette.svg b/src/assets/pallette.svg new file mode 100644 index 000000000..2b8f8a4fa --- /dev/null +++ b/src/assets/pallette.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/pause.svg b/src/assets/pause.svg new file mode 100644 index 000000000..60984d76f --- /dev/null +++ b/src/assets/pause.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/play.svg b/src/assets/play.svg new file mode 100644 index 000000000..71ff797db --- /dev/null +++ b/src/assets/play.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/right.svg b/src/assets/right.svg new file mode 100644 index 000000000..0d3034809 --- /dev/null +++ b/src/assets/right.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/send.svg b/src/assets/send.svg new file mode 100644 index 000000000..e46625580 --- /dev/null +++ b/src/assets/send.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/setting.svg b/src/assets/setting.svg new file mode 100644 index 000000000..41f9b2c9e --- /dev/null +++ b/src/assets/setting.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/subtitle.svg b/src/assets/subtitle.svg new file mode 100644 index 000000000..57fac17fb --- /dev/null +++ b/src/assets/subtitle.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/volume-down.svg b/src/assets/volume-down.svg new file mode 100644 index 000000000..73835f942 --- /dev/null +++ b/src/assets/volume-down.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/volume-off.svg b/src/assets/volume-off.svg new file mode 100644 index 000000000..4d92aa591 --- /dev/null +++ b/src/assets/volume-off.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/volume-up.svg b/src/assets/volume-up.svg new file mode 100644 index 000000000..59ecc8ecc --- /dev/null +++ b/src/assets/volume-up.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/css/bezel.scss b/src/css/bezel.scss index 83de5a253..37d97d0e7 100644 --- a/src/css/bezel.scss +++ b/src/css/bezel.scss @@ -59,7 +59,6 @@ .diplayer-loading-dot { animation: diplayer-loading-dot-fade .8s ease infinite; opacity: 0; - fill: #fff; transform-origin: 4px 4px; @for $i from 7 through 1 { &.diplayer-loading-dot-#{$i} { diff --git a/src/css/player.scss b/src/css/player.scss index 162037964..92127bc8f 100644 --- a/src/css/player.scss +++ b/src/css/player.scss @@ -8,6 +8,16 @@ box-sizing: content-box; } + svg { + width: 100%; + height: 100%; + + path, + circle { + fill: #fff; + } + } + &:-webkit-full-screen { width: 100%; height: 100%; diff --git a/src/js/controller.js b/src/js/controller.js index aa6965bb6..0ff36412b 100644 --- a/src/js/controller.js +++ b/src/js/controller.js @@ -1,5 +1,6 @@ import utils from './utils'; import Thumbnails from './thumbnails'; +import Icons from './icons'; class Controller { constructor (player) { @@ -180,7 +181,7 @@ class Controller { } else { this.player.video.muted = true; - this.player.template.volumeIcon.innerHTML = this.player.icons.get('volume-off'); + this.player.template.volumeIcon.innerHTML = Icons.volumeOff; this.player.bar.set('volume', 0, 'width'); } }); diff --git a/src/js/icons.js b/src/js/icons.js new file mode 100644 index 000000000..a42f9c8b2 --- /dev/null +++ b/src/js/icons.js @@ -0,0 +1,37 @@ +import play from '../assets/play.svg'; +import pause from '../assets/pause.svg'; +import volumeUp from '../assets/volume-up.svg'; +import volumeDown from '../assets/volume-down.svg'; +import volumeOff from '../assets/volume-off.svg'; +import full from '../assets/full.svg'; +import fullWeb from '../assets/full-web.svg'; +import setting from '../assets/setting.svg'; +import right from '../assets/right.svg'; +import comment from '../assets/comment.svg'; +import commentOff from '../assets/comment-off.svg'; +import send from '../assets/send.svg'; +import pallette from '../assets/pallette.svg'; +import camera from '../assets/camera.svg'; +import subtitle from '../assets/subtitle.svg'; +import loading from '../assets/loading.svg'; + +const Icons = { + play: play, + pause: pause, + volumeUp: volumeUp, + volumeDown: volumeDown, + volumeOff: volumeOff, + full: full, + fullWeb: fullWeb, + setting: setting, + right: right, + comment: comment, + commentOff: commentOff, + send: send, + pallette: pallette, + camera: camera, + subtitle: subtitle, + loading: loading, +}; + +export default Icons; diff --git a/src/js/options.js b/src/js/options.js index edac856bd..f6ebf5392 100644 --- a/src/js/options.js +++ b/src/js/options.js @@ -1,5 +1,4 @@ /* global DPLAYER_VERSION */ -import objectAssign from 'object-assign'; import defaultApiBackend from './api.js'; export default (options) => { @@ -18,73 +17,6 @@ export default (options) => { volume: 0.7, apiBackend: defaultApiBackend, video: {}, - icons: { - play: [ - '0 0 16 32', - 'M15.552 15.168q0.448 0.32 0.448 0.832 0 0.448-0.448 0.768l-13.696 8.512q-0.768 0.512-1.312 0.192t-0.544-1.28v-16.448q0-0.96 0.544-1.28t1.312 0.192z' - ], - pause: [ - '0 0 17 32', - 'M14.080 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048zM2.88 4.8q2.88 0 2.88 2.048v18.24q0 2.112-2.88 2.112t-2.88-2.112v-18.24q0-2.048 2.88-2.048z' - ], - 'volume-up': [ - '0 0 21 32', - 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528zM25.152 16q0 2.72-1.536 5.056t-4 3.36q-0.256 0.096-0.448 0.096-0.48 0-0.832-0.352t-0.32-0.8q0-0.704 0.672-1.056 1.024-0.512 1.376-0.8 1.312-0.96 2.048-2.4t0.736-3.104-0.736-3.104-2.048-2.4q-0.352-0.288-1.376-0.8-0.672-0.352-0.672-1.056 0-0.448 0.32-0.8t0.8-0.352q0.224 0 0.48 0.096 2.496 1.056 4 3.36t1.536 5.056z' - ], - 'volume-down': [ - '0 0 21 32', - 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8zM20.576 16q0 1.344-0.768 2.528t-2.016 1.664q-0.16 0.096-0.448 0.096-0.448 0-0.8-0.32t-0.32-0.832q0-0.384 0.192-0.64t0.544-0.448 0.608-0.384 0.512-0.64 0.192-1.024-0.192-1.024-0.512-0.64-0.608-0.384-0.544-0.448-0.192-0.64q0-0.48 0.32-0.832t0.8-0.32q0.288 0 0.448 0.096 1.248 0.48 2.016 1.664t0.768 2.528z' - ], - 'volume-off': [ - '0 0 21 32', - 'M13.728 6.272v19.456q0 0.448-0.352 0.8t-0.8 0.32-0.8-0.32l-5.952-5.952h-4.672q-0.48 0-0.8-0.352t-0.352-0.8v-6.848q0-0.48 0.352-0.8t0.8-0.352h4.672l5.952-5.952q0.32-0.32 0.8-0.32t0.8 0.32 0.352 0.8z' - ], - loop: [ - '0 0 32 32', - 'M1.882 16.941c0 4.152 3.221 7.529 7.177 7.529v1.882c-4.996 0-9.060-4.222-9.060-9.412s4.064-9.412 9.060-9.412h7.96l-3.098-3.098 1.331-1.331 5.372 5.37-5.37 5.372-1.333-1.333 3.1-3.098h-7.962c-3.957 0-7.177 3.377-7.177 7.529zM22.94 7.529v1.882c3.957 0 7.177 3.377 7.177 7.529s-3.221 7.529-7.177 7.529h-7.962l3.098-3.098-1.331-1.331-5.37 5.37 5.372 5.372 1.331-1.331-3.1-3.1h7.96c4.998 0 9.062-4.222 9.062-9.412s-4.064-9.412-9.060-9.412z' - ], - full: [ - '0 0 32 33', - 'M6.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v4h4c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333zM30.667 28h-5.333c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h4v-4c0-0.8 0.533-1.333 1.333-1.333s1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM30.667 12c-0.8 0-1.333-0.533-1.333-1.333v-4h-4c-0.8 0-1.333-0.533-1.333-1.333s0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333v5.333c0 0.8-0.533 1.333-1.333 1.333zM1.333 12c-0.8 0-1.333-0.533-1.333-1.333v-5.333c0-0.8 0.533-1.333 1.333-1.333h5.333c0.8 0 1.333 0.533 1.333 1.333s-0.533 1.333-1.333 1.333h-4v4c0 0.8-0.533 1.333-1.333 1.333z' - ], - 'full-in': [ - '0 0 32 33', - 'M24.965 24.38h-18.132c-1.366 0-2.478-1.113-2.478-2.478v-11.806c0-1.364 1.111-2.478 2.478-2.478h18.132c1.366 0 2.478 1.113 2.478 2.478v11.806c0 1.364-1.11 2.478-2.478 2.478zM6.833 10.097v11.806h18.134l-0.002-11.806h-18.132zM2.478 28.928h5.952c0.684 0 1.238-0.554 1.238-1.239 0-0.684-0.554-1.238-1.238-1.238h-5.952v-5.802c0-0.684-0.554-1.239-1.238-1.239s-1.239 0.556-1.239 1.239v5.802c0 1.365 1.111 2.478 2.478 2.478zM30.761 19.412c-0.684 0-1.238 0.554-1.238 1.238v5.801h-5.951c-0.686 0-1.239 0.554-1.239 1.238 0 0.686 0.554 1.239 1.239 1.239h5.951c1.366 0 2.478-1.111 2.478-2.478v-5.801c0-0.683-0.554-1.238-1.239-1.238zM0 5.55v5.802c0 0.683 0.554 1.238 1.238 1.238s1.238-0.555 1.238-1.238v-5.802h5.952c0.684 0 1.238-0.554 1.238-1.238s-0.554-1.238-1.238-1.238h-5.951c-1.366-0.001-2.478 1.111-2.478 2.476zM32 11.35v-5.801c0-1.365-1.11-2.478-2.478-2.478h-5.951c-0.686 0-1.239 0.554-1.239 1.238s0.554 1.238 1.239 1.238h5.951v5.801c0 0.683 0.554 1.237 1.238 1.237 0.686 0.002 1.239-0.553 1.239-1.236z' - ], - setting: [ - '0 0 32 28', - 'M28.633 17.104c0.035 0.21 0.026 0.463-0.026 0.76s-0.14 0.598-0.262 0.904c-0.122 0.306-0.271 0.581-0.445 0.825s-0.367 0.419-0.576 0.524c-0.209 0.105-0.393 0.157-0.55 0.157s-0.332-0.035-0.524-0.105c-0.175-0.052-0.393-0.1-0.655-0.144s-0.528-0.052-0.799-0.026c-0.271 0.026-0.541 0.083-0.812 0.17s-0.502 0.236-0.694 0.445c-0.419 0.437-0.664 0.934-0.734 1.493s0.009 1.092 0.236 1.598c0.175 0.349 0.148 0.699-0.079 1.048-0.105 0.14-0.271 0.284-0.498 0.432s-0.476 0.284-0.747 0.406-0.555 0.218-0.851 0.288c-0.297 0.070-0.559 0.105-0.786 0.105-0.157 0-0.306-0.061-0.445-0.183s-0.236-0.253-0.288-0.393h-0.026c-0.192-0.541-0.52-1.009-0.982-1.402s-1-0.589-1.611-0.589c-0.594 0-1.131 0.197-1.611 0.589s-0.816 0.851-1.009 1.375c-0.087 0.21-0.218 0.362-0.393 0.458s-0.367 0.144-0.576 0.144c-0.244 0-0.52-0.044-0.825-0.131s-0.611-0.197-0.917-0.327c-0.306-0.131-0.581-0.284-0.825-0.458s-0.428-0.349-0.55-0.524c-0.087-0.122-0.135-0.266-0.144-0.432s0.057-0.397 0.197-0.694c0.192-0.402 0.266-0.86 0.223-1.375s-0.266-0.991-0.668-1.428c-0.244-0.262-0.541-0.432-0.891-0.511s-0.681-0.109-0.995-0.092c-0.367 0.017-0.742 0.087-1.127 0.21-0.244 0.070-0.489 0.052-0.734-0.052-0.192-0.070-0.371-0.231-0.537-0.485s-0.314-0.533-0.445-0.838c-0.131-0.306-0.231-0.62-0.301-0.943s-0.087-0.59-0.052-0.799c0.052-0.384 0.227-0.629 0.524-0.734 0.524-0.21 0.995-0.555 1.415-1.035s0.629-1.017 0.629-1.611c0-0.611-0.21-1.144-0.629-1.598s-0.891-0.786-1.415-0.996c-0.157-0.052-0.288-0.179-0.393-0.38s-0.157-0.406-0.157-0.616c0-0.227 0.035-0.48 0.105-0.76s0.162-0.55 0.275-0.812 0.244-0.502 0.393-0.72c0.148-0.218 0.31-0.38 0.485-0.485 0.14-0.087 0.275-0.122 0.406-0.105s0.275 0.052 0.432 0.105c0.524 0.21 1.070 0.275 1.637 0.197s1.070-0.327 1.506-0.747c0.21-0.209 0.362-0.467 0.458-0.773s0.157-0.607 0.183-0.904c0.026-0.297 0.026-0.568 0-0.812s-0.048-0.419-0.065-0.524c-0.035-0.105-0.066-0.227-0.092-0.367s-0.013-0.262 0.039-0.367c0.105-0.244 0.293-0.458 0.563-0.642s0.563-0.336 0.878-0.458c0.314-0.122 0.62-0.214 0.917-0.275s0.533-0.092 0.707-0.092c0.227 0 0.406 0.074 0.537 0.223s0.223 0.301 0.275 0.458c0.192 0.471 0.507 0.886 0.943 1.244s0.952 0.537 1.546 0.537c0.611 0 1.153-0.17 1.624-0.511s0.803-0.773 0.996-1.297c0.070-0.14 0.179-0.284 0.327-0.432s0.301-0.223 0.458-0.223c0.244 0 0.511 0.035 0.799 0.105s0.572 0.166 0.851 0.288c0.279 0.122 0.537 0.279 0.773 0.472s0.423 0.402 0.563 0.629c0.087 0.14 0.113 0.293 0.079 0.458s-0.070 0.284-0.105 0.354c-0.227 0.506-0.297 1.039-0.21 1.598s0.341 1.048 0.76 1.467c0.419 0.419 0.934 0.651 1.546 0.694s1.179-0.057 1.703-0.301c0.14-0.087 0.31-0.122 0.511-0.105s0.371 0.096 0.511 0.236c0.262 0.244 0.493 0.616 0.694 1.113s0.336 1 0.406 1.506c0.035 0.297-0.013 0.528-0.144 0.694s-0.266 0.275-0.406 0.327c-0.542 0.192-1.004 0.528-1.388 1.009s-0.576 1.026-0.576 1.637c0 0.594 0.162 1.113 0.485 1.559s0.747 0.764 1.27 0.956c0.122 0.070 0.227 0.14 0.314 0.21 0.192 0.157 0.323 0.358 0.393 0.602v0zM16.451 19.462c0.786 0 1.528-0.149 2.227-0.445s1.305-0.707 1.821-1.231c0.515-0.524 0.921-1.131 1.218-1.821s0.445-1.428 0.445-2.214c0-0.786-0.148-1.524-0.445-2.214s-0.703-1.292-1.218-1.808c-0.515-0.515-1.122-0.921-1.821-1.218s-1.441-0.445-2.227-0.445c-0.786 0-1.524 0.148-2.214 0.445s-1.292 0.703-1.808 1.218c-0.515 0.515-0.921 1.118-1.218 1.808s-0.445 1.428-0.445 2.214c0 0.786 0.149 1.524 0.445 2.214s0.703 1.297 1.218 1.821c0.515 0.524 1.118 0.934 1.808 1.231s1.428 0.445 2.214 0.445v0z' - ], - right: [ - '0 0 32 32', - 'M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z' - ], - comment: [ - '0 0 32 32', - 'M27.128 0.38h-22.553c-2.336 0-4.229 1.825-4.229 4.076v16.273c0 2.251 1.893 4.076 4.229 4.076h4.229v-2.685h8.403l-8.784 8.072 1.566 1.44 7.429-6.827h9.71c2.335 0 4.229-1.825 4.229-4.076v-16.273c0-2.252-1.894-4.076-4.229-4.076zM28.538 19.403c0 1.5-1.262 2.717-2.819 2.717h-8.36l-0.076-0.070-0.076 0.070h-11.223c-1.557 0-2.819-1.217-2.819-2.717v-13.589c0-1.501 1.262-2.718 2.819-2.718h19.734c1.557 0 2.819-0.141 2.819 1.359v14.947zM9.206 10.557c-1.222 0-2.215 0.911-2.215 2.036s0.992 2.035 2.215 2.035c1.224 0 2.216-0.911 2.216-2.035s-0.992-2.036-2.216-2.036zM22.496 10.557c-1.224 0-2.215 0.911-2.215 2.036s0.991 2.035 2.215 2.035c1.224 0 2.215-0.911 2.215-2.035s-0.991-2.036-2.215-2.036zM15.852 10.557c-1.224 0-2.215 0.911-2.215 2.036s0.991 2.035 2.215 2.035c1.222 0 2.215-0.911 2.215-2.035s-0.992-2.036-2.215-2.036z' - ], - 'comment-off': [ - '0 0 32 32', - 'M27.090 0.131h-22.731c-2.354 0-4.262 1.839-4.262 4.109v16.401c0 2.269 1.908 4.109 4.262 4.109h4.262v-2.706h8.469l-8.853 8.135 1.579 1.451 7.487-6.88h9.787c2.353 0 4.262-1.84 4.262-4.109v-16.401c0-2.27-1.909-4.109-4.262-4.109v0zM28.511 19.304c0 1.512-1.272 2.738-2.841 2.738h-8.425l-0.076-0.070-0.076 0.070h-11.311c-1.569 0-2.841-1.226-2.841-2.738v-13.696c0-1.513 1.272-2.739 2.841-2.739h19.889c1.569 0 2.841-0.142 2.841 1.37v15.064z' - ], - send: [ - '0 0 32 32', - 'M13.725 30l3.9-5.325-3.9-1.125v6.45zM0 17.5l11.050 3.35 13.6-11.55-10.55 12.425 11.8 3.65 6.1-23.375-32 15.5z' - ], - pallette: [ - '0 0 32 32', - 'M19.357 2.88c1.749 0 3.366 0.316 4.851 0.946 1.485 0.632 2.768 1.474 3.845 2.533s1.922 2.279 2.532 3.661c0.611 1.383 0.915 2.829 0.915 4.334 0 1.425-0.304 2.847-0.915 4.271-0.611 1.425-1.587 2.767-2.928 4.028-0.855 0.813-1.811 1.607-2.869 2.38s-2.136 1.465-3.233 2.075c-1.099 0.61-2.198 1.098-3.296 1.465-1.098 0.366-2.115 0.549-3.051 0.549-1.343 0-2.441-0.438-3.296-1.311-0.854-0.876-1.281-2.41-1.281-4.608 0-0.366 0.020-0.773 0.060-1.221s0.062-0.895 0.062-1.343c0-0.773-0.183-1.353-0.55-1.738-0.366-0.387-0.793-0.58-1.281-0.58-0.652 0-1.21 0.295-1.678 0.886s-0.926 1.23-1.373 1.921c-0.447 0.693-0.905 1.334-1.372 1.923s-1.028 0.886-1.679 0.886c-0.529 0-1.048-0.427-1.556-1.282s-0.763-2.259-0.763-4.212c0-2.197 0.529-4.241 1.587-6.133s2.462-3.529 4.21-4.912c1.75-1.383 3.762-2.471 6.041-3.264 2.277-0.796 4.617-1.212 7.018-1.253zM7.334 15.817c0.569 0 1.047-0.204 1.434-0.611s0.579-0.875 0.579-1.404c0-0.569-0.193-1.047-0.579-1.434s-0.864-0.579-1.434-0.579c-0.529 0-0.987 0.193-1.373 0.579s-0.58 0.864-0.58 1.434c0 0.53 0.194 0.998 0.58 1.404 0.388 0.407 0.845 0.611 1.373 0.611zM12.216 11.79c0.691 0 1.292-0.254 1.8-0.763s0.762-1.107 0.762-1.8c0-0.732-0.255-1.343-0.762-1.831-0.509-0.489-1.109-0.732-1.8-0.732-0.732 0-1.342 0.244-1.831 0.732-0.488 0.488-0.732 1.098-0.732 1.831 0 0.693 0.244 1.292 0.732 1.8s1.099 0.763 1.831 0.763zM16.366 25.947c0.692 0 1.282-0.214 1.77-0.64s0.732-0.987 0.732-1.678-0.244-1.261-0.732-1.709c-0.489-0.448-1.078-0.671-1.77-0.671-0.65 0-1.21 0.223-1.678 0.671s-0.702 1.018-0.702 1.709c0 0.692 0.234 1.25 0.702 1.678s1.027 0.64 1.678 0.64zM19.113 9.592c0.651 0 1.129-0.203 1.433-0.611 0.305-0.406 0.459-0.874 0.459-1.404 0-0.488-0.154-0.947-0.459-1.373-0.304-0.427-0.782-0.641-1.433-0.641-0.529 0-1.008 0.193-1.434 0.58s-0.64 0.865-0.64 1.434c0 0.571 0.213 1.049 0.64 1.434 0.427 0.389 0.905 0.581 1.434 0.581zM24.848 12.826c0.57 0 1.067-0.213 1.495-0.64 0.427-0.427 0.64-0.947 0.64-1.556 0-0.57-0.214-1.068-0.64-1.495-0.428-0.427-0.927-0.64-1.495-0.64-0.611 0-1.129 0.213-1.555 0.64-0.428 0.427-0.642 0.926-0.642 1.495 0 0.611 0.213 1.129 0.642 1.556s0.947 0.64 1.555 0.64z' - ], - camera: [ - '0 0 32 32', - 'M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z' - ], - subtitle: [ - '0 0 32 32', - 'M26.667 5.333h-21.333c-0 0-0.001 0-0.001 0-1.472 0-2.666 1.194-2.666 2.666 0 0 0 0.001 0 0.001v-0 16c0 0 0 0.001 0 0.001 0 1.472 1.194 2.666 2.666 2.666 0 0 0.001 0 0.001 0h21.333c0 0 0.001 0 0.001 0 1.472 0 2.666-1.194 2.666-2.666 0-0 0-0.001 0-0.001v0-16c0-0 0-0.001 0-0.001 0-1.472-1.194-2.666-2.666-2.666-0 0-0.001 0-0.001 0h0zM5.333 16h5.333v2.667h-5.333v-2.667zM18.667 24h-13.333v-2.667h13.333v2.667zM26.667 24h-5.333v-2.667h5.333v2.667zM26.667 18.667h-13.333v-2.667h13.333v2.667z' - ] - }, - iconsColor: '#ffffff', contextmenu: [], mutex: true }; @@ -116,10 +48,6 @@ export default (options) => { options.lang = options.lang.toLowerCase(); } - if (options.icons) { - options.icons = objectAssign({}, defaultOption.icons, options.icons); - } - options.contextmenu = options.contextmenu.concat([ { text: 'Video info', diff --git a/src/js/player.js b/src/js/player.js index 66aac2905..a1671169f 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -4,7 +4,7 @@ import utils from './utils'; import handleOption from './options'; import i18n from './i18n'; import Template from './template'; -import SvgCollection from './svg'; +import Icons from './icons'; import Danmaku from './danmaku'; import Events from './events'; import FullScreen from './fullscreen'; @@ -39,7 +39,6 @@ class DPlayer { this.quality = this.options.video.quality[this.options.video.defaultQuality]; } this.tran = new i18n(this.options.lang).tran; - this.icons = new SvgCollection(this.options); this.events = new Events(); this.user = new User(this); this.container = this.options.container; @@ -64,7 +63,6 @@ class DPlayer { options: this.options, index: index, tran: this.tran, - icons: this.icons }); this.video = this.template.video; @@ -172,10 +170,10 @@ class DPlayer { play () { this.paused = false; if (this.video.paused) { - this.bezel.switch(this.icons.get('play')); + this.bezel.switch(Icons.play); } - this.template.playButton.innerHTML = this.icons.get('pause'); + this.template.playButton.innerHTML = Icons.pause; const playedPromise = Promise.resolve(this.video.play()); playedPromise.catch(() => { @@ -206,11 +204,11 @@ class DPlayer { this.container.classList.remove('dplayer-loading'); if (!this.video.paused) { - this.bezel.switch(this.icons.get('pause')); + this.bezel.switch(Icons.pause); } this.ended = false; - this.template.playButton.innerHTML = this.icons.get('play'); + this.template.playButton.innerHTML = Icons.play; this.video.pause(); this.time.disable('loading'); this.time.disable('progress'); @@ -223,13 +221,13 @@ class DPlayer { switchVolumeIcon () { if (this.volume() >= 0.95) { - this.template.volumeIcon.innerHTML = this.icons.get('volume-up'); + this.template.volumeIcon.innerHTML = Icons.volumeUp; } else if (this.volume() > 0) { - this.template.volumeIcon.innerHTML = this.icons.get('volume-down'); + this.template.volumeIcon.innerHTML = Icons.volumeDown; } else { - this.template.volumeIcon.innerHTML = this.icons.get('volume-off'); + this.template.volumeIcon.innerHTML = Icons.volumeOff; } } diff --git a/src/js/svg.js b/src/js/svg.js deleted file mode 100644 index 1e90b4c5e..000000000 --- a/src/js/svg.js +++ /dev/null @@ -1,24 +0,0 @@ -/** -* SVG used by DPlayer -*/ - -class SvgSource { - constructor (options) { - this.icons = options.icons; - this.iconColor = options.iconsColor; - } - - get (type) { - // Some SVG icons don't change icon size using viewBox. Ex.: Material Icons - // To fix these cases a optional index was added to icon object when change icon - // size is necessary - - return ` - - - - `; - } -} - -export default SvgSource; diff --git a/src/js/template.js b/src/js/template.js index 9d5ce27d7..5f708f55e 100644 --- a/src/js/template.js +++ b/src/js/template.js @@ -1,15 +1,16 @@ +import Icons from './icons'; + class Template { constructor (options) { this.container = options.container; this.options = options.options; this.index = options.index; this.tran = options.tran; - this.icons = options.icons; this.init(); } init () { - this.container.innerHTML = this.tpl(this.options, this.index, this.tran, this.icons); + this.container.innerHTML = this.tpl(this.options, this.index, this.tran); this.volumeBar = this.container.querySelector('.dplayer-volume-bar-inner'); this.volumeBarWrap = this.container.querySelector('.dplayer-volume-bar'); @@ -49,9 +50,9 @@ class Template { this.commentButton = this.container.querySelector('.dplayer-comment-icon'); this.commentSettingBox = this.container.querySelector('.dplayer-comment-setting-box'); this.commentSettingButton = this.container.querySelector('.dplayer-comment-setting-icon'); - this.commentSettingFill = this.container.querySelector('.dplayer-comment-setting-icon .dplayer-fill'); + this.commentSettingFill = this.container.querySelector('.dplayer-comment-setting-icon path'); this.commentSendButton = this.container.querySelector('.dplayer-send-icon'); - this.commentSendFill = this.container.querySelector('.dplayer-send-icon .dplayer-fill'); + this.commentSendFill = this.container.querySelector('.dplayer-send-icon path'); this.commentColorSettingBox = this.container.querySelector('.dplayer-comment-setting-color'); this.browserFullButton = this.container.querySelector('.dplayer-full-icon'); this.webFullButton = this.container.querySelector('.dplayer-full-in-icon'); @@ -79,7 +80,7 @@ class Template { this.infoDanmakuAmount = this.container.querySelector('.dplayer-info-panel-item-danmaku-amount .dplayer-info-panel-item-data'); } - tpl (options, index, tran, icons) { + tpl (options, index, tran) { return `
@@ -94,41 +95,14 @@ class Template {
${options.danmaku ? `${tran('Danmaku is loading')}` : ``} - - - - - - - - - - - - - - - - - - - - - - - - - - - - + ${Icons.loading}
@@ -176,16 +150,16 @@ class Template {
@@ -209,31 +183,31 @@ class Template { ` : ``} ${options.screenshot ? ` - ${icons.get('camera')} + ${Icons.camera} ` : ``}
${options.subtitle ? `
` : ``}
${tran('Speed')}
- ${icons.get('right')} + ${Icons.right}
@@ -292,10 +266,10 @@ class Template {
diff --git a/webpack/dev.config.js b/webpack/dev.config.js index 58d4b8c29..814374115 100644 --- a/webpack/dev.config.js +++ b/webpack/dev.config.js @@ -75,6 +75,10 @@ module.exports = { options: { 'limit': 40000 } + }, + { + test: /\.svg$/, + loader: 'svg-inline-loader' } ] }, diff --git a/webpack/prod.config.js b/webpack/prod.config.js index bdb89e677..7d12ffeea 100644 --- a/webpack/prod.config.js +++ b/webpack/prod.config.js @@ -83,6 +83,10 @@ module.exports = { options: { 'limit': 40000 } + }, + { + test: /\.svg$/, + loader: 'svg-inline-loader' } ] }, diff --git a/yarn.lock b/yarn.lock index 29d0e29c8..3aa0ccd93 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3242,7 +3242,7 @@ loader-runner@^2.3.0: version "2.3.0" resolved "http://registry.npm.taobao.org/loader-runner/download/loader-runner-2.3.0.tgz#f482aea82d543e07921700d5a46ef26fdac6b8a2" -loader-utils@^0.2.6: +loader-utils@^0.2.11, loader-utils@^0.2.6: version "0.2.17" resolved "http://registry.npm.taobao.org/loader-utils/download/loader-utils-0.2.17.tgz#f86e6374d43205a6e6c60e9196f17c0299bfb348" dependencies: @@ -3717,7 +3717,7 @@ oauth-sign@~0.8.1, oauth-sign@~0.8.2: version "0.8.2" resolved "http://registry.npm.taobao.org/oauth-sign/download/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43" -object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: +object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1: version "4.1.1" resolved "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863" @@ -4921,6 +4921,10 @@ signal-exit@^3.0.0, signal-exit@^3.0.2: version "3.0.2" resolved "http://registry.npm.taobao.org/signal-exit/download/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" +simple-html-tokenizer@^0.1.1: + version "0.1.1" + resolved "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz#05c2eec579ffffe145a030ac26cfea61b980fabe" + slash@^1.0.0: version "1.0.0" resolved "http://registry.npm.taobao.org/slash/download/slash-1.0.0.tgz#c41f2f6c39fc16d1cd17ad4b5d896114ae470d55" @@ -5231,6 +5235,14 @@ supports-color@^5.1.0: dependencies: has-flag "^2.0.0" +svg-inline-loader@0.8.0: + version "0.8.0" + resolved "https://registry.npmjs.org/svg-inline-loader/-/svg-inline-loader-0.8.0.tgz#7e9d905d80d0b4e68d2df21afcd08ee9e9a3ea6e" + dependencies: + loader-utils "^0.2.11" + object-assign "^4.0.1" + simple-html-tokenizer "^0.1.1" + svgo@^0.7.0: version "0.7.2" resolved "http://registry.npm.taobao.org/svgo/download/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"