revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

[media UI] Wrapped the file browser into a MediaBrowser component.

Browse source 
This will make it easier to support multiple media collection providers
other than local files.
This commit is contained in:
Fabio Manganiello 2023-11-12 15:54:27 +01:00
parent 6dfe2324c1
commit d4b519a572
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 88 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
platypush/backend/http/webapp/src/components/panels/Media/Browser.vue Normal file
View file

@ -0,0 +1,86 @@
<template>
<keep-alive>
<div class="media-browser">
<Loading v-if="loading" />
<div class="media-index grid" v-else-if="!collection">
<div class="item" @click="collection = 'files'">
<div class="icon">
<i class="fas fa-folder"></i>
</div>
<div class="name">
Files
</div>
</div>
</div>
<div class="media-browser fade-in" v-else>
<Browser :is-media="true"
:filter="filter"
:has-back="true"
@back="collection = null"
@path-change="$emit('path-change', $event)"
@play="$emit('play', $event)"
v-if="collection === 'files'" />
</div>
</div>
</keep-alive>
</template>
<script>
import Browser from "@/components/File/Browser";
import Loading from "@/components/Loading";
export default {
emits: ['path-change', 'play'],
components: {
Browser,
Loading,
},
props: {
filter: {
type: String,
default: '',
},
},
data() {
return {
loading: false,
collection: null,
}
},
}
</script>
<style lang="scss" scoped>
.media-browser {
height: 100%;
.item {
height: 100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: $default-border-2;
cursor: pointer;
&:hover {
background: $hover-bg;
}
.icon {
height: 60%;
display: inline-flex;
justify-content: center;
opacity: 0.5;
i {
font-size: 40px;
}
}
}
}
</style>

6
platypush/backend/http/webapp/src/components/panels/Media/Index.vue
View file

@ -48,9 +48,7 @@
@play="play"
v-else-if="selectedView === 'torrents'" />
<Browser :plugin-name="torrentPlugin"
:is-media="true"
:filter="browserFilter"
<Browser :filter="browserFilter"
@path-change="browserFilter = ''"
@play="play($event)"
v-else-if="selectedView === 'browser'" />
@ -84,7 +82,7 @@ import Loading from "@/components/Loading";
import Modal from "@/components/Modal";
import Utils from "@/Utils";
import Browser from "@/components/File/Browser";
import Browser from "@/components/panels/Media/Browser";
import Header from "@/components/panels/Media/Header";
import MediaUtils from "@/components/Media/Utils";
import MediaView from "@/components/Media/View";