mirror of
https://github.com/VueTorrent/VueTorrent.git
synced 2025-05-05 23:05:07 +03:00
trackers & peers + basic mobile support
This commit is contained in:
Daan Wijns
parent
09832e6f1a
commit
8c72dc9aaf
34 changed files with 14352 additions and 12704 deletions
src/components/Modals
|
|
@ -1,144 +1,143 @@
|
|||
<template>
|
||||
<v-dialog
|
||||
max-width="500px"
|
||||
v-model="dialog"
|
||||
>
|
||||
<v-card>
|
||||
<v-container :class="`pa-0 project done`">
|
||||
<v-card-title class="justify-center">
|
||||
<h2>Add a new Torrent</h2>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-form v-model="valid" ref="form">
|
||||
<v-container>
|
||||
|
||||
<v-row no-gutters>
|
||||
<v-col ref="fileZone">
|
||||
<v-file-input
|
||||
v-model="files"
|
||||
color="deep-purple accent-4"
|
||||
counter
|
||||
label="File input"
|
||||
multiple
|
||||
placeholder="Select your files"
|
||||
prepend-icon="mdi-paperclip"
|
||||
outlined
|
||||
:show-size="1000"
|
||||
>
|
||||
<template v-slot:selection="{ index, text }">
|
||||
<v-chip
|
||||
v-if="index < 2"
|
||||
color="deep-purple accent-4"
|
||||
dark
|
||||
label
|
||||
small
|
||||
>
|
||||
{{ text }}
|
||||
</v-chip>
|
||||
<v-dialog max-width="500px" v-model="dialog">
|
||||
<v-card>
|
||||
<v-container :class="`pa-0 project done`">
|
||||
<v-card-title class="justify-center">
|
||||
<h2>Add a new Torrent</h2>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-form v-model="valid" ref="form">
|
||||
<v-container>
|
||||
<v-row no-gutters>
|
||||
<v-col ref="fileZone">
|
||||
<v-file-input
|
||||
v-model="files"
|
||||
color="deep-purple accent-4"
|
||||
counter
|
||||
label="File input"
|
||||
multiple
|
||||
placeholder="Select your files"
|
||||
prepend-icon="mdi-paperclip"
|
||||
outlined
|
||||
:show-size="1000"
|
||||
>
|
||||
<template
|
||||
v-slot:selection="{ index, text }"
|
||||
>
|
||||
<v-chip
|
||||
v-if="index < 2"
|
||||
color="deep-purple accent-4"
|
||||
dark
|
||||
label
|
||||
small
|
||||
>
|
||||
{{ text }}
|
||||
</v-chip>
|
||||
|
||||
<span
|
||||
v-else-if="index === 2"
|
||||
class="overline grey--text text--darken-3 mx-2"
|
||||
>
|
||||
+{{ files.length - 2 }} File(s)
|
||||
</span>
|
||||
</template>
|
||||
</v-file-input>
|
||||
<v-text-field
|
||||
label="URL"
|
||||
prepend-icon="mdi-link"
|
||||
:rows="$vuetify.breakpoint.xsOnly ? 1 : 3"
|
||||
required
|
||||
:autofocus="!phoneLayout"
|
||||
v-model="url"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<span
|
||||
v-else-if="index === 2"
|
||||
class="overline grey--text text--darken-3 mx-2"
|
||||
>
|
||||
+{{ files.length - 2 }} File(s)
|
||||
</span>
|
||||
</template>
|
||||
</v-file-input>
|
||||
<v-text-field
|
||||
label="URL"
|
||||
prepend-icon="mdi-link"
|
||||
:rows="
|
||||
$vuetify.breakpoint.xsOnly ? 1 : 3
|
||||
"
|
||||
required
|
||||
:autofocus="!phoneLayout"
|
||||
v-model="url"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-text-field
|
||||
v-model="directory"
|
||||
:placeholder="savepath"
|
||||
label="Download Directory"
|
||||
prepend-icon="folder"
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
v-model="directory"
|
||||
:placeholder="savepath"
|
||||
label="Download Directory"
|
||||
prepend-icon="folder"
|
||||
></v-text-field>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<v-form>
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn
|
||||
:loading="loading"
|
||||
text
|
||||
@click="submit"
|
||||
:disabled="!valid"
|
||||
class="blue_accent white--text mx-0 mt-3"
|
||||
>Add Torrent</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-form>
|
||||
</v-container>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
<v-form>
|
||||
<v-card-actions class="justify-center">
|
||||
<v-btn
|
||||
:loading="loading"
|
||||
text
|
||||
@click="submit"
|
||||
:disabled="!valid"
|
||||
class="blue_accent white--text mx-0 mt-3"
|
||||
>Add Torrent</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
</v-form>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import Modal from "@/mixins/Modal";
|
||||
import { mapGetters } from 'vuex'
|
||||
import Modal from '@/mixins/Modal'
|
||||
import qbit from '@/services/qbit'
|
||||
export default {
|
||||
name: "AddModal",
|
||||
mixins: [Modal],
|
||||
data() {
|
||||
return {
|
||||
files: [],
|
||||
directory: "",
|
||||
inputRules: [
|
||||
(v) =>
|
||||
v.indexOf("magnet") > -1 ||
|
||||
v.indexOf("http") > -1 ||
|
||||
this.validFile ||
|
||||
"Not a valid magnet link",
|
||||
],
|
||||
loading: false,
|
||||
url: null,
|
||||
valid: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if(this.files.length || this.url){
|
||||
let torrents = []
|
||||
let params= { urls: null};
|
||||
if(this.files.length) torrents.push(...this.files)
|
||||
if(this.url) params.urls = this.url
|
||||
if(this.directory) params.savepath = this.directory
|
||||
|
||||
qbit.addTorrents(params, torrents)
|
||||
name: 'AddModal',
|
||||
mixins: [Modal],
|
||||
data() {
|
||||
return {
|
||||
files: [],
|
||||
directory: '',
|
||||
inputRules: [
|
||||
v =>
|
||||
v.indexOf('magnet') > -1 ||
|
||||
v.indexOf('http') > -1 ||
|
||||
this.validFile ||
|
||||
'Not a valid magnet link'
|
||||
],
|
||||
loading: false,
|
||||
url: null,
|
||||
valid: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if (this.files.length || this.url) {
|
||||
let torrents = []
|
||||
let params = { urls: null }
|
||||
if (this.files.length) torrents.push(...this.files)
|
||||
if (this.url) params.urls = this.url
|
||||
if (this.directory) params.savepath = this.directory
|
||||
|
||||
this.resetForm()
|
||||
qbit.addTorrents(params, torrents)
|
||||
|
||||
this.$store.commit('TOGGLE_MODAL', 'addmodal')
|
||||
}
|
||||
this.resetForm()
|
||||
|
||||
this.$store.commit('TOGGLE_MODAL', 'addmodal')
|
||||
}
|
||||
},
|
||||
resetForm() {
|
||||
this.url = null
|
||||
;(this.files = []), (this.directory = null)
|
||||
}
|
||||
},
|
||||
resetForm(){
|
||||
this.url = null
|
||||
this.files = [],
|
||||
this.directory = null
|
||||
computed: {
|
||||
...mapGetters(['getSettings']),
|
||||
validFile() {
|
||||
return this.Files.length > 0
|
||||
},
|
||||
phoneLayout() {
|
||||
return this.$vuetify.breakpoint.xsOnly
|
||||
},
|
||||
savepath() {
|
||||
return this.getSettings().savePath
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['getSettings']),
|
||||
validFile() {
|
||||
return this.Files.length > 0;
|
||||
},
|
||||
phoneLayout() {
|
||||
return this.$vuetify.breakpoint.xsOnly;
|
||||
},
|
||||
savepath(){
|
||||
return this.getSettings().savePath
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,203 +0,0 @@
|
|||
<template>
|
||||
<v-dialog max-width="800px" v-model="dialog" scrollable>
|
||||
<v-card
|
||||
v-if="torrent"
|
||||
style="min-height: 400px; overflow:hidden !important"
|
||||
>
|
||||
<v-container :class="`pa-0 project ${torrent.state}`">
|
||||
<v-card-title class="justify-center primary">
|
||||
<h2 class="white--text">Torrent Detail</h2>
|
||||
</v-card-title>
|
||||
<v-tabs v-model="tab" background-color="primary" fixed-tabs>
|
||||
<v-tab v-for="item in items" :key="item.tab">
|
||||
{{ item.tab }}
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item>
|
||||
<v-card flat>
|
||||
<v-card-text style="font-size: 1.2em">
|
||||
<v-flex>
|
||||
<span class="grey--text">Torrent title </span>
|
||||
<span class="torrentmodaltext--text ">{{
|
||||
torrent.name
|
||||
}}</span>
|
||||
</v-flex>
|
||||
<v-flex class="mt-2">
|
||||
<span class="grey--text">hash </span>
|
||||
<span class="torrentmodaltext--text ">{{
|
||||
torrent.hash
|
||||
}}</span>
|
||||
</v-flex>
|
||||
<v-flex class="mt-2">
|
||||
<span class="grey--text">Size </span>
|
||||
<span class="torrentmodaltext--text ">
|
||||
{{ torrent.size }}
|
||||
</span>
|
||||
</v-flex>
|
||||
<v-flex class="mt-2">
|
||||
<span class="grey--text">Done: </span>
|
||||
<span class="torrentmodaltext--text ">
|
||||
{{ torrent.dloaded }}
|
||||
</span>
|
||||
</v-flex>
|
||||
<v-flex class="mt-2">
|
||||
<span class="grey--text">Download </span>
|
||||
<span class="torrentmodaltext--text ">{{
|
||||
torrent.dlspeed
|
||||
}}</span>
|
||||
</v-flex>
|
||||
<v-flex class="mt-2">
|
||||
<span class="grey--text">Upload </span>
|
||||
<span class="torrentmodaltext--text ">{{
|
||||
torrent.upspeed
|
||||
}}</span>
|
||||
</v-flex>
|
||||
<v-flex class="mt-2">
|
||||
<span class="grey--text">ETA </span>
|
||||
<span class="torrentmodaltext--text ">{{
|
||||
torrent.eta
|
||||
}}</span>
|
||||
</v-flex>
|
||||
<v-flex class="mt-2">
|
||||
<span class="grey--text">Peers </span>
|
||||
<span class="torrentmodaltext--text ">
|
||||
{{ torrent.num_leechs
|
||||
}}<span class="grey--text"
|
||||
>/{{ torrent.available_peers }}</span
|
||||
>
|
||||
</span>
|
||||
</v-flex>
|
||||
<v-flex class="mt-2">
|
||||
<span class=" grey--text">Seeds </span>
|
||||
<span class="torrentmodaltext--text ">
|
||||
{{ torrent.num_seeds
|
||||
}}<span class="grey--text"
|
||||
>/{{ torrent.available_seeds }}</span
|
||||
>
|
||||
</span>
|
||||
</v-flex>
|
||||
<v-flex class="mt-2">
|
||||
<span class=" grey--text">Ratio </span>
|
||||
<span class="torrentmodaltext--text ">
|
||||
{{ torrent.ratio }}%
|
||||
</span>
|
||||
</v-flex>
|
||||
<v-flex>
|
||||
<span class="grey--text">Status </span>
|
||||
<v-chip
|
||||
small
|
||||
:class="`${torrent.state} white--text my-2 caption`"
|
||||
>{{ torrent.state }}</v-chip
|
||||
>
|
||||
</v-flex>
|
||||
<v-flex>
|
||||
<v-progress-linear
|
||||
height="5"
|
||||
stream
|
||||
rounded
|
||||
color="cyan darken-1"
|
||||
background-color="cyan lighten-3"
|
||||
:buffer-value="torrent.progress"
|
||||
></v-progress-linear>
|
||||
</v-flex>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item>
|
||||
|
||||
<v-card flat class="scrollbar" style="overflow-y: auto !important;">
|
||||
<perfect-scrollbar>
|
||||
<v-card-text style="max-height: 500px; min-height: 400px;">
|
||||
<v-treeview
|
||||
v-model="tree"
|
||||
:items="fileTree"
|
||||
activatable
|
||||
item-key="name"
|
||||
open-on-click
|
||||
>
|
||||
<template v-slot:prepend="{ item, open }">
|
||||
<v-icon v-if="!item.icon">
|
||||
{{ open ? "mdi-folder-open" : "mdi-folder" }}
|
||||
</v-icon>
|
||||
<v-icon v-else>
|
||||
{{ item.icon }}
|
||||
</v-icon>
|
||||
</template>
|
||||
<template v-slot:append="{ item }">
|
||||
<span v-if="!item.icon">
|
||||
{{ item.children.length }} Files
|
||||
</span>
|
||||
<div v-else>
|
||||
<span>[{{ item.size }}]</span>
|
||||
<span class="ml-4">{{ item.progress }}%</span>
|
||||
</div>
|
||||
</template>
|
||||
</v-treeview>
|
||||
</v-card-text>
|
||||
</perfect-scrollbar>
|
||||
</v-card>
|
||||
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from "@/mixins/Modal";
|
||||
import { mapGetters } from "vuex";
|
||||
import qbit from "@/services/qbit";
|
||||
import { treeify } from "@/helpers";
|
||||
|
||||
export default {
|
||||
name: "TorrentDetailModal",
|
||||
mixins: [Modal],
|
||||
data() {
|
||||
return {
|
||||
tab: null,
|
||||
items: [{ tab: "Info" }, { tab: "Content" }],
|
||||
tempFileTree: [],
|
||||
fileTree: [],
|
||||
tree: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async getTorrentProperties() {
|
||||
const { data } = await qbit.getTorrentFiles(this.hash);
|
||||
// console.log(data)
|
||||
return data;
|
||||
},
|
||||
async getTorrentFiles() {
|
||||
const { data } = await qbit.getTorrentFiles(this.hash);
|
||||
this.fileTree = treeify(data);
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["getTorrent"]),
|
||||
hash() {
|
||||
return this.$store.state.selectedDetailTorrent;
|
||||
},
|
||||
torrent() {
|
||||
return this.getTorrent(this.hash);
|
||||
},
|
||||
torrentFiles() {
|
||||
let arr = this.getTorrentFiles();
|
||||
console.log(arr);
|
||||
return arr.map(this.addnode);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
dialog(visible) {
|
||||
if (visible) {
|
||||
this.getTorrentProperties();
|
||||
this.getTorrentFiles();
|
||||
} else {
|
||||
this.fileTree = [];
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue