101 lines
1.9 KiB
Vue
101 lines
1.9 KiB
Vue
<template>
|
|
<div class="media-container">
|
|
<div class="view-container">
|
|
<slot />
|
|
</div>
|
|
<div class="controls-container">
|
|
<Controls :buttons="buttons"
|
|
:image="image"
|
|
:status="status"
|
|
:track="track"
|
|
@consume="$emit('consume', $event)"
|
|
@mute="$emit('mute')"
|
|
@next="$emit('next')"
|
|
@pause="$emit('pause', $event)"
|
|
@play="$emit('play', $event)"
|
|
@previous="$emit('previous')"
|
|
@random="$emit('random', $event)"
|
|
@repeat="$emit('repeat', $event)"
|
|
@search="$emit('search', $event)"
|
|
@seek="$emit('seek', $event)"
|
|
@set-volume="$emit('set-volume', $event)"
|
|
@stop="$emit('stop')"
|
|
@unmute="$emit('unmute')" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Controls from "@/components/Media/Controls";
|
|
|
|
export default {
|
|
name: "View",
|
|
components: {Controls},
|
|
emits: [
|
|
'consume',
|
|
'mute',
|
|
'next',
|
|
'pause',
|
|
'play',
|
|
'previous',
|
|
'random',
|
|
'repeat',
|
|
'search',
|
|
'seek',
|
|
'set-volume',
|
|
'stop',
|
|
'unmute',
|
|
],
|
|
|
|
props: {
|
|
pluginName: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
|
|
status: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
|
|
track: {
|
|
type: Object,
|
|
},
|
|
|
|
image: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
|
|
buttons: {
|
|
type: Object,
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import 'vars.scss';
|
|
|
|
.media-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
|
|
.view-container {
|
|
height: 100%;
|
|
}
|
|
|
|
.controls-container {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
border-top: $default-border-2;
|
|
background: $default-bg-2;
|
|
box-shadow: $border-shadow-top;
|
|
}
|
|
}
|
|
</style>
|