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

Merge pull request 'New YouTube UI features' (#411) from 391/improve-youtube-support into master

Browse source 
Reviewed-on: platypush/platypush#411

Closes: #391
This commit is contained in:
Fabio Manganiello 2024-07-16 03:58:37 +02:00
commit 484959a153
31 changed files with 2087 additions and 211 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
platypush/backend/http/webapp/src/components/File/Browser.vue
View file

@ -134,6 +134,7 @@ export default {
try {
this.files = await this.request('file.list', {path: this.path})
this.$emit('path-change', this.path)
this.setUrlArgs({path: decodeURIComponent(this.path)})
} finally {
this.loading = false
}
@ -165,8 +166,16 @@ export default {
},
mounted() {
const args = this.getUrlArgs()
if (args.path)
this.path = args.path
this.refresh()
},
unmounted() {
this.setUrlArgs({path: null})
},
}
</script>

15
platypush/backend/http/webapp/src/components/elements/ConfirmDialog.vue
View file

@ -1,5 +1,5 @@
<template>
<Modal ref="modal" :title="title">
<Modal ref="modal" :title="title" @close="close">
<div class="dialog-content">
<slot />
</div>
@ -19,7 +19,7 @@
import Modal from "@/components/Modal";
export default {
emits: ['input', 'click', 'touch'],
emits: ['input', 'click', 'close', 'touch'],
components: {Modal},
props: {
title: {
@ -43,12 +43,21 @@ export default {
this.close()
},
show() {
open() {
this.$refs.modal.show()
},
close() {
this.$refs.modal.hide()
this.$emit('close')
},
show() {
this.open()
},
hide() {
this.close()
},
},
}

2
platypush/backend/http/webapp/src/components/elements/FloatingButton.vue
View file

@ -39,7 +39,7 @@ export default {
<style lang="scss" scoped>
.floating-btn {
position: fixed;
position: absolute;
bottom: 0;
right: 0;
margin: auto 1em 1em auto;

66
platypush/backend/http/webapp/src/components/elements/TextPrompt.vue
View file

@ -3,7 +3,7 @@
<form @submit.prevent="onConfirm">
<div class="dialog-content">
<slot />
<input type="text" ref="input" />
<input type="text" ref="input" v-model="value_" />
</div>
<div class="buttons">
@ -38,26 +38,82 @@ export default {
type: String,
default: "Cancel",
},
visible: {
type: Boolean,
default: false,
},
value: {
type: String,
default: "",
},
},
data() {
return {
value_: "",
visible_: false,
}
},
methods: {
onConfirm() {
this.$emit('input', this.$refs.input.value)
if (this.value_?.trim()?.length) {
this.$emit('input', this.value_)
}
this.close()
},
show() {
open() {
if (this.visible_)
return
this.value_ = this.value
this.$refs.modal.show()
this.visible_ = true
this.focus()
},
close() {
if (!this.visible_)
return
this.value_ = ""
this.$refs.modal.hide()
this.visible_ = false
},
show() {
this.open()
},
hide() {
this.close()
},
focus() {
this.$nextTick(() => {
this.$refs.input.focus()
})
},
},
watch: {
visible(val) {
if (val) {
this.open()
} else {
this.close()
}
},
},
mounted() {
this.visible_ = this.visible
this.value_ = this.value || ""
this.$nextTick(() => {
this.$refs.input.value = ""
this.$refs.input.focus()
})
},
@ -67,6 +123,8 @@ export default {
<style lang="scss" scoped>
:deep(.modal) {
.dialog-content {
display: flex;
flex-direction: column;
padding: 1em;
}

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

@ -23,24 +23,42 @@
<component
:is="mediaProvider"
:filter="filter"
@back="mediaProvider = null"
:selected-playlist="selectedPlaylist"
:selected-channel="selectedChannel"
@add-to-playlist="$emit('add-to-playlist', $event)"
@back="back"
@download="$emit('download', $event)"
@download-audio="$emit('download-audio', $event)"
@path-change="$emit('path-change', $event)"
@play="$emit('play', $event)" />
@play="$emit('play', $event)"
/>
</div>
</div>
</keep-alive>
</template>
<script>
import { defineAsyncComponent, shallowRef } from "vue";
import { defineAsyncComponent, ref } from "vue";
import Browser from "@/components/File/Browser";
import Loading from "@/components/Loading";
import Utils from "@/Utils";
import providersMetadata from "./Providers/meta.json";
export default {
emits: ['path-change', 'play'],
mixins: [Utils],
emits: [
'add-to-playlist',
'back',
'create-playlist',
'download',
'download-audio',
'path-change',
'play',
'remove-from-playlist',
'remove-playlist',
'rename-playlist',
],
components: {
Browser,
Loading,
@ -51,6 +69,14 @@ export default {
type: String,
default: '',
},
selectedPlaylist: {
type: Object,
},
selectedChannel: {
type: Object,
},
},
data() {
@ -62,9 +88,24 @@ export default {
}
},
computed: {
mediaProvidersLookup() {
return Object.keys(this.mediaProviders)
.reduce((acc, key) => {
acc[key.toLowerCase()] = key
return acc
}, {})
},
},
methods: {
back() {
this.mediaProvider = null
this.$emit('back')
},
registerMediaProvider(type) {
const component = shallowRef(
const component = ref(
defineAsyncComponent(
() => import(`@/components/panels/Media/Providers/${type}`)
)
@ -83,10 +124,81 @@ export default {
if (config.youtube)
this.registerMediaProvider('YouTube')
},
onPlaylistChange() {
if (!this.selectedPlaylist)
return
const playlistType = this.selectedPlaylist.type?.toLowerCase()
const playlistMediaProvider = this.mediaProvidersLookup[playlistType]
if (playlistMediaProvider) {
this.mediaProvider = this.mediaProviders[playlistMediaProvider]
}
},
onChannelChange() {
if (!this.selectedChannel)
return
const channelType = this.selectedChannel.type?.toLowerCase()
const channelMediaProvider = this.mediaProvidersLookup[channelType]
if (channelMediaProvider) {
this.mediaProvider = this.mediaProviders[channelMediaProvider]
}
},
updateView() {
if (this.getUrlArgs().provider?.length) {
const provider = this.getUrlArgs().provider
const providerName = this.mediaProvidersLookup[provider.toLowerCase()]
if (!providerName?.length)
return
this.mediaProvider = this.mediaProviders[providerName]
}
if (this.selectedPlaylist)
this.onPlaylistChange()
else if (this.selectedChannel)
this.onChannelChange()
},
},
mounted() {
this.refreshMediaProviders()
watch: {
mediaProvider(provider) {
if (!provider) {
this.setUrlArgs({provider: null})
return
}
const providerName = Object.entries(this.mediaProviders)
.filter((pair) => pair[1] === provider)?.[0]?.[0]?.toLowerCase()
if (!providerName?.length)
return
this.setUrlArgs({provider: providerName})
},
selectedPlaylist() {
this.onPlaylistChange()
},
selectedChannel() {
this.onChannelChange()
},
},
async mounted() {
await this.refreshMediaProviders()
this.updateView()
},
unmounted() {
this.setUrlArgs({provider: null})
},
}
</script>

321
platypush/backend/http/webapp/src/components/panels/Media/Downloads.vue Normal file
View file

@ -0,0 +1,321 @@
<template>
<Loading v-if="loading" />
<div class="media-downloads fade-in" v-else>
<div class="no-content" v-if="!Object.keys(downloads).length">No media downloads in progress</div>
<div class="no-content" v-else-if="!Object.keys(filteredDownloads).length">No media downloads match the filter</div>
<div class="items" v-else>
<div class="row item"
:class="{selected: selectedItem === i}"
:key="i"
v-for="(media, i) in filteredDownloads"
@click="selectedItem = i"
>
<div class="col-8 left side">
<i class="icon fa" :class="{
'fa-check': media.state.toLowerCase() === 'completed',
'fa-play': media.state.toLowerCase() === 'downloading',
'fa-pause': media.state.toLowerCase() === 'paused',
'fa-times': media.state.toLowerCase() === 'cancelled',
'fa-stop': media.state.toLowerCase() === 'idle',
'fa-hourglass-half': media.state.toLowerCase() === 'started',
}" />
<div class="title" v-text="media.path || media.url" />
</div>
<div class="col-2 right side">
<span v-text="displayProgress[i]" />
</div>
<div class="col-2 right side">
<Dropdown title="Actions" icon-class="fa fa-ellipsis-h" @click="selectedItem = i">
<DropdownItem icon-class="fa fa-play" text="Play"
@click="$emit('play', {url: `file:///${media.path}`})"
v-if="media.state.toLowerCase() === 'completed'" />
<DropdownItem icon-class="fa fa-pause" text="Pause download" @click="pause(media)"
v-if="media.state.toLowerCase() === 'downloading' || media.state.toLowerCase() === 'started'" />
<DropdownItem icon-class="fa fa-rotate-left" text="Resume download" @click="resume(media)"
v-if="media.state.toLowerCase() === 'paused'" />
<DropdownItem icon-class="fa fa-eraser" text="Clear from queue" @click="clear(media)"
v-if="media.state.toLowerCase() === 'completed'" />
<DropdownItem icon-class="fa fa-stop" text="Cancel" @click="cancel(media)"
v-if="media.state.toLowerCase() !== 'completed' && media.state.toLowerCase() !== 'cancelled'" />
<DropdownItem icon-class="fa fa-trash" text="Remove file" @click="onDeleteSelected(media)"
v-if="media.state.toLowerCase() === 'completed' || media.state.toLowerCase() === 'cancelled'" />
<DropdownItem icon-class="fa fa-info" text="Media info" @click="$refs.mediaInfo.isVisible = true" />
</Dropdown>
</div>
</div>
</div>
<Modal ref="mediaInfo" title="Media info" width="80%">
<div class="modal-body media-info" v-if="selectedItem != null && downloads[selectedItem]">
<div class="row" v-if="downloads[selectedItem].name">
<div class="attr">Path</div>
<div class="value" v-text="downloads[selectedItem].path" />
</div>
<div class="row" v-if="downloads[selectedItem].url">
<div class="attr">Remote URL</div>
<div class="value">
<a :href="downloads[selectedItem].url" target="_blank" v-text="downloads[selectedItem].url" />
</div>
</div>
<div class="row" v-if="downloads[selectedItem].path">
<div class="attr">Local URL</div>
<div class="value">
<a :href="localURL(downloads[selectedItem])"
target="_blank" v-text="downloads[selectedItem].path" />
</div>
</div>
<div class="row" v-if="downloads[selectedItem].state">
<div class="attr">State</div>
<div class="value" v-text="downloads[selectedItem].state" />
</div>
<div class="row" v-if="downloads[selectedItem].progress != null">
<div class="attr">Progress</div>
<div class="value" v-text="displayProgress[selectedItem]" />
</div>
<div class="row" v-if="downloads[selectedItem].size != null">
<div class="attr">Size</div>
<div class="value" v-text="convertSize(downloads[selectedItem].size)" />
</div>
<div class="row" v-if="downloads[selectedItem].started_at">
<div class="attr">Started</div>
<div class="value" v-text="formatDateTime(downloads[selectedItem].started_at)" />
</div>
<div class="row" v-if="downloads[selectedItem].ended_at">
<div class="attr">Ended</div>
<div class="value" v-text="formatDateTime(downloads[selectedItem].ended_at)" />
</div>
</div>
</Modal>
<ConfirmDialog
ref="deleteConfirmDialog"
title="Delete file"
@input="rm"
@close="mediaToDelete = null"
>
Are you sure you want to delete the downloaded file?
</ConfirmDialog>
</div>
</template>
<script>
import ConfirmDialog from "@/components/elements/ConfirmDialog";
import Loading from "@/components/Loading";
import Utils from "@/Utils";
import MediaUtils from "@/components/Media/Utils.vue"
import Modal from "@/components/Modal";
import Dropdown from "@/components/elements/Dropdown";
import DropdownItem from "@/components/elements/DropdownItem";
export default {
mixins: [Utils, MediaUtils],
emits: [
'play',
'refresh',
],
components: {
ConfirmDialog,
Dropdown,
DropdownItem,
Loading,
Modal,
},
props: {
downloads: {
type: Object,
default: () => ({}),
},
pluginName: {
type: String,
required: true,
},
filter: {
type: String,
default: '',
},
},
data() {
return {
loading: false,
selectedItem: null,
mediaToDelete: null,
}
},
computed: {
relativeFiles() {
if (this.selectedItem == null || !this.downloads[this.selectedItem]?.files?.length)
return []
return this.downloads[this.selectedItem].files.map((file) => file.split('/').pop())
},
displayProgress() {
return Object.values(this.downloads).reduce((acc, value) => {
let progress = this.round(value.progress, 2)
let percent = progress != null ? `${progress}%` : 'N/A'
if (value.state.toLowerCase() === 'completed')
percent = '100%'
acc[value.path] = percent
return acc
}, {})
},
filteredDownloads() {
const filter = (this.filter || '').trim().toLowerCase()
let downloads = Object.values(this.downloads)
if (filter?.length) {
downloads = downloads.filter((download) => {
return download.path.toLowerCase().includes(filter) ||
download.url.toLowerCase().includes(filter)
})
}
return downloads.reduce((acc, download) => {
acc[download.path] = download
return acc
}, {})
},
},
methods: {
async run(action, media) {
this.loading = true
try {
await this.request(
`${this.pluginName}.${action}`,
{path: media.path}
)
} finally {
this.loading = false
}
},
async pause(media) {
await this.run('pause_download', media)
},
async resume(media) {
await this.run('resume_download', media)
},
async clear(media) {
await this.run('clear_downloads', media)
if (this.downloads[media.path])
delete this.downloads[media.path]
},
async cancel(media) {
await this.run('cancel_download', media)
},
async rm() {
const media = this.mediaToDelete
if (!media)
return
try {
await this.request('file.unlink', {file: media.path})
} finally {
await this.clear(media)
}
},
localURL(media) {
return `${window.location.origin}/file?path=${encodeURIComponent(media.path)}`
},
onDeleteSelected(media) {
this.mediaToDelete = media
this.$refs.deleteConfirmDialog.show()
},
}
}
</script>
<style lang="scss" scoped>
@import "src/style/items";
.media-downloads {
height: 100%;
background: $background-color;
.no-content {
height: 100%;
}
.items {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
overflow-y: auto;
}
}
:deep(.modal-body) {
.row {
display: flex;
border-bottom: $default-border;
padding: .5em .25em;
border-radius: .5em;
&:hover {
background-color: $hover-bg;
}
.attr {
@extend .col-3;
display: inline-flex;
}
.value {
@extend .col-9;
display: inline-flex;
justify-content: right;
&.nowrap {
overflow: hidden;
white-space: nowrap;
text-overflow: clip;
}
}
}
}
:deep(.modal-body) {
.dropdown-container {
.row {
box-shadow: none;
border: none;
}
button {
border: none;
background: none;
&:hover {
color: $default-hover-fg;
}
}
}
}
</style>

10
platypush/backend/http/webapp/src/components/panels/Media/Header.vue
View file

@ -22,6 +22,14 @@
</form>
</div>
<div class="col-s-8 col-m-7 left side" v-else-if="selectedView === 'downloads'">
<form @submit.prevent="$emit('filter-downloads', downloadFilter)">
<label class="search-box">
<input type="search" placeholder="Filter" v-model="downloadFilter">
</label>
</form>
</div>
<div class="col-s-8 col-m-7 left side" v-else-if="selectedView === 'browser'">
<label class="search-box">
<input type="search" placeholder="Filter" :value="browserFilter" @change="$emit('filter', $event.target.value)"
@ -65,6 +73,7 @@ export default {
components: {Players},
emits: [
'filter',
'filter-downloads',
'play-url',
'player-status',
'search',
@ -119,6 +128,7 @@ export default {
filterVisible: false,
query: '',
torrentURL: '',
downloadFilter: '',
}
},

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

@ -1,17 +1,27 @@
<template>
<keep-alive>
<div class="media-plugin fade-in">
<Loading v-if="loading" />
<MediaView :plugin-name="pluginName" :status="selectedPlayer?.status || {}" :track="selectedPlayer?.status || {}"
:buttons="mediaButtons" @play="pause" @pause="pause" @stop="stop" @set-volume="setVolume"
@seek="seek" @search="search" @mute="toggleMute" @unmute="toggleMute">
<MediaView :plugin-name="pluginName"
:status="selectedPlayer?.status || {}"
:track="selectedPlayer?.status || {}"
:buttons="mediaButtons"
@play="pause"
@pause="pause"
@stop="stop"
@set-volume="setVolume"
@seek="seek"
@search="search"
@mute="toggleMute"
@unmute="toggleMute"
>
<main>
<div class="nav-container from tablet" :style="navContainerStyle">
<Nav :selected-view="selectedView"
:torrent-plugin="torrentPlugin"
@input="selectedView = $event"
@toggle="forceShowNav = !forceShowNav" />
:download-icon-class="downloadIconClass"
@input="setView"
@toggle="forceShowNav = !forceShowNav"
/>
</div>
<div class="view-container">
@ -22,6 +32,7 @@
:selected-item="selectedItem"
:selected-subtitles="selectedSubtitles"
:browser-filter="browserFilter"
:downloads-filter="downloadsFilter"
:show-nav-button="!forceShowNav"
ref="header"
@search="search"
@ -31,30 +42,52 @@
@show-subtitles="showSubtitlesModal = !showSubtitlesModal"
@play-url="showPlayUrlModal"
@filter="browserFilter = $event"
@filter-downloads="downloadsFilter = $event"
@toggle-nav="forceShowNav = !forceShowNav"
@source-toggle="sources[$event] = !sources[$event]" />
@source-toggle="sources[$event] = !sources[$event]"
/>
<div class="body-container" :class="{'expanded-header': $refs.header?.filterVisible}">
<Results :results="results"
:selected-result="selectedResult"
:sources="sources"
:plugin-name="pluginName"
:loading="loading"
:filter="browserFilter"
@add-to-playlist="addToPlaylistItem = $event"
@open-channel="selectChannelFromItem"
@select="onResultSelect($event)"
@play="play"
@view="view"
@download="download"
v-if="selectedView === 'search'" />
@download-audio="downloadAudio"
v-if="selectedView === 'search'"
/>
<Transfers :plugin-name="torrentPlugin"
:is-media="true"
@play="play"
v-else-if="selectedView === 'torrents'" />
<TorrentTransfers :plugin-name="torrentPlugin"
:is-media="true"
@play="play"
v-else-if="selectedView === 'torrents'"
/>
<MediaDownloads :plugin-name="pluginName"
:downloads="downloads"
:filter="downloadsFilter"
@play="play"
v-else-if="selectedView === 'downloads'"
/>
<Browser :filter="browserFilter"
:selected-playlist="selectedPlaylist"
:selected-channel="selectedChannel"
@add-to-playlist="addToPlaylistItem = $event"
@back="selectedResult = null"
@download="download"
@download-audio="downloadAudio"
@path-change="browserFilter = ''"
@play="play($event)"
v-else-if="selectedView === 'browser'" />
v-else-if="selectedView === 'browser'"
/>
</div>
</div>
</main>
@ -76,23 +109,34 @@
<UrlPlayer :value="urlPlay" @input="urlPlay = $event.target.value" @play="playUrl($event)" />
</Modal>
</div>
<div class="add-to-playlist-container" v-if="addToPlaylistItem">
<Modal title="Add to playlist" :visible="addToPlaylistItem != null" @close="addToPlaylistItem = null">
<PlaylistAdder
:item="addToPlaylistItem"
@done="addToPlaylistItem = null"
@close="addToPlaylistItem = null"
/>
</Modal>
</div>
</div>
</keep-alive>
</template>
<script>
import Loading from "@/components/Loading";
import Modal from "@/components/Modal";
import Utils from "@/Utils";
import Browser from "@/components/panels/Media/Browser";
import Header from "@/components/panels/Media/Header";
import MediaDownloads from "@/components/panels/Media/Downloads";
import MediaUtils from "@/components/Media/Utils";
import MediaView from "@/components/Media/View";
import Nav from "@/components/panels/Media/Nav";
import PlaylistAdder from "@/components/panels/Media/PlaylistAdder";
import Results from "@/components/panels/Media/Results";
import Subtitles from "@/components/panels/Media/Subtitles";
import Transfers from "@/components/panels/Torrent/Transfers";
import TorrentTransfers from "@/components/panels/Torrent/Transfers";
import UrlPlayer from "@/components/panels/Media/UrlPlayer";
export default {
@ -101,13 +145,14 @@ export default {
components: {
Browser,
Header,
Loading,
MediaDownloads,
MediaView,
Modal,
Nav,
PlaylistAdder,
Results,
Subtitles,
Transfers,
TorrentTransfers,
UrlPlayer,
},
@ -137,11 +182,14 @@ export default {
selectedPlayer: null,
selectedView: 'search',
selectedSubtitles: null,
prevSelectedView: null,
showSubtitlesModal: false,
forceShowNav: false,
awaitingPlayTorrent: null,
urlPlay: null,
browserFilter: null,
downloadsFilter: null,
addToPlaylistItem: null,
torrentPlugin: null,
torrentPlugins: [
'torrent',
@ -153,6 +201,8 @@ export default {
'youtube': true,
'torrent': true,
},
downloads: {},
}
},
@ -182,6 +232,50 @@ export default {
return this.results[this.selectedResult]
},
selectedPlaylist() {
if (this.selectedResult == null)
return null
const selectedItem = this.results[this.selectedResult]
if (selectedItem?.item_type !== 'playlist')
return null
return this.results[this.selectedResult]
},
selectedChannel() {
if (this.selectedResult == null)
return null
const selectedItem = this.results[this.selectedResult]
if (selectedItem?.item_type !== 'channel')
return null
return this.results[this.selectedResult]
},
hasPendingDownloads() {
return Object.values(this.downloads).some((download) => {
return !['completed', 'cancelled'].includes(download.state.toLowerCase())
})
},
allDownloadsCompleted() {
return Object.values(this.downloads).length && Object.values(this.downloads).every((download) => {
return ['completed', 'cancelled'].includes(download.state.toLowerCase())
})
},
downloadIconClass() {
if (this.hasPendingDownloads)
return 'glow loop'
if (this.allDownloadsCompleted)
return 'completed'
return ''
},
},
methods: {
@ -252,12 +346,19 @@ export default {
window.open(ret.url, '_blank')
},
async download(item) {
if (item?.type === 'torrent') {
await this.downloadTorrent(item)
async download(item, args) {
switch (item.type) {
case 'torrent':
return await this.downloadTorrent(item, args)
case 'youtube':
return await this.downloadYoutube(item, args)
}
},
async downloadAudio(item) {
await this.download(item, {onlyAudio: true})
},
async refresh() {
this.selectedPlayer.status = await this.selectedPlayer.component.status(this.selectedPlayer)
},
@ -347,7 +448,35 @@ export default {
return
}
return await this.request(`${torrentPlugin}.download`, {torrent: item?.url || item})
if (!item?.url) {
this.notify({
text: 'No torrent URL available',
error: true,
})
return
}
return await this.request(`${torrentPlugin}.download`, {torrent: item.url || item})
},
async downloadYoutube(item, args) {
if (!item?.url) {
this.notify({
text: 'No YouTube URL available',
error: true,
})
return
}
const requestArgs = {url: item.url}
const onlyAudio = !!args?.onlyAudio
if (onlyAudio) {
requestArgs.only_audio = true
}
await this.request(`${this.pluginName}.download`, requestArgs)
},
async selectSubtitles(item) {
@ -382,6 +511,21 @@ export default {
} else {
this.selectedResult = null
}
const selectedItem = this.results[this.selectedResult]
if (this.selectedResult != null && (selectedItem?.item_type === 'playlist' || selectedItem?.item_type === 'channel')) {
this.onBrowserItemSelect()
} else {
this.selectedView = this.prevSelectedView || 'search'
}
},
onBrowserItemSelect() {
if (this.prevSelectedView != this.selectedView) {
this.prevSelectedView = this.selectedView
}
this.selectedView = 'browser'
},
showPlayUrlModal() {
@ -402,45 +546,209 @@ export default {
this.loading = false
}
},
async refreshDownloads() {
this.downloads = (await this.request(`${this.pluginName}.get_downloads`)).reduce((acc, download) => {
acc[download.path] = download
return acc
}, {})
},
setView(title) {
this.selectedView = title
if (title === 'search') {
this.selectedResult = null
}
},
updateView() {
const args = this.getUrlArgs()
if (args.view) {
this.selectedView = args.view
}
if (args.player && this.players?.length) {
this.selectedPlayer = this.players.find((player) => player.name === args.player)
}
if (args.subtitles) {
this.selectedSubtitles = args.subtitles
}
},
onDownloadStarted(event) {
this.downloads[event.path] = event
this.notify({
title: 'Media download started',
html: `Saving <b>${event.resource}</b> to <b>${event.path}</b>`,
image: {
iconClass: 'fa fa-download',
}
})
},
onDownloadCompleted(event) {
this.downloads[event.path] = event
this.downloads[event.path].progress = 100
this.notify({
title: 'Media download completed',
html: `Saved <b>${event.resource}</b> to <b>${event.path}</b>`,
image: {
iconClass: 'fa fa-check',
}
})
},
onDownloadError(event) {
this.downloads[event.path] = event
this.notify({
title: 'Media download error',
html: `Error downloading ${event.resource}: <b>${event.error}</b>`,
error: true,
image: {
iconClass: 'fa fa-exclamation-triangle',
}
})
},
onDownloadCancelled(event) {
this.downloads[event.path] = event
this.notify({
title: 'Media download cancelled',
html: `Cancelled download of <b>${event.resource}</b>`,
image: {
iconClass: 'fa fa-times',
}
})
},
onDownloadPaused(event) {
this.downloads[event.path] = event
this.notify({
title: 'Media download paused',
html: `Paused download of <b>${event.resource}</b>`,
image: {
iconClass: 'fa fa-pause',
}
})
},
onDownloadResumed(event) {
this.downloads[event.path] = event
this.notify({
title: 'Media download resumed',
html: `Resumed download of <b>${event.resource}</b>`,
image: {
iconClass: 'fa fa-play',
}
})
},
onDownloadProgress(event) {
this.downloads[event.path] = event
},
onDownloadClear(event) {
if (event.path in this.downloads)
delete this.downloads[event.path]
},
selectChannelFromItem(item) {
const mediaProvider = item?.type
const channelId = (
item?.channel_id ||
item?.channel?.id ||
item?.channel_url.split('/').pop()
)
if (!mediaProvider && channelId == null)
return
this.setUrlArgs({
provider: mediaProvider,
section: 'subscriptions',
channel: channelId,
})
this.selectedView = 'browser'
},
},
mounted() {
this.$watch(() => this.selectedPlayer, (player) => {
watch: {
selectedPlayer(player) {
this.setUrlArgs({player: player?.name})
if (player)
this.refresh()
})
},
this.$watch(() => this.selectedSubtitles, (subs) => {
selectedSubtitles(subs) {
this.setUrlArgs({subtitles: this.selectedSubtitles})
if (new Set(['play', 'pause']).has(this.selectedPlayer?.status?.state)) {
if (subs)
this.selectedPlayer.component.addSubtitles(subs)
else
this.selectedPlayer.component.removeSubtitles()
}
})
},
selectedView() {
this.setUrlArgs({view: this.selectedView})
},
},
async mounted() {
this.torrentPlugin = this.getTorrentPlugin()
this.subscribe(this.onTorrentQueued,'notify-on-torrent-queued',
this.subscribe(this.onTorrentQueued,'on-torrent-queued',
'platypush.message.event.torrent.TorrentQueuedEvent')
this.subscribe(this.onTorrentMetadata,'on-torrent-metadata',
'platypush.message.event.torrent.TorrentDownloadedMetadataEvent')
this.subscribe(this.onTorrentDownloadStart,'notify-on-torrent-download-start',
this.subscribe(this.onTorrentDownloadStart,'on-torrent-download-start',
'platypush.message.event.torrent.TorrentDownloadStartEvent')
this.subscribe(this.onTorrentDownloadCompleted,'notify-on-torrent-download-completed',
this.subscribe(this.onTorrentDownloadCompleted,'on-torrent-download-completed',
'platypush.message.event.torrent.TorrentDownloadCompletedEvent')
this.subscribe(this.onDownloadStarted,'on-download-started',
'platypush.message.event.media.MediaDownloadStartedEvent')
this.subscribe(this.onDownloadCompleted,'on-download-completed',
'platypush.message.event.media.MediaDownloadCompletedEvent')
this.subscribe(this.onDownloadError,'on-download-error',
'platypush.message.event.media.MediaDownloadErrorEvent')
this.subscribe(this.onDownloadCancelled,'on-download-cancelled',
'platypush.message.event.media.MediaDownloadCancelledEvent')
this.subscribe(this.onDownloadPaused,'on-download-paused',
'platypush.message.event.media.MediaDownloadPausedEvent')
this.subscribe(this.onDownloadResumed,'on-download-resumed',
'platypush.message.event.media.MediaDownloadResumedEvent')
this.subscribe(this.onDownloadProgress,'on-download-progress',
'platypush.message.event.media.MediaDownloadProgressEvent')
this.subscribe(this.onDownloadClear,'on-download-clear',
'platypush.message.event.media.MediaDownloadClearEvent')
if ('media.plex' in this.$root.config)
this.sources.plex = true
if ('media.jellyfin' in this.$root.config)
this.sources.jellyfin = true
await this.refreshDownloads()
this.updateView()
},
destroy() {
this.unsubscribe('notify-on-torrent-queued')
this.unsubscribe('on-torrent-queued')
this.unsubscribe('on-torrent-metadata')
this.unsubscribe('notify-on-torrent-download-start')
this.unsubscribe('notify-on-torrent-download-completed')
this.unsubscribe('on-torrent-download-start')
this.unsubscribe('on-torrent-download-completed')
this.unsubscribe('on-download-started')
this.unsubscribe('on-download-completed')
this.unsubscribe('on-download-error')
this.unsubscribe('on-download-cancelled')
this.unsubscribe('on-download-paused')
this.unsubscribe('on-download-resumed')
this.unsubscribe('on-download-progress')
this.unsubscribe('on-download-clear')
},
}
</script>
@ -490,4 +798,10 @@ export default {
}
}
}
:deep(.add-to-playlist-container) {
.body {
padding: 0 !important;
}
}
</style>

49
platypush/backend/http/webapp/src/components/panels/Media/Info.vue
View file

@ -2,7 +2,7 @@
<div class="media-info">
<div class="row header">
<div class="image-container">
<MediaImage :item="item" @play="$emit('play')" />
<MediaImage :item="item" @play="$emit('play')" @select="$emit('select')" />
</div>
<div class="title">
@ -16,6 +16,18 @@
</div>
</div>
<div class="row direct-url" v-if="directUrl">
<div class="left side">Direct URL</div>
<div class="right side">
<a :href="directUrl" title="Direct URL" target="_blank">
<i class="fas fa-external-link-alt" />
</a>
<button @click="copyToClipboard(directUrl)" title="Copy URL to clipboard">
<i class="fas fa-clipboard" />
</button>
</div>
</div>
<div class="row" v-if="item?.series">
<div class="left side">TV Series</div>
<div class="right side" v-text="item.series" />
@ -169,12 +181,18 @@ export default {
item: {
type: Object,
default: () => {},
}
},
pluginName: {
type: String,
},
},
data() {
return {
typeIcons: Icons,
loadingUrl: false,
youtubeUrl: null,
}
},
@ -209,6 +227,15 @@ export default {
return null
},
directUrl() {
if (this.item?.type === 'file' && this.item?.url) {
const path = this.item.url.replace(/^file:\/\//, '')
return window.location.origin + '/file?path=' + encodeURIComponent(path)
}
return null
},
},
}
</script>
@ -280,6 +307,24 @@ export default {
}
}
.direct-url {
.right.side {
position: relative;
button {
background: none;
border: none;
padding: 0;
margin-left: 1em;
&:hover {
color: $default-hover-fg;
cursor: pointer;
}
}
}
}
.header {
width: 100%;
display: flex;

34
platypush/backend/http/webapp/src/components/panels/Media/Item.vue
View file

@ -5,18 +5,24 @@
@click.right.prevent="$refs.dropdown.toggle()"
v-if="!hidden">
<div class="thumbnail">
<MediaImage :item="item" @play="$emit('play')" />
<MediaImage :item="item" @play="$emit('play')" @select="$emit('select')" />
</div>
<div class="body">
<div class="row title">
<div class="col-11 left side" v-text="item.title" @click="$emit('select')" />
<div class="col-11 left side" v-text="item.title || item.name" @click="$emit('select')" />
<div class="col-1 right side">
<Dropdown title="Actions" icon-class="fa fa-ellipsis-h" ref="dropdown">
<DropdownItem icon-class="fa fa-play" text="Play" @click="$emit('play')"
v-if="item.type !== 'torrent'" />
<DropdownItem icon-class="fa fa-download" text="Download" @click="$emit('download')"
v-if="item.type === 'torrent'" />
v-if="(item.type === 'torrent' || item.type === 'youtube') && item.item_type !== 'channel' && item.item_type !== 'playlist'" />
<DropdownItem icon-class="fa fa-volume-high" text="Download Audio" @click="$emit('download-audio')"
v-if="item.type === 'youtube' && item.item_type !== 'channel' && item.item_type !== 'playlist'" />
<DropdownItem icon-class="fa fa-list" text="Add to playlist" @click="$emit('add-to-playlist')"
v-if="item.type === 'youtube'" />
<DropdownItem icon-class="fa fa-trash" text="Remove from playlist" @click="$emit('remove-from-playlist')"
v-if="item.type === 'youtube' && playlist?.length" />
<DropdownItem icon-class="fa fa-window-maximize" text="View in browser" @click="$emit('view')"
v-if="item.type === 'file'" />
<DropdownItem icon-class="fa fa-info-circle" text="Info" @click="$emit('select')" />
@ -25,7 +31,7 @@
</div>
<div class="row subtitle" v-if="item.channel">
<a class="channel" :href="item.channel_url" target="_blank">
<a class="channel" href="#" target="_blank" @click.prevent="$emit('open-channel')">
<img :src="item.channel_image" class="channel-image" v-if="item.channel_image" />
<span class="channel-name" v-text="item.channel" />
</a>
@ -48,7 +54,17 @@ import Utils from "@/Utils";
export default {
components: {Dropdown, DropdownItem, MediaImage},
mixins: [Utils],
emits: ['play', 'select', 'view', 'download'],
emits: [
'add-to-playlist',
'download',
'download-audio',
'open-channel',
'play',
'remove-from-playlist',
'select',
'view',
],
props: {
item: {
type: Object,
@ -64,6 +80,10 @@ export default {
type: Boolean,
default: false,
},
playlist: {
type: String,
},
},
data() {
@ -81,7 +101,8 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
max-height: 23.5em;
height: 100%;
cursor: initial !important;
margin-bottom: 5px;
border: 1px solid transparent;
@ -107,7 +128,6 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
.row {
width: 100%;

46
platypush/backend/http/webapp/src/components/panels/Media/MediaImage.vue
View file

@ -1,8 +1,8 @@
<template>
<div class="image-container"
:class="{ 'with-image': !!item?.image }">
<div class="play-overlay" @click="$emit('play', item)" v-if="hasPlay">
<i class="fas fa-play" />
<div class="play-overlay" @click="$emit(clickEvent, item)" v-if="hasPlay">
<i :class="overlayIconClass" />
</div>
<span class="icon type-icon" v-if="typeIcons[item?.type]">
@ -16,7 +16,7 @@
<img class="image" :src="item.image" :alt="item.title" v-if="item?.image" />
<div class="image" v-else>
<div class="inner">
<i class="fas fa-play" />
<i :class="iconClass" />
</div>
</div>
@ -40,7 +40,7 @@ import MediaUtils from "@/components/Media/Utils";
export default {
mixins: [Icons, MediaUtils],
emits: ['play'],
emits: ['play', 'select'],
props: {
item: {
type: Object,
@ -58,6 +58,44 @@ export default {
typeIcons: Icons,
}
},
computed: {
clickEvent() {
switch (this.item?.item_type) {
case 'channel':
case 'playlist':
case 'folder':
return 'select'
default:
return 'play'
}
},
iconClass() {
switch (this.item?.item_type) {
case 'channel':
return 'fas fa-user'
case 'playlist':
return 'fas fa-list'
case 'folder':
return 'fas fa-folder'
default:
return 'fas fa-play'
}
},
overlayIconClass() {
if (
this.item?.item_type === 'channel' ||
this.item?.item_type === 'playlist' ||
this.item?.item_type === 'folder'
) {
return 'fas fa-folder-open'
}
return 'fas fa-play'
},
},
}
</script>

41
platypush/backend/http/webapp/src/components/panels/Media/Nav.vue
View file

@ -5,14 +5,17 @@
</button>
<li v-for="(view, name) in displayedViews" :key="name" :title="view.displayName"
:class="{selected: name === selectedView}" @click="$emit('input', name)">
:class="{selected: name === selectedView, ...customClasses[name]}" @click="input(name)">
<i :class="view.iconClass" />
</li>
</nav>
</template>
<script>
import Utils from '@/Utils';
export default {
mixins: [Utils],
emits: ['input', 'toggle'],
props: {
selectedView: {
@ -28,6 +31,10 @@ export default {
type: String,
},
downloadIconClass: {
type: String,
},
views: {
type: Object,
default: () => {
@ -42,6 +49,11 @@ export default {
displayName: 'Browser',
},
downloads: {
iconClass: 'fa fa-download',
displayName: 'Downloads',
},
torrents: {
iconClass: 'fa fa-magnet',
displayName: 'Torrents',
@ -59,6 +71,22 @@ export default {
return views
},
customClasses() {
return {
downloads: this.downloadIconClass.split(' ').reduce((acc, cls) => {
acc[cls] = true
return acc
}, {}),
}
},
},
methods: {
input(view) {
this.$emit('input', view)
this.setUrlArgs({view: view})
},
},
}
</script>
@ -107,12 +135,8 @@ nav {
list-style: none;
padding: .6em;
opacity: 0.7;
&.selected,
&:hover {
border-radius: 1.2em;
margin: 0 0.2em;
}
border-radius: 1.2em;
margin: 0 0.2em;
&:hover {
background: $nav-entry-collapsed-hover-bg;
@ -122,6 +146,9 @@ nav {
background: $nav-entry-collapsed-selected-bg;
}
&.completed {
color: $ok-fg;
}
}
}
</style>

162
platypush/backend/http/webapp/src/components/panels/Media/PlaylistAdder.vue Normal file
View file

@ -0,0 +1,162 @@
<template>
<div class="playlist-adder-container">
<Loading v-if="loading" />
<TextPrompt ref="newPlaylistName" :visible="showNewPlaylist" @input="createPlaylist($event)">
Playlist name
</TextPrompt>
<div class="playlists">
<div class="playlist new-playlist">
<button @click="showNewPlaylist = true">
<i class="fa fa-plus" />
Create new playlist
</button>
</div>
<div class="playlist" v-for="playlist in playlists" :key="playlist.id">
<button @click="addToPlaylist(playlist.id)">
<i class="fa fa-list" />
{{ playlist.name }}
</button>
</div>
</div>
</div>
</template>
<script>
import Loading from "@/components/Loading";
import Utils from "@/Utils";
import TextPrompt from "@/components/elements/TextPrompt"
export default {
emits: ['done'],
mixins: [Utils],
components: {Loading, TextPrompt},
props: {
item: {
type: Object,
required: true,
},
},
data() {
return {
loading: false,
playlists: [],
showNewPlaylist: false,
}
},
methods: {
async createPlaylist(name) {
name = name?.trim()
if (!name?.length)
return
this.loading = true
try {
const playlist = await this.request('youtube.create_playlist', {
name: name,
})
await this.request('youtube.add_to_playlist', {
playlist_id: playlist.id,
video_id: this.item.id || this.item.url,
})
this.$emit('done')
this.notify({
text: 'Playlist created and video added',
image: {
icon: 'check',
}
})
} finally {
this.loading = false
this.showNewPlaylist = false
}
},
async refreshPlaylists() {
this.loading = true
try {
this.playlists = await this.request('youtube.get_playlists')
} finally {
this.loading = false
}
},
async addToPlaylist(playlistId) {
this.loading = true
try {
await this.request('youtube.add_to_playlist', {
playlist_id: playlistId,
video_id: this.item.id || this.item.url,
})
this.notify({
text: 'Video added to playlist',
image: {
icon: 'check',
}
})
this.$emit('done')
} finally {
this.loading = false
}
},
},
mounted() {
this.refreshPlaylists()
},
}
</script>
<style lang="scss" scoped>
.playlist-adder-container {
min-width: 300px;
height: 100%;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
.playlists {
width: 100%;
overflow-y: auto;
}
.playlist {
button {
width: 100%;
text-align: left;
padding: 0.5em 1em;
border: none;
background: none;
cursor: pointer;
transition: background 0.2s, color 0.2s;
&:hover {
background: $hover-bg;
}
i {
margin-right: 0.5em;
}
}
}
.new-playlist {
button {
font-weight: bold;
border-bottom: $default-border;
}
}
}
</style>

22
platypush/backend/http/webapp/src/components/panels/Media/Providers/Mixin.vue
View file

@ -2,13 +2,33 @@
import Utils from "@/Utils";
export default {
emits: ['back', 'path-change', 'play'],
mixins: [Utils],
emits: [
'add-to-playlist',
'back',
'create-playlist',
'download',
'download-audio',
'path-change',
'play',
'remove-from-playlist',
'remove-playlist',
'rename-playlist',
],
props: {
filter: {
type: String,
default: '',
},
selectedPlaylist: {
default: null,
},
selectedChannel: {
default: null,
},
},
data() {

3
platypush/backend/http/webapp/src/components/panels/Media/Providers/Nav.vue
View file

@ -48,6 +48,9 @@ export default {
@import "../style.scss";
.nav {
overflow-x: auto !important;
overflow-y: hidden !important;
.path .token .icon {
margin-right: 0.5em;
}

130
platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube.vue
View file

@ -8,17 +8,36 @@
<div class="body" v-else>
<Feed :filter="filter"
@play="$emit('play', $event)" v-if="selectedView === 'feed'" />
@add-to-playlist="$emit('add-to-playlist', $event)"
@download="$emit('download', $event)"
@download-audio="$emit('download-audio', $event)"
@open-channel="selectChannelFromItem"
@play="$emit('play', $event)"
v-if="selectedView === 'feed'"
/>
<Playlists :filter="filter"
:selected-playlist="selectedPlaylist"
:selected-playlist="selectedPlaylist_"
@add-to-playlist="$emit('add-to-playlist', $event)"
@download="$emit('download', $event)"
@download-audio="$emit('download-audio', $event)"
@open-channel="selectChannelFromItem"
@play="$emit('play', $event)"
@remove-from-playlist="removeFromPlaylist"
@select="onPlaylistSelected"
v-else-if="selectedView === 'playlists'" />
v-else-if="selectedView === 'playlists'"
/>
<Subscriptions :filter="filter"
:selected-channel="selectedChannel"
:selected-channel="selectedChannel_"
@add-to-playlist="$emit('add-to-playlist', $event)"
@download="$emit('download', $event)"
@download-audio="$emit('download-audio', $event)"
@play="$emit('play', $event)"
@select="onChannelSelected"
v-else-if="selectedView === 'subscriptions'" />
v-else-if="selectedView === 'subscriptions'"
/>
<Index @select="selectView" v-else />
</div>
</div>
@ -52,8 +71,8 @@ export default {
return {
youtubeConfig: null,
selectedView: null,
selectedPlaylist: null,
selectedChannel: null,
selectedPlaylist_: null,
selectedChannel_: null,
path: [],
}
},
@ -87,12 +106,36 @@ export default {
}
},
async removeFromPlaylist(event) {
const playlistId = event.playlist_id
const videoId = event.item.url
this.loading = true
try {
await this.request('youtube.remove_from_playlist', {
playlist_id: playlistId,
video_id: videoId,
})
} finally {
this.loading = false
}
},
async createPlaylist(name) {
this.loading = true
try {
await this.request('youtube.create_playlist', {name: name})
} finally {
this.loading = false
}
},
selectView(view) {
this.selectedView = view
if (view === 'playlists')
this.selectedPlaylist = null
this.selectedPlaylist_ = null
else if (view === 'subscriptions')
this.selectedChannel = null
this.selectedChannel_ = null
if (view?.length) {
this.path = [
@ -107,22 +150,86 @@ export default {
},
onPlaylistSelected(playlist) {
this.selectedPlaylist = playlist.id
this.selectedPlaylist_ = playlist
if (!playlist)
return
this.selectedView = 'playlists'
this.path.push({
title: playlist.name,
})
},
onChannelSelected(channel) {
this.selectedChannel = channel.id
this.selectedChannel_ = channel
if (!channel)
return
this.selectedView = 'subscriptions'
this.path.push({
title: channel.name,
})
},
initView() {
const args = this.getUrlArgs()
if (args.section)
this.selectedView = args.section
if (this.selectedView)
this.selectView(this.selectedView)
},
async selectChannelFromItem(item) {
if (!item.channel_url)
return
const channel = await this.request(
'youtube.get_channel',
{id: item.channel_url.split('/').pop()}
)
if (!channel)
return
this.onChannelSelected(channel)
},
},
watch: {
selectedPlaylist() {
this.onPlaylistSelected(this.selectedPlaylist)
},
selectedPlaylist_(value) {
if (value == null)
this.setUrlArgs({playlist: null})
},
selectedChannel() {
this.onChannelSelected(this.selectedChannel)
},
selectedChannel_(value) {
if (value == null)
this.setUrlArgs({channel: null})
},
selectedView() {
this.setUrlArgs({section: this.selectedView})
},
},
mounted() {
this.loadYoutubeConfig()
this.initView()
this.onPlaylistSelected(this.selectedPlaylist)
this.onChannelSelected(this.selectedChannel)
},
unmounted() {
this.setUrlArgs({section: null})
},
}
</script>
@ -140,6 +247,7 @@ export default {
.body {
height: calc(100% - $media-nav-height - 2px);
margin-top: 2px;
overflow-y: auto;
}
}
</style>

196
platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Channel.vue
View file

@ -1,35 +1,59 @@
<template>
<div class="media-youtube-channel" @scroll="onScroll">
<div class="media-youtube-channel">
<Loading v-if="loading" />
<div class="channel" @scroll="onScroll" v-else-if="channel">
<div class="channel" v-else-if="channel">
<div class="header">
<div class="banner">
<img :src="channel.banner" v-if="channel?.banner?.length" />
</div>
<div class="row">
<a :href="channel.url" target="_blank" rel="noopener noreferrer">
<div class="image">
<img :src="channel.image" v-if="channel?.image?.length" />
</div>
</a>
<div class="row info-container">
<div class="info">
<a class="title" :href="channel.url" target="_blank" rel="noopener noreferrer">
{{ channel?.name }}
</a>
<div class="description">{{ channel?.description }}</div>
<div class="row">
<div class="title-container">
<a :href="channel.url" target="_blank" rel="noopener noreferrer" v-if="channel?.image?.length">
<div class="image">
<img :src="channel.image" />
</div>
</a>
<a class="title" :href="channel.url" target="_blank" rel="noopener noreferrer">
{{ channel?.name }}
</a>
</div>
<div class="actions">
<button :title="subscribed ? 'Unsubscribe' : 'Subscribe'" @click="toggleSubscription">
{{ subscribed ? 'Unsubscribe' : 'Subscribe' }}
</button>
<div class="subscribers" v-if="channel.subscribers != null && (channel.subscribers || 0) >= 0">
{{ channel.subscribers }} subscribers
</div>
</div>
</div>
<div class="description" v-if="channel?.description">
{{ channel.description }}
</div>
</div>
</div>
</div>
<Results :results="channel.items"
:filter="filter"
:result-index-step="null"
:selected-result="selectedResult"
ref="results"
@add-to-playlist="$emit('add-to-playlist', $event)"
@download="$emit('download', $event)"
@download-audio="$emit('download-audio', $event)"
@open-channel="$emit('open-channel', $event)"
@play="$emit('play', $event)"
@scroll-end="loadNextPage"
@select="selectedResult = $event"
@play="$emit('play', $event)" />
/>
</div>
</div>
</template>
@ -40,8 +64,15 @@ import Results from "@/components/panels/Media/Results";
import Utils from "@/Utils";
export default {
emits: ['play'],
mixins: [Utils],
emits: [
'add-to-playlist',
'download',
'download-audio',
'open-channel',
'play',
],
components: {
Loading,
Results,
@ -65,6 +96,7 @@ export default {
loading: false,
loadingNextPage: false,
selectedResult: null,
subscribed: false,
}
},
@ -81,107 +113,105 @@ export default {
async loadChannel() {
this.loading = true
try {
this.channel = await this.request('youtube.get_channel', {id: this.id})
await this.updateChannel(true)
this.subscribed = await this.request('youtube.is_subscribed', {channel_id: this.id})
} finally {
this.loading = false
}
},
async updateChannel(init) {
const channel = await this.request(
'youtube.get_channel',
{id: this.id, next_page_token: this.channel?.next_page_token}
)
const itemsByUrl = this.itemsByUrl || {}
let items = channel.items
.filter(item => !itemsByUrl[item.url])
.map(item => {
return {
type: 'youtube',
...item,
}
})
if (!init) {
items = this.channel.items.concat(items)
}
this.channel = channel
this.channel.items = items
},
async loadNextPage() {
if (!this.channel?.next_page_token || this.loadingNextPage)
if (!this.channel?.next_page_token || this.loadingNextPage) {
return
}
this.loadingNextPage = true
try {
const nextPage = await this.request(
'youtube.get_channel',
{id: this.id, next_page_token: this.channel.next_page_token}
)
this.channel.items.push(...nextPage.items.filter(item => !this.itemsByUrl[item.url]))
this.channel.next_page_token = nextPage.next_page_token
this.$refs.results.maxResultIndex += this.$refs.results.resultIndexStep
await this.timeout(500)
await this.updateChannel()
} finally {
this.loadingNextPage = false
}
},
onScroll(e) {
const el = e.target
if (!el)
return
const bottom = (el.scrollHeight - el.scrollTop) <= el.clientHeight + 150
if (!bottom)
return
this.loadNextPage()
async toggleSubscription() {
const action = this.subscribed ? 'unsubscribe' : 'subscribe'
await this.request(`youtube.${action}`, {channel_id: this.id})
this.subscribed = !this.subscribed
},
},
mounted() {
this.loadChannel()
async mounted() {
this.setUrlArgs({channel: this.id})
await this.loadChannel()
},
unmounted() {
this.setUrlArgs({channel: null})
},
}
</script>
<style lang="scss" scoped>
@import "header.scss";
.media-youtube-channel {
height: 100%;
overflow-y: auto;
.channel {
height: 100%;
}
.header {
border-bottom: $default-border-2;
padding-bottom: 0.5em;
.title-container {
flex: 1;
}
.banner {
max-height: 200px;
.actions {
display: flex;
justify-content: center;
flex-direction: column;
align-items: flex-end;
img {
max-width: 100%;
max-height: 100%;
button {
background: $default-bg-7;
padding: 0.5em 1em;
border-radius: 0.5em;
cursor: pointer;
&:hover {
background: $hover-bg;
}
}
}
.image {
height: 100px;
margin: -2.5em 2em 0.5em 0.5em;
img {
height: 100%;
border-radius: 50%;
}
}
.row {
display: flex;
@include from($desktop) {
flex-direction: row;
}
.info {
display: flex;
flex-direction: column;
}
}
.title {
color: $default-fg-2;
font-size: 1.7em;
font-weight: bold;
margin: 0.5em 0;
text-decoration: dotted;
&:hover {
color: $default-hover-fg;
}
}
.description {
font-size: 0.9em;
margin-right: 0.5em;
.subscribers {
font-size: 0.8em;
}
}
}

13
platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Feed.vue
View file

@ -9,6 +9,10 @@
:filter="filter"
:sources="{'youtube': true}"
:selected-result="selectedResult"
@add-to-playlist="$emit('add-to-playlist', $event)"
@download="$emit('download', $event)"
@download-audio="$emit('download-audio', $event)"
@open-channel="$emit('open-channel', $event)"
@select="selectedResult = $event"
@play="$emit('play', $event)"
v-else />
@ -22,8 +26,15 @@ import Results from "@/components/panels/Media/Results";
import Utils from "@/Utils";
export default {
emits: ['play'],
mixins: [Utils],
emits: [
'add-to-playlist',
'download',
'download-audio',
'open-channel',
'play',
],
components: {
Loading,
NoItems,

114
platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlist.vue
View file

@ -1,17 +1,63 @@
<template>
<div class="media-youtube-playlist">
<Loading v-if="loading" />
<NoItems :with-shadow="false" v-else-if="!items?.length">
No videos found.
</NoItems>
<Results :results="items"
:sources="{'youtube': true}"
:filter="filter"
:selected-result="selectedResult"
@select="selectedResult = $event"
@play="$emit('play', $event)"
v-else />
<div class="playlist-container" v-else>
<div class="header">
<div class="banner">
<img :src="metadata?.image" v-if="metadata?.image?.length" />
</div>
<div class="row info-container">
<div class="info">
<div class="row">
<a class="title" :href="metadata?.url" target="_blank" rel="noopener noreferrer" v-if="metadata?.url">
{{ name }}
</a>
<span class="title" v-else>
{{ name }}
</span>
<div class="n-items">{{ nItems }} videos</div>
</div>
<div class="row" v-if="metadata?.description">
<div class="description">
{{ metadata?.description }}
</div>
</div>
<div class="row" v-if="metadata?.channel_url">
<div class="channel">
Uploaded by
<a :href="metadata.channel_url" target="_blank" rel="noopener noreferrer">
{{ metadata?.channel }}
</a>
</div>
</div>
</div>
</div>
</div>
<NoItems :with-shadow="false" v-if="!nItems">
No videos found.
</NoItems>
<Results :results="items"
:sources="{'youtube': true}"
:filter="filter"
:playlist="id"
:selected-result="selectedResult"
@add-to-playlist="$emit('add-to-playlist', $event)"
@download="$emit('download', $event)"
@download-audio="$emit('download-audio', $event)"
@open-channel="$emit('open-channel', $event)"
@play="$emit('play', $event)"
@remove-from-playlist="$emit('remove-from-playlist', $event)"
@select="selectedResult = $event"
v-else />
</div>
</div>
</template>
@ -22,8 +68,16 @@ import Results from "@/components/panels/Media/Results";
import Utils from "@/Utils";
export default {
emits: ['play'],
mixins: [Utils],
emits: [
'add-to-playlist',
'download',
'download-audio',
'open-channel',
'play',
'remove-from-playlist',
],
components: {
Loading,
NoItems,
@ -40,6 +94,11 @@ export default {
type: String,
default: null,
},
metadata: {
type: Object,
default: null,
},
},
data() {
@ -50,6 +109,16 @@ export default {
}
},
computed: {
name() {
return this.metadata?.title || this.metadata?.name
},
nItems() {
return this.metadata?.videos || this.items?.length || 0
},
},
methods: {
async loadItems() {
this.loading = true
@ -67,13 +136,36 @@ export default {
},
mounted() {
this.setUrlArgs({playlist: this.id})
this.loadItems()
},
unmounted() {
this.setUrlArgs({playlist: null})
},
}
</script>
<style lang="scss" scoped>
@import "header.scss";
.media-youtube-playlist {
height: 100%;
.playlist-container {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
.banner {
opacity: 0.75;
}
.channel {
flex: 1;
}
}
}
</style>

258
platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Playlists.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="media-youtube-playlists">
<div class="playlists-index" v-if="!selectedPlaylist">
<div class="playlists-index" v-if="!selectedPlaylist?.id">
<Loading v-if="loading" />
<NoItems :with-shadow="false" v-else-if="!playlists?.length">
No playlists found.
@ -13,36 +13,130 @@
@click="$emit('select', playlist)">
<MediaImage :item="playlist" :has-play="false" />
<div class="title">{{ playlist.name }}</div>
<div class="actions">
<button title="Remove" @click.stop="deletedPlaylist = playlist.id">
<i class="fa fa-trash" />
</button>
<button title="Edit" @click.stop="editedPlaylist = playlist.id">
<i class="fa fa-pencil" />
</button>
</div>
</div>
</div>
</div>
<div class="playlist-body" v-else>
<Playlist :id="selectedPlaylist" :filter="filter" @play="$emit('play', $event)" />
<Playlist
:id="selectedPlaylist.id"
:filter="filter"
:metadata="playlistsById[selectedPlaylist.id] || selectedPlaylist"
@add-to-playlist="$emit('add-to-playlist', $event)"
@download="$emit('download', $event)"
@download-audio="$emit('download-audio', $event)"
@open-channel="$emit('open-channel', $event)"
@remove-from-playlist="$emit('remove-from-playlist', {item: $event, playlist_id: selectedPlaylist.id})"
@play="$emit('play', $event)"
/>
</div>
<TextPrompt
:visible="showCreatePlaylist"
@input="createPlaylist($event)"
@close="showCreatePlaylist = false"
>
Playlist name
</TextPrompt>
<ConfirmDialog
ref="removePlaylist"
title="Remove Playlist"
:visible="deletedPlaylist != null"
@close="deletedPlaylist = null"
@input="removePlaylist"
>
Are you sure you want to remove this playlist?
</ConfirmDialog>
<Modal
ref="editPlaylist"
title="Edit Playlist"
:visible="editedPlaylist != null"
@close="clearEditPlaylist"
@open="onEditPlaylistOpen"
>
<form class="edit-playlist-form" @submit.prevent="editPlaylist">
<div class="row">
<input ref="editPlaylistName" placeholder="Playlist name" v-model="editedPlaylistName" />
</div>
<div class="row">
<input placeholder="Playlist description" v-model="editedPlaylistDescription" />
</div>
<div class="row buttons">
<div class="btn-container col-6">
<button type="submit">
<i class="fa fa-check" />&nbsp;Save
</button>
</div>
<div class="btn-container col-6">
<button @click="clearEditPlaylist">
<i class="fa fa-times" />&nbsp;Cancel
</button>
</div>
</div>
</form>
</Modal>
<FloatingButton
icon-class="fa fa-plus"
title="Create Playlist"
@click="showCreatePlaylist = true"
/>
</div>
</template>
<script>
import ConfirmDialog from "@/components/elements/ConfirmDialog";
import FloatingButton from "@/components/elements/FloatingButton";
import MediaImage from "@/components/panels/Media/MediaImage";
import Modal from "@/components/Modal";
import NoItems from "@/components/elements/NoItems";
import Loading from "@/components/Loading";
import Playlist from "./Playlist";
import TextPrompt from "@/components/elements/TextPrompt"
import Utils from "@/Utils";
export default {
emits: ['play', 'select'],
mixins: [Utils],
emits: [
'add-to-playlist',
'create-playlist',
'download',
'download-audio',
'open-channel',
'play',
'remove-from-playlist',
'remove-playlist',
'rename-playlist',
'select',
],
components: {
ConfirmDialog,
FloatingButton,
Loading,
MediaImage,
Modal,
NoItems,
Playlist,
TextPrompt,
},
props: {
selectedPlaylist: {
type: String,
type: Object,
default: null,
},
@ -54,8 +148,13 @@ export default {
data() {
return {
deletedPlaylist: null,
editedPlaylist: null,
editedPlaylistName: '',
editedPlaylistDescription: '',
playlists: [],
loading: false,
showCreatePlaylist: false,
}
},
@ -79,10 +178,82 @@ export default {
this.loading = false
}
},
async createPlaylist(name) {
this.loading = true
try {
await this.request('youtube.create_playlist', {name: name})
this.showCreatePlaylist = false
this.loadPlaylists()
} finally {
this.loading = false
}
},
async removePlaylist() {
if (!this.deletedPlaylist)
return
this.loading = true
try {
await this.request('youtube.delete_playlist', {id: this.deletedPlaylist})
this.deletedPlaylist = null
this.loadPlaylists()
} finally {
this.loading = false
}
},
async editPlaylist() {
if (!this.editedPlaylist)
return
this.loading = true
try {
await this.request('youtube.rename_playlist', {
id: this.editedPlaylist,
name: this.editedPlaylistName,
description: this.editedPlaylistDescription,
})
this.clearEditPlaylist()
this.loadPlaylists()
} finally {
this.loading = false
}
},
clearEditPlaylist() {
this.editedPlaylist = null
this.editedPlaylistName = ''
this.editedPlaylistDescription = ''
this.$refs.editPlaylist.hide()
},
onEditPlaylistOpen() {
const playlist = this.playlistsById[this.editedPlaylist]
this.editedPlaylistName = playlist.name
this.editedPlaylistDescription = playlist.description
this.$nextTick(() => this.$refs.editPlaylistName.focus())
},
},
mounted() {
this.loadPlaylists()
async mounted() {
await this.loadPlaylists()
const args = this.getUrlArgs()
if (args.playlist) {
const playlist = this.playlistsById[args.playlist]
if (playlist) {
this.$emit('select', playlist)
} else {
this.$emit('select', {id: args.playlist})
}
}
},
unmouted() {
this.setUrlArgs({section: null})
},
}
</script>
@ -90,12 +261,14 @@ export default {
<style lang="scss" scoped>
.media-youtube-playlists {
height: 100%;
position: relative;
.playlist-body {
height: 100%;
}
:deep(.playlist.item) {
position: relative;
cursor: pointer;
.title {
@ -103,6 +276,33 @@ export default {
margin-top: 0.5em;
}
.actions {
position: absolute;
top: 0;
right: 0;
display: flex;
padding: 0.5em;
background: rgba(0, 0, 0, 0.25);
opacity: 0.9;
border-radius: 0 0 0.5em 0.5em;
transition: opacity 0.2s;
z-index: 1;
button {
background: none;
border: none;
color: white;
cursor: pointer;
transition: transform 0.2s;
flex: 1;
&:hover {
color: $default-hover-fg;
transform: scale(1.2);
}
}
}
&:hover {
text-decoration: underline;
@ -111,5 +311,51 @@ export default {
}
}
}
:deep(.modal) {
.edit-playlist-form {
min-width: 300px;
display: flex;
flex-direction: column;
.row {
margin: 0.5em 0;
input {
border: $default-border;
border-radius: 1em;
padding: 0.5em;
width: 100%;
&:focus {
border: 1px solid $selected-fg;
}
}
&.buttons {
display: flex;
justify-content: flex-end;
margin-top: 0.5em;
.btn-container {
display: flex;
justify-content: center;
}
}
button {
margin: 0 0.5em;
padding: 0.5em;
border-radius: 1em;
cursor: pointer;
transition: background 0.2s;
&:hover {
background: $hover-bg;
}
}
}
}
}
}
</style>

34
platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/Subscriptions.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="media-youtube-subscriptions">
<div class="subscriptions-index" v-if="!selectedChannel">
<div class="subscriptions-index" v-if="!selectedChannel?.id">
<Loading v-if="loading" />
<NoItems :with-shadow="false" v-else-if="!channels?.length">
No channels found.
@ -20,7 +20,14 @@
</div>
<div class="subscription-body" v-else>
<Channel :id="selectedChannel" :filter="filter" @play="$emit('play', $event)" />
<Channel
:id="selectedChannel.id"
:filter="filter"
@add-to-playlist="$emit('add-to-playlist', $event)"
@download="$emit('download', $event)"
@download-audio="$emit('download-audio', $event)"
@play="$emit('play', $event)"
/>
</div>
</div>
</template>
@ -32,8 +39,15 @@ import Loading from "@/components/Loading";
import Utils from "@/Utils";
export default {
emits: ['play', 'select'],
mixins: [Utils],
emits: [
'add-to-playlist',
'download',
'download-audio',
'play',
'select',
],
components: {
Channel,
Loading,
@ -42,7 +56,7 @@ export default {
props: {
selectedChannel: {
type: String,
type: Object,
default: null,
},
@ -79,10 +93,18 @@ export default {
this.loading = false
}
},
initView() {
const args = this.getUrlArgs()
if (args.channel) {
this.$emit('select', {id: args.channel})
}
},
},
mounted() {
this.loadSubscriptions()
async mounted() {
await this.loadSubscriptions()
this.initView()
},
}
</script>

128
platypush/backend/http/webapp/src/components/panels/Media/Providers/YouTube/header.scss Normal file
View file

@ -0,0 +1,128 @@
$banner-height: var(--banner-height);
$info-bg: rgba(0, 0, 0, 0.5);
$info-fg: rgba(255, 255, 255, 0.9);
@include until($tablet) {
.playlist-container, .channel {
--banner-height: 5em;
}
}
@include from($tablet) {
.playlist-container, .channel {
--banner-height: 100px;
}
}
.header {
border-bottom: $default-border-2;
margin-bottom: 0.5em;
position: relative;
overflow-y: auto;
.banner {
height: $banner-height;
display: flex;
background-color: black;
justify-content: center;
img {
max-width: 800px;
max-height: 100%;
flex: 1;
}
}
.image {
height: 100px;
margin: -2.5em 2em 0.5em 0.5em;
img {
height: 100%;
border-radius: 50%;
}
}
.row {
display: flex;
@include from($desktop) {
flex-direction: row;
}
.info {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
background-color: $info-bg;
.row {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
padding: 0 0.5em;
}
}
}
.info-container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: $info-bg;
color: $info-fg;
display: flex;
flex-direction: column;
a {
color: $info-fg !important;
&:hover {
color: $default-hover-fg !important;
}
}
.title {
letter-spacing: 0.1em;
color: $info-fg !important;
}
.n-items {
/* Align to the right */
margin-left: auto;
padding: 0 0.5em;
}
}
.title-container {
max-height: var(--banner-height);
overflow-y: hidden;
}
.title {
height: 100%;
align-content: center;
color: $default-fg-2;
font-size: 1.7em;
font-weight: bold;
margin: 0.5em 0;
text-decoration: dotted;
&:hover {
color: $default-hover-fg;
}
}
.description {
font-size: 0.9em;
margin-right: 0.5em;
}
}
.media-results {
height: calc(100% - #{$banner-height} - 1em);
}

54
platypush/backend/http/webapp/src/components/panels/Media/Results.vue
View file

@ -4,17 +4,24 @@
<div class="grid" ref="grid" v-if="results?.length" @scroll="onScroll">
<Item v-for="(item, i) in visibleResults"
:key="i"
:item="item"
:selected="selectedResult === i"
:hidden="!!Object.keys(sources || {}).length && !sources[item.type]"
:item="item"
:playlist="playlist"
:selected="selectedResult === i"
@add-to-playlist="$emit('add-to-playlist', item)"
@open-channel="$emit('open-channel', item)"
@remove-from-playlist="$emit('remove-from-playlist', item)"
@select="$emit('select', i)"
@play="$emit('play', item)"
@view="$emit('view', item)"
@download="$emit('download', item)" />
@download="$emit('download', item)"
@download-audio="$emit('download-audio', item)"
/>
</div>
<Modal ref="infoModal" title="Media info" @close="$emit('select', null)">
<Info :item="results[selectedResult]"
:pluginName="pluginName"
@play="$emit('play', results[selectedResult])"
v-if="selectedResult != null" />
</Modal>
@ -29,13 +36,28 @@ import Modal from "@/components/Modal";
export default {
components: {Info, Item, Loading, Modal},
emits: ['select', 'play', 'view', 'download', 'scroll-end'],
emits: [
'add-to-playlist',
'download',
'download-audio',
'open-channel',
'play',
'remove-from-playlist',
'scroll-end',
'select',
'view',
],
props: {
loading: {
type: Boolean,
default: false,
},
pluginName: {
type: String,
},
results: {
type: Array,
default: () => [],
@ -59,6 +81,10 @@ export default {
type: Number,
default: 25,
},
playlist: {
default: null,
},
},
data() {
@ -69,14 +95,18 @@ export default {
computed: {
visibleResults() {
return this.results
let results = this.results
.filter((item) => {
if (!this.filter)
if (!this.filter?.length)
return true
return item.title.toLowerCase().includes(this.filter.toLowerCase())
})
.slice(0, this.maxResultIndex)
if (this.maxResultIndex != null)
results = results.slice(0, this.maxResultIndex)
return results
},
},
@ -91,12 +121,19 @@ export default {
return
this.$emit('scroll-end')
this.maxResultIndex += this.resultIndexStep
if (this.resultIndexStep != null)
this.maxResultIndex += this.resultIndexStep
},
},
mounted() {
this.$watch('selectedResult', (value) => {
if (value?.item_type === 'playlist' || value?.item_type === 'channel') {
this.$emit('select', null)
return
}
if (value == null)
this.$refs.infoModal?.close()
else
@ -114,6 +151,7 @@ export default {
width: 100%;
height: 100%;
background: $background-color;
position: relative;
.grid {
height: 100%;

2
platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue
View file

@ -16,6 +16,7 @@
@add-to-queue="$emit('load-tracks', {tracks: $event, play: false})"
@add-to-queue-and-play="$emit('load-tracks', {tracks: $event, play: true})"
@back="$emit('playlist-edit', null)"
@download="$emit('download', $event)"
@info="$emit('info', $event)"
@move="$emit('track-move', {...$event, playlist: editedPlaylist})"
@play="$emit('load-tracks', {tracks: [$event], play: true})"
@ -104,6 +105,7 @@ export default {
emits: [
'add-to-playlist',
'download',
'info',
'load',
'load-tracks',

18
platypush/backend/http/webapp/src/router/index.js
View file

@ -1,45 +1,39 @@
import { createWebHistory, createRouter } from "vue-router";
import Dashboard from "@/views/Dashboard.vue";
import NotFound from "@/views/NotFound";
import Login from "@/views/Login";
import Register from "@/views/Register";
import Panel from "@/views/Panel";
import Plugin from "@/views/Plugin";
const routes = [
{
path: "/",
name: "Panel",
component: Panel,
component: () => import(/* webpackChunkName: "panel" */ "@/views/Panel"),
},
{
path: "/dashboard/:name",
name: "Dashboard",
component: Dashboard,
component: () => import(/* webpackChunkName: "dashboard" */ "@/views/Dashboard"),
},
{
path: "/plugin/:plugin",
name: "Plugin",
component: Plugin,
component: () => import(/* webpackChunkName: "plugin" */ "@/views/Plugin"),
},
{
path: "/login",
name: "Login",
component: Login,
component: () => import(/* webpackChunkName: "login" */ "@/views/Login"),
},
{
path: "/register",
name: "Register",
component: Register,
component: () => import(/* webpackChunkName: "register" */ "@/views/Register"),
},
{
path: "/:catchAll(.*)",
component: NotFound,
component: () => import(/* webpackChunkName: "notfound" */ "@/views/NotFound"),
},
];

27
platypush/backend/http/webapp/src/style/animations.scss
View file

@ -26,3 +26,30 @@
display: none;
}
}
.glow {
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-fill-mode: both;
animation-name: glow;
-webkit-animation-name: glow;
}
.loop {
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
@keyframes glow {
0% {opacity: 1; box-shadow: 0 0 5px #fff;}
10% {opacity: 0.9; box-shadow: 0 0 10px $active-glow-fg-1;}
20% {opacity: 0.8; box-shadow: 0 0 20px $active-glow-fg-1;}
30% {opacity: 0.7; box-shadow: 0 0 30px $active-glow-fg-1;}
40% {opacity: 0.6; box-shadow: 0 0 40px $active-glow-fg-1;}
50% {opacity: 0.5; box-shadow: 0 0 50px $active-glow-fg-1;}
60% {opacity: 0.6; box-shadow: 0 0 40px $active-glow-fg-1;}
70% {opacity: 0.7; box-shadow: 0 0 30px $active-glow-fg-1;}
80% {opacity: 0.8; box-shadow: 0 0 20px $active-glow-fg-1;}
90% {opacity: 0.9; box-shadow: 0 0 10px $active-glow-fg-1;}
100% {opacity: 1; box-shadow: 0 0 5px #fff;}
}

2
platypush/backend/http/webapp/src/style/themes/light.scss
View file

@ -87,6 +87,8 @@ $default-link-fg: #5f7869 !default;
/// Active
$active-glow-bg-1: #d4ffe3 !default;
$active-glow-bg-2: #9cdfb0 !default;
$active-glow-fg-1: #32b646 !default;
$active-glow-fg-2: #5f7869 !default;
/// Hover
$default-hover-fg: #35b870 !default;

6
platypush/backend/http/webapp/src/utils/Api.vue
View file

@ -72,7 +72,11 @@ export default {
action: action,
args: args,
}, timeout, showError);
}
},
timeout(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
},
},
}
</script>

8
platypush/backend/http/webapp/src/utils/DateTime.vue
View file

@ -3,13 +3,17 @@ export default {
name: "DateTime",
methods: {
formatDate(date, year=false) {
if (typeof date === 'string')
if (typeof date === 'number')
date = new Date(date * 1000)
else if (typeof date === 'string')
date = new Date(Date.parse(date))
return date.toDateString().substring(0, year ? 15 : 10)
},
formatTime(date, seconds=true) {
if (typeof date === 'number')
date = new Date(date * 1000)
if (typeof date === 'string')
date = new Date(Date.parse(date))
@ -17,6 +21,8 @@ export default {
},
formatDateTime(date, year=false, seconds=true, skipTimeIfMidnight=false) {
if (typeof date === 'number')
date = new Date(date * 1000)
if (typeof date === 'string')
date = new Date(Date.parse(date))

4
platypush/backend/http/webapp/src/utils/Types.vue
View file

@ -114,6 +114,10 @@ export default {
return true
},
round(value, decimals) {
return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
},
},
}
</script>

18
platypush/backend/http/webapp/src/utils/Url.vue
View file

@ -16,7 +16,7 @@ export default {
.reduce((acc, obj) => {
const tokens = obj.split('=')
if (tokens[0]?.length)
acc[tokens[0]] = tokens[1]
acc[tokens[0]] = decodeURIComponent(tokens[1])
return acc
}, {})
},
@ -40,10 +40,24 @@ export default {
window.location.href = location
},
encodeValue(value) {
if (!value?.length || value === 'null' || value === 'undefined')
return ''
// Don't re-encode the value if it's already encoded
if (value.match(/%[0-9A-F]{2}/i))
return value
return encodeURIComponent(value)
},
fragmentFromArgs(args) {
return Object.entries(args)
.filter(
([key, value]) => this.encodeValue(key)?.length && this.encodeValue(value)?.length
)
.map(
([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`
([key, value]) => `${this.encodeValue(key)}=${this.encodeValue(value)}`
)
.join('&')
},