omim - update player, using svg icon
This commit is contained in:
dntzhang
parent
a0cb7847ef
commit
703a60231b
File diff suppressed because one or more lines are too long
|
|
@ -1,14 +1,7 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<style>
|
||||
m-button{
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://at.alicdn.com/t/font_836948_6lbb2iu59.css">
|
||||
</head>
|
||||
<head></head>
|
||||
|
||||
<body>
|
||||
<script src="bundle.js"></script>
|
||||
|
|
|
|||
|
|
@ -1,26 +0,0 @@
|
|||
|
||||
.epicon {
|
||||
font-family:"epicon" !important;
|
||||
font-size:16px;
|
||||
font-style:normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.ep-full:before { content: "\e609"; }
|
||||
|
||||
.ep-video:before { content: "\e608"; }
|
||||
|
||||
.ep-full-web:before { content: "\e601"; }
|
||||
|
||||
.ep-pause:before { content: "\e602"; }
|
||||
|
||||
.ep-play:before { content: "\e603"; }
|
||||
|
||||
.ep-setting:before { content: "\e604"; }
|
||||
|
||||
.ep-volume-off:before { content: "\e605"; }
|
||||
|
||||
.ep-volume-up:before { content: "\e606"; }
|
||||
|
||||
.ep-volume:before { content: "\e607"; }
|
||||
|
|
@ -6,11 +6,13 @@ video {
|
|||
font-size: 12px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.eplayer {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.controls {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
|
@ -21,6 +23,7 @@ video {
|
|||
transition: 0.3s ease-out;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: relative;
|
||||
bottom: 15px;
|
||||
|
|
@ -28,34 +31,46 @@ video {
|
|||
right: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.options {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.epicon {
|
||||
color: var(--icons, rgba(255, 255, 255, 0.6));
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.epicon {
|
||||
font-size: 18px;
|
||||
transition: 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.epicon:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.time {
|
||||
position: relative;
|
||||
top: -2px;
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 25px;
|
||||
vertical-align: top;
|
||||
// position: relative;
|
||||
// top: -2px;
|
||||
}
|
||||
|
||||
.time b {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.line {
|
||||
padding: 0 1px;
|
||||
margin-bottom: -2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.line i {
|
||||
width: 4px;
|
||||
border-radius: 4px;
|
||||
|
|
@ -65,22 +80,27 @@ video {
|
|||
transform: scaleX(0.7);
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.line:hover i {
|
||||
height: 14px;
|
||||
background: var(--mdc-theme-primary, #6200ee);
|
||||
}
|
||||
|
||||
.active i {
|
||||
background: var(--mdc-theme-primary, #6200ee);
|
||||
}
|
||||
|
||||
.left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.bg,
|
||||
.current,
|
||||
.buffer {
|
||||
|
|
@ -89,16 +109,20 @@ video {
|
|||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bg {
|
||||
right: 0;
|
||||
background: var(--progress, rgba(255, 255, 255, 0.3));
|
||||
}
|
||||
|
||||
.current {
|
||||
background: var(--mdc-theme-primary, #6200ee);
|
||||
}
|
||||
|
||||
.buffer {
|
||||
background: var(--buffer, rgba(255, 255, 255, 0.5));
|
||||
}
|
||||
|
||||
.dot {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
|
|
@ -111,6 +135,7 @@ video {
|
|||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cycle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
|
|
@ -124,14 +149,17 @@ video {
|
|||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.playing {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
|
@ -140,6 +168,7 @@ video {
|
|||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
|
@ -153,6 +182,7 @@ video {
|
|||
border-radius: 50%;
|
||||
animation: loading 1s linear infinite;
|
||||
}
|
||||
|
||||
.ep-video {
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
|
|
@ -163,3 +193,21 @@ video {
|
|||
cursor: pointer;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.icon {
|
||||
cursor: pointer;
|
||||
color: var(--icons, rgba(255, 255, 255, 0.6));
|
||||
display: inline-block;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.ep-video {
|
||||
transform: scale(4);
|
||||
transform-origin: right bottom;
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import { tag, WeElement, h } from 'omi'
|
||||
import { domReady } from '../util/dom-ready'
|
||||
import * as css from './index.scss'
|
||||
import * as fontCss from './font.scss'
|
||||
import '../theme.ts'
|
||||
|
||||
interface Props {
|
||||
|
|
@ -11,23 +10,30 @@ interface Props {
|
|||
icon: string
|
||||
}
|
||||
|
||||
interface Data {}
|
||||
interface Data { }
|
||||
|
||||
@tag('m-player')
|
||||
export default class Player extends WeElement<Props, Data> {
|
||||
video: any
|
||||
|
||||
disX: any
|
||||
|
||||
timer: any
|
||||
|
||||
Hls: any
|
||||
static css = fontCss + css
|
||||
|
||||
static css = css
|
||||
|
||||
static propTypes = {
|
||||
src: String,
|
||||
type: String
|
||||
}
|
||||
|
||||
$(node) {
|
||||
let dom = this.shadowRoot.querySelectorAll(node)
|
||||
return dom.length > 1 ? dom : dom[0]
|
||||
}
|
||||
|
||||
dom() {
|
||||
this.video = this.$('video')
|
||||
this.video.volume = 0.5
|
||||
|
|
@ -61,6 +67,8 @@ export default class Player extends WeElement<Props, Data> {
|
|||
this.$('.mark').classList.add('loading')
|
||||
}
|
||||
|
||||
totalTime: string = '00:00'
|
||||
|
||||
canplay() {
|
||||
this.$('.mark').classList.remove('loading')
|
||||
this.$('.mark').classList.add('playing')
|
||||
|
|
@ -71,30 +79,44 @@ export default class Player extends WeElement<Props, Data> {
|
|||
}, 200)
|
||||
}
|
||||
this.$('.total').innerHTML = getTimeStr(this.video.duration)
|
||||
|
||||
this.totalTime = getTimeStr(this.video.duration)
|
||||
this.$('.total').innerHTML = this.totalTime
|
||||
}
|
||||
|
||||
isPlaying: boolean
|
||||
|
||||
play() {
|
||||
if (this.video.paused) {
|
||||
this.video.play()
|
||||
this.isPlaying = true
|
||||
this.$('.ep-video').style.display = 'none'
|
||||
this.$('.is-play').classList.replace('ep-play', 'ep-pause')
|
||||
} else {
|
||||
this.video.pause()
|
||||
this.isPlaying = false
|
||||
this.$('.ep-video').style.display = 'block'
|
||||
this.$('.is-play').classList.replace('ep-pause', 'ep-play')
|
||||
}
|
||||
|
||||
this.update()
|
||||
}
|
||||
|
||||
muted: boolean = false
|
||||
|
||||
volume() {
|
||||
if (this.video.muted) {
|
||||
this.video.muted = false
|
||||
|
||||
this.muted = false
|
||||
setVolume(this.video.volume * 10, this.$('.line'))
|
||||
this.$('.is-volume').classList.replace('ep-volume-off', 'ep-volume')
|
||||
|
||||
|
||||
} else {
|
||||
this.muted = true
|
||||
this.video.muted = true
|
||||
setVolume(0, this.$('.line'))
|
||||
this.$('.is-volume').classList.replace('ep-volume', 'ep-volume-off')
|
||||
}
|
||||
|
||||
this.update()
|
||||
}
|
||||
|
||||
updating() {
|
||||
|
|
@ -178,7 +200,8 @@ export default class Player extends WeElement<Props, Data> {
|
|||
}
|
||||
|
||||
ended() {
|
||||
this.$('.is-play').classList.replace('ep-pause', 'ep-play')
|
||||
this.isPlaying = false
|
||||
this.update()
|
||||
}
|
||||
|
||||
full() {
|
||||
|
|
@ -219,13 +242,17 @@ export default class Player extends WeElement<Props, Data> {
|
|||
</div>
|
||||
<div class="options">
|
||||
<div class="left">
|
||||
<i class="epicon ep-play is-play" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class='is-play icon' width="24" height="24" viewBox="0 0 24 24">
|
||||
<path d={this.isPlaying ? "M6 19h4V5H6v14zm8-14v14h4V5h-4z" : "M8 5v14l11-7z"} fill="currentColor" />
|
||||
<path d="M0 0h24v24H0z" fill="none" />
|
||||
</svg>
|
||||
|
||||
<span class="time">
|
||||
<b class="now">00:00</b> / <b class="total">00:00</b>
|
||||
<b class="now">00:00</b> / <b class="total">{this.totalTime}</b>
|
||||
</span>
|
||||
</div>
|
||||
<div class="right">
|
||||
<i class="epicon ep-volume is-volume" />
|
||||
<svg class="is-volume icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d={!this.muted ? "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" : "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"} /><path d="M0 0h24v24H0z" fill="none" /></svg>
|
||||
<span class="line">
|
||||
<i />
|
||||
</span>
|
||||
|
|
@ -256,11 +283,11 @@ export default class Player extends WeElement<Props, Data> {
|
|||
<span class="line">
|
||||
<i />
|
||||
</span>
|
||||
<i class="epicon ep-full" />
|
||||
<svg class="ep-full icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none" /><path fill="currentColor" d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" /></svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="epicon ep-video" />
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="ep-video icon" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none" /><path fill="currentColor" d="M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z" /></svg>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue