play/pause: ugly but works
This commit is contained in:
parent
aef9a5ad09
commit
a412cfc7ca
2 changed files with 21 additions and 107 deletions
|
|
@ -1,88 +0,0 @@
|
||||||
<template >
|
|
||||||
<div class='playStopButton' @click='togglePlay' :class='{ active: status === "play", loading }'>
|
|
||||||
<!-- //- <svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill='white' xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" xml:space="preserve">
|
|
||||||
//- <circle id='circle' cx="50%" cy="50%" r="5%" fill/>
|
|
||||||
//- </svg> -->
|
|
||||||
<div id='stop'>
|
|
||||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
|
|
||||||
<g><g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"><path d="M3598.3,1507.4l-46.2-48.3v-1354v-1356.1l48.3-44.1l48.3-46.2h1354h1356.1l44.1,48.3l46.2,48.3v1354v1356l-48.3,44.1l-48.3,46.2h-1354h-1356L3598.3,1507.4z"/></g></g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div id='play'>
|
|
||||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
|
|
||||||
<g><g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"><path d="M3885.7,2036.4c-29.2-29.2-33.4-229.6-33.4-1888.8c0-1241.8,6.3-1872.1,20.9-1899.2c27.1-48,104.4-52.2,194.1-6.3C4286.4-1645.2,7143.6,14,7166.6,41.2c33.4,41.7,33.4,154.4-2.1,196.2c-20.9,27.1-2876,1686.3-3097.2,1799C3983.8,2078.1,3927.5,2078.1,3885.7,2036.4z"/></g></g>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
loading: false,
|
|
||||||
status: 'stop'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
play () {
|
|
||||||
this.status = 'play'
|
|
||||||
},
|
|
||||||
stop () {
|
|
||||||
this.status = 'stop'
|
|
||||||
},
|
|
||||||
togglePlay () {
|
|
||||||
this.status = this.status === 'play' ? 'stop' : 'play'
|
|
||||||
this.$emit(this.status)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
<style scoped>
|
|
||||||
.playStopButton {
|
|
||||||
width: 60px;
|
|
||||||
height: 60px;
|
|
||||||
margin: 5px 0px 5px 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playStopButton:focus {
|
|
||||||
outline:0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playStopButton.active #play {
|
|
||||||
transform: rotate( 90deg ) scale( 0 );
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playStopButton:not( .active ) #stop {
|
|
||||||
transform: rotate( -90deg ) scale( 0 );
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playStopButton svg {
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#play, #stop {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transition: all .35s ease-in-out;
|
|
||||||
position: absolute;
|
|
||||||
stroke: rgba(248, 113, 113, var(--tw-text-opacity));
|
|
||||||
fill:rgba(248, 113, 113, var(--tw-text-opacity));
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#circle {
|
|
||||||
fill: none;
|
|
||||||
stroke: red;
|
|
||||||
stroke-width: 3px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,31 +1,15 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="bg-gray-800 rounded-sm">
|
<f7-link @click="onPlay" v-if="status != 'playing'">Play</f7-link>
|
||||||
<div class="flex items-center space-x-3.5 sm:space-x-5 lg:space-x-3.5 xl:space-x-5">
|
<f7-link @click="onPause" v-else>Pause</f7-link>
|
||||||
<Button class='text-red-400' ref='button' @play='play' @stop='stop' />
|
|
||||||
<div class="min-w-0 flex-auto space-y-0.5">
|
|
||||||
<!-- //- <p class="text-white text-sm sm:text-base lg:text-sm xl:text-base font-semibold uppercase">
|
|
||||||
//- <abbr title="Episode">Ep.</abbr> 128
|
|
||||||
//- </p> -->
|
|
||||||
<h2 class="text-white text-base sm:text-xl lg:text-base xl:text-xl font-semibold truncate" v-text='title'>
|
|
||||||
</h2>
|
|
||||||
<!-- //- <p class="text-gray-400 text-base sm:text-lg lg:text-base xl:text-lg font-medium">
|
|
||||||
//- Full Stack Radio
|
|
||||||
//- </p> -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import eventBus from '../js/eventBus'
|
import eventBus from '../js/eventBus'
|
||||||
|
|
||||||
import { Howl } from 'howler'
|
import { Howl } from 'howler'
|
||||||
import Button from './Button.vue'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { Button },
|
components: { },
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
loading: true,
|
loading: true,
|
||||||
|
|
@ -44,9 +28,27 @@ export default {
|
||||||
const t = this
|
const t = this
|
||||||
eventBus.$on('play:now', function (url) {
|
eventBus.$on('play:now', function (url) {
|
||||||
t.play(url)
|
t.play(url)
|
||||||
|
t.status = 'playing'
|
||||||
|
})
|
||||||
|
eventBus.$on('play:pause', function() {
|
||||||
|
if(t.player) {
|
||||||
|
t.player.pause()
|
||||||
|
}
|
||||||
|
t.status = 'pause'
|
||||||
|
})
|
||||||
|
eventBus.$on('play:resume', function() {
|
||||||
|
if(t.player) {
|
||||||
|
t.player.play()
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
onPlay() {
|
||||||
|
eventBus.$emit('play:resume')
|
||||||
|
},
|
||||||
|
onPause() {
|
||||||
|
eventBus.$emit('play:pause')
|
||||||
|
},
|
||||||
play (url) {
|
play (url) {
|
||||||
let newPlayer = new Howl({
|
let newPlayer = new Howl({
|
||||||
autoSuspend: false,
|
autoSuspend: false,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue