55 lines
2.2 KiB
HTML
55 lines
2.2 KiB
HTML
<script type="application/javascript" src="{{ url_for('static', filename='js/plugins/media/controls.js') }}"></script>
|
|
|
|
<script type="text/x-template" id="tmpl-media-controls">
|
|
<div class="controls">
|
|
<div class="col-3 item-container">
|
|
<div class="item-info">
|
|
<span v-text="status.title"
|
|
@click="bus.$emit('info-load', status.url)"
|
|
v-if="status.title"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-6 playback-controls">
|
|
<div class="row buttons">
|
|
<button v-if="status.state === 'pause'" @click="bus.$emit('pause')">
|
|
<i class="fa fa-play"></i>
|
|
</button>
|
|
<button v-if="status.state === 'play'" @click="bus.$emit('pause')">
|
|
<i class="fa fa-pause"></i>
|
|
</button>
|
|
<button v-if="status.state === 'play' || status.state === 'pause'" @click="bus.$emit('stop')">
|
|
<i class="fa fa-stop"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="row position">
|
|
<span class="elapsed-time" v-text="status.position ? convertTime(status.position) : '-:--'"></span>
|
|
<input type="range"
|
|
v-model="status.position"
|
|
@input="bus.$emit('seek', $event.target.value)"
|
|
class="slider seek-slider"
|
|
:disabled="!status.seekable"
|
|
min="0"
|
|
:max="status.duration || 0">
|
|
<span class="total-time" v-text="status.duration ? convertTime(status.duration) : '-:--'"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-3 pull-right">
|
|
<div class="row volume-container">
|
|
<button disabled>
|
|
<i class="fa fa-volume-up"></i>
|
|
</button>
|
|
<input type="range"
|
|
v-model="status.volume"
|
|
@input="bus.$emit('volume', $event.target.value)"
|
|
class="slider volume-slider"
|
|
min="0"
|
|
:max="status.volume_max || 100">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</script>
|
|
|