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

Added inline video player.

Browse source
This commit is contained in:
ArabCoders 2023-11-25 16:41:25 +03:00
parent f779cf40f5
commit d6edc53920
2 changed files with 26 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/App.vue
View file

@ -2,12 +2,21 @@
<PageHeader :config="config" />
<formAdd :config="config" @addItem="addItem" />
<DownloadingList :config="config" :queue="downloading" @deleteItem="deleteItem" />
<PageCompleted :config="config" :completed="completed" @deleteItem="deleteItem" @addItem="addItem" />
<PageCompleted :config="config" :completed="completed" @deleteItem="deleteItem" @addItem="addItem"
@playItem="playItem" />
<div class="modal" :class="{ 'is-active': video_link }">
<div class="modal-background"></div>
<div class="modal-content">
<video :src="video_link" controls autoplay loop preload="auto" class="is-fullwidth"></video>
</div>
<button class="modal-close is-large" aria-label="close" @click="video_link = ''"></button>
</div>
<PageFooter />
</template>
<script setup>
import { onMounted, reactive } from 'vue'
import { onMounted, reactive, ref } from 'vue'
import PageHeader from './components/Page-Header'
import formAdd from './components/Form-Add'
import DownloadingList from './components/Page-Downloading'
@ -27,6 +36,7 @@ const config = reactive({
const downloading = reactive({});
const completed = reactive({});
const video_link = ref('');
onMounted(() => {
const socket = io(process.env.VUE_APP_BASE_URL);
@ -147,5 +157,15 @@ const addItem = (item) => {
toast.error(`Failed to add link. ${error.message}`);
});
};
const playItem = (item) => {
let baseDir = 'download/';
if (item.folder) {
baseDir += item.folder + '/';
}
video_link.value = config.app.url_host + config.app.url_prefix + baseDir + encodeURIComponent(item.filename);
};
</script>

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

@ -63,7 +63,8 @@
<div class="card" :class="{ 'is-bordered-danger': item.error ? true : false }">
<header class="card-header el has-tooltip" :data-tooltip="item.title">
<div class="card-header-title has-text-centered el is-block">
<a v-if="item.filename" referrerpolicy="no-referrer" :href="makeDownload(config, item)" target="_blank">
<a v-if="item.filename" referrerpolicy="no-referrer" href="javascript:void(0)"
@click="$emit('playItem', item);">
{{ item.title }}
</a>
<span v-else>{{ item.title }}</span>
@ -109,7 +110,7 @@
</a>
</div>
<div class="column" v-if="item.filename">
<a class="button is-fullwidth is-primary" :href="makeDownload(config, item)">
<a class="button is-fullwidth is-primary" :href="makeDownload(config, item)" :download="item.filename?.split('/').reverse()[0]">
<span class="icon-text">
<span class="icon">
<i class="fa-solid fa-download"></i>
@ -166,7 +167,7 @@
import { defineProps, computed, ref, watch, defineEmits } from 'vue';
import moment from "moment";
const emits = defineEmits(['deleteItem', 'addItem']);
const emits = defineEmits(['deleteItem', 'addItem', 'playItem']);
const props = defineProps({
completed: {