danvics/ytptube
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Added collapsible views.

Browse source
This commit is contained in:
ArabCoders 2023-11-29 22:45:16 +03:00
parent 2b05f0b17a
commit a73c32ea66
4 changed files with 263 additions and 236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
frontend/src/assets/css/style.css
View file

@ -31,6 +31,10 @@
background-color: #000; background-color: #000;
} }
.is-unselectable {
user-select: none;
}
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
* { * {
unicode-bidi: plaintext; unicode-bidi: plaintext;
@ -64,4 +68,8 @@
.container { .container {
background-color: #0f1010; background-color: #0f1010;
} }
.is-unselectable {
user-select: none;
}
} }

292
frontend/src/components/Page-Completed.vue
View file

@ -1,176 +1,185 @@
<template> <template>
<h1 class="is-size-3"> <h1 class="is-size-3 is-clickable is-unselectable" @click="showCompleted = !showCompleted">
Completed <span class="icon-text">
<span class="icon">
<font-awesome-icon :icon="showCompleted ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
</span>
<span>Completed</span>
</span>
</h1> </h1>
<div class="columns has-text-centered" v-if="hasItems"> <div v-if="showCompleted">
<div class="column"> <div class="columns has-text-centered" v-if="hasItems">
<button type="button" class="button is-fullwidth is-ghost is-inverted" @click="masterSelectAll = !masterSelectAll"> <div class="column">
<span class="icon-text"> <button type="button" class="button is-fullwidth is-ghost is-inverted"
<span class="icon"> @click="masterSelectAll = !masterSelectAll">
<font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" /> <span class="icon-text">
<span class="icon">
<font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
</span>
<span v-if="!masterSelectAll">Select All</span>
<span v-else>Unselect All</span>
</span> </span>
<span v-if="!masterSelectAll">Select All</span> </button>
<span v-else>Unselect All</span> </div>
</span> <div class="column">
</button> <button type="button" class="button is-fullwidth is-danger is-inverted" :disabled="!hasSelected"
</div> @click="$emit('deleteItem', 'completed', selectedElms); selectedElms = []">
<div class="column"> <span class="icon-text">
<button type="button" class="button is-fullwidth is-danger is-inverted" :disabled="!hasSelected" <span class="icon">
@click="$emit('deleteItem', 'completed', selectedElms); selectedElms = []"> <font-awesome-icon icon="fa-solid fa-trash-can" />
<span class="icon-text"> </span>
<span class="icon"> <span>Remove Selected</span>
<font-awesome-icon icon="fa-solid fa-trash-can" />
</span> </span>
<span>Remove Selected</span> </button>
</span> </div>
</button> <div class="column" v-if="hasCompleted">
</div> <button type="button" class="button is-fullwidth is-primary is-inverted" @click="clearCompleted">
<div class="column" v-if="hasCompleted"> <span class="icon-text">
<button type="button" class="button is-fullwidth is-primary is-inverted" @click="clearCompleted"> <span class="icon">
<span class="icon-text"> <font-awesome-icon icon="fa-solid fa-circle-check" />
<span class="icon"> </span>
<font-awesome-icon icon="fa-solid fa-circle-check" /> <span>Clear Completed</span>
</span> </span>
<span>Clear Completed</span> </button>
</span> </div>
</button> <div class="column" v-if="hasFailed">
</div> <button type="button" class="button is-fullwidth is-info is-inverted" @click="clearFailed">
<div class="column" v-if="hasFailed"> <span class="icon-text">
<button type="button" class="button is-fullwidth is-info is-inverted" @click="clearFailed"> <span class="icon">
<span class="icon-text"> <font-awesome-icon icon="fa-solid fa-circle-xmark" />
<span class="icon"> </span>
<font-awesome-icon icon="fa-solid fa-circle-xmark" /> <span>Clear Failed</span>
</span> </span>
<span>Clear Failed</span> </button>
</span> </div>
</button> <div class="column" v-if="hasFailed">
</div> <button type="button" class="button is-fullwidth is-warning is-inverted" @click="requeueFailed">
<div class="column" v-if="hasFailed"> <span class="icon-text">
<button type="button" class="button is-fullwidth is-warning is-inverted" @click="requeueFailed"> <span class="icon">
<span class="icon-text"> <font-awesome-icon icon="fa-solid fa-rotate-right" />
<span class="icon"> </span>
<font-awesome-icon icon="fa-solid fa-rotate-right" /> <span>Re-queue Failed</span>
</span> </span>
<span>Re-queue Failed</span> </button>
</span> </div>
</button>
</div> </div>
</div>
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column is-6" v-for="item in completed" :key="item._id"> <div class="column is-6" v-for="item in completed" :key="item._id">
<div class="card" :class="{ 'is-bordered-danger': item.error ? true : false }"> <div class="card" :class="{ 'is-bordered-danger': item.error ? true : false }">
<header class="card-header el has-tooltip" :data-tooltip="item.title"> <header class="card-header el has-tooltip" :data-tooltip="item.title">
<div class="card-header-title has-text-centered el is-block"> <div class="card-header-title has-text-centered el is-block">
<a v-if="item.filename" referrerpolicy="no-referrer" :href="makeDownload(config, item, 'm3u8')" <a v-if="item.filename" referrerpolicy="no-referrer" :href="makeDownload(config, item, 'm3u8')"
@click.prevent="$emit('playItem', item)"> @click.prevent="$emit('playItem', item)">
{{ item.title }} {{ item.title }}
</a>
<span v-else>{{ item.title }}</span>
</div>
</header>
<div class="card-content">
<div class="columns is-multiline">
<div class="column is-12" v-if="item.error">
<span class="has-text-danger">{{ item.error }}</span>
</div>
<div class="column is-4 has-text-centered">
<span class="icon-text">
<span class="icon"
:class="{ 'has-text-success': item.status === 'finished', 'has-text-danger': item.status !== 'finished' }">
<font-awesome-icon
:icon="item.status == 'finished' ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'" />
</span>
<span>{{ capitalize(item.status) }}</span>
</span>
</div>
<div class="column is-4 has-text-centered">
<span :date-datetime="item.datetime"
:data-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
{{ moment(item.datetime).fromNow() }}
</span>
</div>
<div class="column is-4 has-text-centered">
<label class="checkbox is-block">
<input class="completed-checkbox" type="checkbox" v-model="selectedElms" :id="'checkbox-' + item._id"
:value="item._id">
Select
</label>
</div>
</div>
<div class="columns">
<div class="column" v-if="item.status != 'finished'">
<a class="button is-warning is-fullwidth" data-tooltip="Re-queue failed download."
@click="reQueueItem(item._id, item)">
<span class="icon-text">
<span class="icon">
<font-awesome-icon icon="fa-solid fa-rotate-right" />
</span>
<span>Re-queue</span>
</span>
</a> </a>
<span v-else>{{ item.title }}</span>
</div> </div>
<div class="column" v-if="item.filename"> </header>
<a class="button is-fullwidth is-primary" :href="makeDownload(config, item)" <div class="card-content">
:download="item.filename?.split('/').reverse()[0]"> <div class="columns is-multiline">
<div class="column is-12" v-if="item.error">
<span class="has-text-danger">{{ item.error }}</span>
</div>
<div class="column is-4 has-text-centered">
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon"
<font-awesome-icon icon="fa-solid fa-download" /> :class="{ 'has-text-success': item.status === 'finished', 'has-text-danger': item.status !== 'finished' }">
<font-awesome-icon
:icon="item.status == 'finished' ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-xmark'" />
</span> </span>
<span>Download</span> <span>{{ capitalize(item.status) }}</span>
</span> </span>
</a> </div>
<div class="column is-4 has-text-centered">
<span :date-datetime="item.datetime"
:data-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
{{ moment(item.datetime).fromNow() }}
</span>
</div>
<div class="column is-4 has-text-centered">
<label class="checkbox is-block">
<input class="completed-checkbox" type="checkbox" v-model="selectedElms" :id="'checkbox-' + item._id"
:value="item._id">
Select
</label>
</div>
</div> </div>
<div class="column"> <div class="columns">
<a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'completed', item._id)"> <div class="column" v-if="item.status != 'finished'">
<span class="icon-text"> <a class="button is-warning is-fullwidth" data-tooltip="Re-queue failed download."
<span class="icon"> @click="reQueueItem(item._id, item)">
<font-awesome-icon icon="fa-solid fa-trash-can" /> <span class="icon-text">
<span class="icon">
<font-awesome-icon icon="fa-solid fa-rotate-right" />
</span>
<span>Re-queue</span>
</span> </span>
<span>Remove</span> </a>
</span> </div>
</a> <div class="column" v-if="item.filename">
</div> <a class="button is-fullwidth is-primary" :href="makeDownload(config, item)"
<div class="column"> :download="item.filename?.split('/').reverse()[0]">
<a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url"> <span class="icon-text">
<span class="icon-text"> <span class="icon">
<span class="icon"> <font-awesome-icon icon="fa-solid fa-download" />
<font-awesome-icon icon="fa-solid fa-up-right-from-square" /> </span>
<span>Download</span>
</span> </span>
<span>Visit Link</span> </a>
</span> </div>
</a> <div class="column">
<a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'completed', item._id)">
<span class="icon-text">
<span class="icon">
<font-awesome-icon icon="fa-solid fa-trash-can" />
</span>
<span>Remove</span>
</span>
</a>
</div>
<div class="column">
<a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
<span class="icon-text">
<span class="icon">
<font-awesome-icon icon="fa-solid fa-up-right-from-square" />
</span>
<span>Visit Link</span>
</span>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="content has-text-centered" v-if="!hasCompleted"> <div class="content has-text-centered" v-if="!hasCompleted">
<p v-if="config.isConnected"> <p v-if="config.isConnected">
<span class="icon-text"> <span class="icon-text">
<span class="icon has-text-success"> <span class="icon has-text-success">
<font-awesome-icon icon="fa-solid fa-circle-check" /> <font-awesome-icon icon="fa-solid fa-circle-check" />
</span>
<span>No downloads records.</span>
</span> </span>
<span>No downloads records.</span> </p>
</span> <p v-else>
</p> <span class="icon-text">
<p v-else> <span class="icon">
<span class="icon-text"> <font-awesome-icon icon="fa-solid fa-spinner fa-spin" />
<span class="icon"> </span>
<font-awesome-icon icon="fa-solid fa-spinner fa-spin" /> <span>Connecting...</span>
</span> </span>
<span>Connecting...</span> </p>
</span> </div>
</p>
</div> </div>
</template> </template>
<script setup> <script setup>
import { defineProps, computed, ref, watch, defineEmits } from 'vue'; import { defineProps, computed, ref, watch, defineEmits } from 'vue';
import moment from "moment"; import moment from "moment";
import { useStorage } from '@vueuse/core'
const emits = defineEmits(['deleteItem', 'addItem', 'playItem']); const emits = defineEmits(['deleteItem', 'addItem', 'playItem']);
@ -187,6 +196,7 @@ const props = defineProps({
const selectedElms = ref([]); const selectedElms = ref([]);
const masterSelectAll = ref(false); const masterSelectAll = ref(false);
const showCompleted = useStorage('showCompleted', true)
watch(masterSelectAll, (value) => { watch(masterSelectAll, (value) => {
for (const key in props.completed) { for (const key in props.completed) {

195
frontend/src/components/Page-Downloading.vue
View file

@ -1,121 +1,129 @@
<template> <template>
<h1 class="is-size-3"> <h1 class="is-size-3 is-clickable is-unselectable" @click="showQueue = !showQueue">
Queue <icon class="icon-text">
<span class="icon">
<font-awesome-icon :icon="showQueue ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'" />
</span>
<span>Queue</span>
</icon>
</h1> </h1>
<div class="columns has-text-centered" v-if="hasQueuedItems"> <div v-if="showQueue">
<div class="column"> <div class="columns has-text-centered" v-if="hasQueuedItems">
<button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll"> <div class="column">
<span class="icon-text"> <button type="button" class="button is-fullwidth is-ghost" @click="masterSelectAll = !masterSelectAll">
<span class="icon"> <span class="icon-text">
<font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" /> <span class="icon">
<font-awesome-icon :icon="!masterSelectAll ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" />
</span>
<span v-if="!masterSelectAll">Select All</span>
<span v-else>Unselect All</span>
</span> </span>
<span v-if="!masterSelectAll">Select All</span> </button>
<span v-else>Unselect All</span> </div>
</span> <div class="column">
</button> <button type="button" class="button is-fullwidth is-danger" :disabled="!hasSelected"
</div> @click="$emit('deleteItem', 'queue', selectedElms); selectedElms = []">
<div class="column"> <span class="icon-text">
<button type="button" class="button is-fullwidth is-danger" :disabled="!hasSelected" <span class="icon">
@click="$emit('deleteItem', 'queue', selectedElms); selectedElms = []"> <font-awesome-icon icon="fa-solid fa-trash-can" />
<span class="icon-text"> </span>
<span class="icon"> <span>Cancel Selected</span>
<font-awesome-icon icon="fa-solid fa-trash-can" />
</span> </span>
<span>Cancel Selected</span> </button>
</span> </div>
</button>
</div> </div>
</div>
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column is-6" v-for="item in queue" :key="item._id"> <div class="column is-6" v-for="item in queue" :key="item._id">
<div class="card"> <div class="card">
<header class="card-header el has-tooltip" :data-tooltip="item.title"> <header class="card-header el has-tooltip" :data-tooltip="item.title">
<div class="card-header-title has-text-centered el is-block"> <div class="card-header-title has-text-centered el is-block">
{{ item.title }} {{ item.title }}
</div> </div>
</header> </header>
<div class="card-content"> <div class="card-content">
<div class="columns is-multiline"> <div class="columns is-multiline">
<div class="column is-12"> <div class="column is-12">
<div id="progress-bar" class="is-round"> <div id="progress-bar" class="is-round">
<div id="progress-percentage">{{ updateProgress(item) }}</div> <div id="progress-percentage">{{ updateProgress(item) }}</div>
<div id="progress" :style="{ width: percentPipe(item.percent) + '%' }"></div> <div id="progress" :style="{ width: percentPipe(item.percent) + '%' }"></div>
</div>
</div>
<div class="column is-4 has-text-centered">
<span class="icon-text">
<span class="icon" :class="{ 'has-text-success': item.status == 'downloading' }">
<font-awesome-icon
:icon="item.status == 'downloading' ? 'fa-solid fa-download' : 'fa-solid fa-spinner fa-spin'" />
</span>
<span>{{ capitalize(item.status) }}</span>
</span>
</div>
<div class="column is-4 has-text-centered">
<span :data-datetime="item.datetime"
:data-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
{{ moment(item.datetime).fromNow() }}
</span>
</div>
<div class="column is-4 has-text-centered">
<label class="checkbox is-block">
<input class="completed-checkbox" type="checkbox" v-model="selectedElms" :value="item._id">
Select
</label>
</div> </div>
</div> </div>
<div class="column is-4 has-text-centered"> <div class="columns">
<span class="icon-text"> <div class="column">
<span class="icon" :class="{ 'has-text-success': item.status == 'downloading' }"> <a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'queue', item._id)">
<font-awesome-icon <span class="icon-text">
:icon="item.status == 'downloading' ? 'fa-solid fa-download' : 'fa-solid fa-spinner fa-spin'" /> <span class="icon">
</span> <font-awesome-icon icon="fa-solid fa-trash-can" />
<span>{{ capitalize(item.status) }}</span> </span>
</span> <span>Cancel</span>
</div>
<div class="column is-4 has-text-centered">
<span :data-datetime="item.datetime"
:data-tooltip="moment(item.datetime).format('MMMM Do YYYY, h:mm:ss a')">
{{ moment(item.datetime).fromNow() }}
</span>
</div>
<div class="column is-4 has-text-centered">
<label class="checkbox is-block">
<input class="completed-checkbox" type="checkbox" v-model="selectedElms" :value="item._id">
Select
</label>
</div>
</div>
<div class="columns">
<div class="column">
<a class="button is-danger is-fullwidth" @click="$emit('deleteItem', 'queue', item._id)">
<span class="icon-text">
<span class="icon">
<font-awesome-icon icon="fa-solid fa-trash-can" />
</span> </span>
<span>Cancel</span> </a>
</span> </div>
</a> <div class="column">
</div> <a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url">
<div class="column"> <span class="icon-text">
<a referrerpolicy="no-referrer" class="button is-link is-fullwidth" target="_blank" :href="item.url"> <span class="icon">
<span class="icon-text"> <font-awesome-icon icon="fa-solid fa-up-right-from-square" />
<span class="icon"> </span>
<font-awesome-icon icon="fa-solid fa-up-right-from-square" /> <span>Visit Link</span>
</span> </span>
<span>Visit Link</span> </a>
</span> </div>
</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="content has-text-centered" v-if="!hasQueuedItems"> <div class="content has-text-centered" v-if="!hasQueuedItems">
<p v-if="config.isConnected"> <p v-if="config.isConnected">
<span class="icon-text"> <span class="icon-text">
<span class="icon has-text-success"> <span class="icon has-text-success">
<font-awesome-icon icon="fa-solid fa-circle-check" /> <font-awesome-icon icon="fa-solid fa-circle-check" />
</span>
<span>No queued items.</span>
</span> </span>
<span>No queued items.</span> </p>
</span> <p v-else>
</p> <span class="icon-text">
<p v-else> <span class="icon">
<span class="icon-text"> <font-awesome-icon icon="fa-solid fa-spinner fa-spin" />
<span class="icon"> </span>
<font-awesome-icon icon="fa-solid fa-spinner fa-spin" /> <span>Connecting...</span>
</span> </span>
<span>Connecting...</span> </p>
</span> </div>
</p>
</div> </div>
</template> </template>
<script setup> <script setup>
import { defineProps, defineEmits, ref, watch, computed } from 'vue'; import { defineProps, defineEmits, ref, watch, computed } from 'vue';
import moment from "moment"; import moment from "moment";
import { useStorage } from '@vueuse/core'
defineEmits(['deleteItem']); defineEmits(['deleteItem']);
@ -132,6 +140,7 @@ const props = defineProps({
const selectedElms = ref([]); const selectedElms = ref([]);
const masterSelectAll = ref(false); const masterSelectAll = ref(false);
const showQueue = useStorage('showQueue', true)
watch(masterSelectAll, (value) => { watch(masterSelectAll, (value) => {
for (const key in props.queue) { for (const key in props.queue) {

4
frontend/src/main.js
View file

@ -5,7 +5,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import { import {
faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare, faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
faSpinner, faWifi, faSignal faSpinner, faWifi, faSignal, faArrowUp, faArrowDown,
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons' import { faSquare, faSquareCheck } from '@fortawesome/free-regular-svg-icons'
@ -17,7 +17,7 @@ import './assets/css/bulma-dark.css'
import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css'; import '@creativebulma/bulma-tooltip/dist/bulma-tooltip.min.css';
library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare, library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleCheck, faRotateRight, faDownload, faUpRightFromSquare,
faSquare, faSquareCheck, faSpinner, faWifi, faSignal) faSquare, faSquareCheck, faSpinner, faWifi, faSignal, faArrowUp, faArrowDown,)
const app = createApp(App); const app = createApp(App);
app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1); app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1);