Skip to content

Commit

Permalink
Merge branch 'web_dev' into dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@d0u9
d0u9 committed Sep 26, 2017
2 parents 33b2f55 + d39ebc1 commit c0de1ff
Show file tree
Hide file tree
Showing 6 changed files with 146 additions and 21 deletions.
12 changes: 10 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ writes in python. What makes things more worse is that, to use PHP, a web
server is needly inevitably. This complexes service deployment and makes it not
very 'light'.

# Screenshot

![screenshot1](screen_shot/1.gif)

# Prerequisite

Expand All @@ -27,7 +30,7 @@ avoid any troubles.
To install youtube-dl-webui, you have to firstly install [youtube-dl][1] and
[Flask][3], then simply execute the following command:

python setup.py install
python setup.py install

# How to use

Expand All @@ -43,13 +46,18 @@ Currently, not to much options available, use `-h` to find out all of them.

After everything is ready, simply execute:

youtube-dl-webui -c CONFIGURATION_FILE
youtube-dl-webui -c CONFIGURATION_FILE

A server will be started locally. The default port is **5000**.

# Docker image

There also exists a docker image to easy the deployment. Check [HERE] for more.

---

[1]: https://github.com/rg3/youtube-dl
[2]: https://github.com/avignat/Youtube-dl-WebUI
[3]: https://github.com/pallets/flask
[4]: https://hub.docker.com/r/d0u9/youtube-dl-webui/

Binary file added screen_shot/1.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions youtube_dl_webui/static/css/global.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ html, body {
flex-flow: column;
}

a {
text-decoration:none;
}

[v-cloak] {
display: none!important;
}
Expand Down
41 changes: 39 additions & 2 deletions youtube_dl_webui/static/css/modalComponent.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
}

.modal-container {
width: 400px;
width: 500px;
margin: 0px auto;
padding: 20px;
background-color: #fff;
Expand All @@ -27,8 +27,10 @@
}

.modal-header div {
font-weight: bold;
font-size: 20px;
margin-top: 0;
color: #42b983;
color: #020202;
}

.modal-body div {
Expand All @@ -38,13 +40,48 @@
align-items: center;
}

.modal-body label {
min-width: 60px;
max-width: 100px;
}

.modal-body input {
font-size: 15px;
display: block;
width: 100%;
height: 12px;
padding: 5px;
}

.modal-body hr {
border: 0;
height: 1px;
margin-left:auto;
margin-right:auto;
width: 40%;
}

.modal-body .left-hr {
float: left;
background-image: -webkit-linear-gradient(left, #f0f0f0, #000000, #000000);
background-image: -moz-linear-gradient(left, #f0f0f0, #000000, #000000);
background-image: -ms-linear-gradient(left, #f0f0f0, #000000, #000000);
background-image: -o-linear-gradient(left, #f0f0f0, #000000, #000000);
}

.modal-body .right-hr {
float: right;
background-image: -webkit-linear-gradient(left, #000000, #000000, #f0f0f0);
background-image: -moz-linear-gradient(left, #000000, #000000, #f0f0f0);
background-image: -ms-linear-gradient(left, #000000, #000000, #f0f0f0);
background-image: -o-linear-gradient(left, #000000, #000000, #f0f0f0);
}

.modal-body .caption {
width: 80px;
font-weight: bold;
}

.modal-footer {
display: flex;
justify-content: center;
Expand Down
51 changes: 43 additions & 8 deletions youtube_dl_webui/static/js/global.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,15 @@ var videoDownload = (function (Vue, extendAM){
videoList: [],
videoListCopy: [],
showModal: false,
modalType: 'addTask',
// tablist: ['status', 'details', 'file24s', 'peers', 'options'],
tablist: ['Status', 'Details', 'Log'],
showTab: 'Status',
stateCounter: { all: 0, downloading: 0, finished: 0, paused: 0, invalid: 0},
modalData: { url: '' },
modalData: {
add: { url: '' },
remove: {removeFile: false }
},
currentSelected: null,
taskDetails: {},
taskInfoUrl: null,
Expand Down Expand Up @@ -45,16 +49,35 @@ var videoDownload = (function (Vue, extendAM){
},
methods: {
showAddTaskModal: function(){
this.modalData.url = '';
this.modalData.add.url = '';
this.showModal = true;
this.modalType = 'addTask';
console.log(this.modalData);
this.$nextTick(function(){
this.$refs.url.focus();
});
},
execFunction: function(){
switch(this.modalType) {
case 'addTask':
this.addTask();
break;
case 'removeTask':
this.removeTask();
break;
}
},
showRemoveTaskModal: function(){
this.modalData.remove.removeFile = false;
this.showModal = true;
this.modalType = 'removeTask';
},
addTask: function(){
console.log(this.modalData.add);
var _self = this;
var url = _self.headPath + 'task';
Vue.http.post(url, _self.modalData, {emulateJSON: true}).then(function(res){ _self.showModal = false;
Vue.http.post(url, _self.modalData.add, {emulateJSON: false}).then(function(res){
_self.showModal = false;
that.getTaskList();
}, function(err){
_self.showAlertToast(err, 'error');
Expand All @@ -63,14 +86,22 @@ var videoDownload = (function (Vue, extendAM){
removeTask: function(){
var _self = this;
var url = _self.headPath + 'task/tid/' + (_self.videoList[_self.currentSelected] && _self.videoList[_self.currentSelected].tid);
if(_self.modalData.remove.removeFile){
url += '?del_file=true';
}
Vue.http.delete(url).then(function(res){
_self.showAlertToast('Task Delete', 'info');
_self.videoList.splice(_self.currentSelected, _self.currentSelected+1);
_self.showModal = false;
that.getTaskList();
}, function(err){
_self.showAlertToast(err, 'error');
});
},
removeData: function(){
this.modalData.remove.removeFile = true;
this.removeTask();
},
pauseTask: function(){
var _self = this;
var url = _self.headPath + 'task/tid/' + (_self.videoList[_self.currentSelected] && _self.videoList[_self.currentSelected].tid) + '?act=pause';
Expand All @@ -91,6 +122,10 @@ var videoDownload = (function (Vue, extendAM){
_self.showAlertToast(err, 'error');
});
},
about: function() {
this.showModal = true;
this.modalType = 'about';
},
selected: function(index){
var _self = this;
this.currentSelected = index;
Expand All @@ -101,9 +136,11 @@ var videoDownload = (function (Vue, extendAM){
var _self = this;
if(!_self.taskInfoUrl) return false;
Vue.http.get(_self.taskInfoUrl).then(function(res){
console.log(res.data);
_self.taskDetails = JSON.parse(res.data).detail;
console.log(_self.taskDetails);
var responseJSON = JSON.parse(res.data);
if(responseJSON.status === 'error'){
return false;
}
_self.taskDetails = responseJSON.detail;
}, function(err){
_self.showAlertToast('Network connection lost', 'error');
});
Expand Down Expand Up @@ -199,7 +236,6 @@ var videoDownload = (function (Vue, extendAM){

videoDownload.getTaskList = function() {
var that = videoDownload;
console.log(that.tasksData.headPath);
var url = that.tasksData.headPath + 'task/list';
url = url + '?state=' + that.tasksData.status;
Vue.http.get(url).then(function(res){
Expand All @@ -212,7 +248,6 @@ var videoDownload = (function (Vue, extendAM){
that.tasksData.stateCounter.invalid;
that.updateVm();
}, function(err){
console.log(err)
that.vm.showAlertToast('Network connection lost', 'error');
});
};
Expand Down
59 changes: 50 additions & 9 deletions youtube_dl_webui/templates/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<title>This is a test template</title>
<title>youtube-dl-webUI</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='font-awesome/css/font-awesome.min.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/global.css') }}">
Expand Down Expand Up @@ -29,10 +29,10 @@
<div class="modal-footer">
<slot name="footer">
<button class="modal-default-button" @click="$emit('confirm')">
OK
ok
</button>
<button class="modal-default-button" @click="$emit('close')">
CANCEL
cancel
</button>
</slot>
</div>
Expand All @@ -45,9 +45,10 @@
<header>
<div class="operBtns">
<button @click="showAddTaskModal"><i class="fa fa-plus" aria-hidden="true"></i> Add</button>
<button @click="removeTask"><i class="fa fa-minus" aria-hidden="true"></i> Remove</button>
<button @click="showRemoveTaskModal"><i class="fa fa-minus" aria-hidden="true"></i> Remove</button>
<button @click="pauseTask"><i class="fa fa-pause" aria-hidden="true"></i> Pause</button>
<button @click="resumeTask"><i class="fa fa-play" aria-hidden="true"></i> Resume</button>
<button @click="about" style="float:right"><i class="fa fa-question-circle" aria-hidden="true"></i> About</button>
</div>
</header>
<div class="main-body">
Expand Down Expand Up @@ -108,11 +109,51 @@
</tbody>
</table>
</div>
<modal v-if="showModal" @close="showModal = false" @confirm="addTask" v-cloak>
<div slot="header">URL to download</div>
<div slot="body" v-cloak><input type="text" ref="url" v-model="modalData.url" v-cloak @keyup.enter="addTask" @keyup.esc="showModal = false"/></div>
</modal>
<vue-toast ref='toast'></vue-toast>
<modal v-if="showModal" @close="showModal = false" @confirm="execFunction" v-cloak>
<template v-if="modalType === 'about'">
<div slot="header">About</div>
<div slot="body" v-cloak style="display:block">
<div style="justify-content: left;">
<span class="caption">Version:</span>web_dev
</div>
<div style="justify-content: left;">
<span class="caption">Github:</span><a href="https://github.com/d0u9/youtube-dl-webui">https://github.com/d0u9/youtube-dl-webui</a>
</div>
<div style="justify-content: left;">
<span class="caption">License:</span><a href="https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html">GPL-2.0</a>
</div>
</div>
<div slot="footer">
<button class="modal-default-button" @click="showModal = false">OK</button>
</div>
</template>
<template v-if="modalType === 'removeTask'">
<div slot="header">Remove Task</div>
<div slot="body" v-cloak style="display:block">
<p>Are you sure you want to delete the task?</p>
</div>
<div slot="footer">
<button class="modal-default-button" @click="showModal = false">cancel</button>
<button class="modal-default-button" @click="removeData" style="width:auto;">remove with data</button>
<button class="modal-default-button" @click="removeTask">remove task</button>
</div>
</template>
<template v-if="modalType === 'addTask'">
<div slot="header">Add Task</div>
<div slot="body" v-cloak style="display:block">
<div>
<label>URL:</label><input type="text" ref="url" v-model="modalData.add.url" v-cloak @keyup.enter="addTask" @keyup.esc="showModal = false"/>
</div>
<div style="text-align:center;">
<hr class="left-hr" /><span style="font-weight: bold;">youtube-dl options</span><hr class="right-hr" />
</div>
<div>
<label>Format:</label><input type="text" ref="format" v-model="modalData.format" v-cloak @keyup.esc="showModal = false"/>
</div>
</div>
</template>
</modal>
<vue-toast ref='toast'></vue-toast>
</div>
<footer>
<div class="info-tabs">
Expand Down

0 comments on commit c0de1ff

Please sign in to comment.