Skip to content

Commit

Permalink
fix bugs and created history navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@AZbang
AZbang committed Aug 24, 2017
1 parent e63d361 commit 5890c16
Show file tree
Hide file tree
Showing 6 changed files with 151 additions and 55 deletions.
14 changes: 13 additions & 1 deletion src/renderer/components/Controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,12 @@ var __vueify_style__ = __vueify_insert__.insert("\n#controls {\n position: abso












Expand Down Expand Up @@ -309,6 +315,12 @@ module.exports = {
downloadTrack() {
this.$emit('downloadTrack');
},
backHistory() {
this.$emit('backHistory');
},
nextHistory() {
this.$emit('nextHistory');
},
restartTrack() {
this.isRestartTrackBtnShow = false;
this.setTrackTime(0);
Expand Down Expand Up @@ -358,7 +370,7 @@ module.exports = {
}

if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div id=\"controls\">\n <transition name=\"fade\">\n <div class=\"time-stamp\" v-show=\"isTimestampShow\">{{currentTrackTime | formatTime}} / {{totalTrackTime | formatTime}}</div>\n </transition>\n\n <transition name=\"fade\">\n <div class=\"volume-wrap no-app-drag\" v-show=\"isVolumesliderShow\">\n <input name=\"volumeslider\" type=\"range\">\n </div>\n </transition>\n\n <input name=\"timeslider\" type=\"range\">\n <div class=\"controls-bar\">\n <div class=\"row middle-xs\">\n <div class=\"col-xs-3\">\n <div class=\"box button\"><i class=\"material-icons\" @click=\"downloadTrack\">file_download</i></div>\n </div>\n <div class=\"col-xs-2\">\n <div class=\"box button\"><i class=\"material-icons\">skip_previous</i></div>\n </div>\n <div class=\"col-xs-2\">\n <div class=\"box button\">\n <i class=\"material-icons\" @click=\"clickBtnPlay\">{{getIconBtnPlay}}</i>\n </div>\n </div>\n <div class=\"col-xs-2\">\n <div class=\"box button\"><i class=\"material-icons\">skip_next</i></div>\n </div>\n <div class=\"col-xs-3\">\n <div class=\"box button\">\n <i class=\"material-icons\" @click=\"clickBtnSound\">volume_up</i>\n </div>\n </div>\n </div>\n </div>\n</div>\n"
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div id=\"controls\">\n <transition name=\"fade\">\n <div class=\"time-stamp\" v-show=\"isTimestampShow\">{{currentTrackTime | formatTime}} / {{totalTrackTime | formatTime}}</div>\n </transition>\n\n <transition name=\"fade\">\n <div class=\"volume-wrap no-app-drag\" v-show=\"isVolumesliderShow\">\n <input name=\"volumeslider\" type=\"range\">\n </div>\n </transition>\n\n <input name=\"timeslider\" type=\"range\">\n <div class=\"controls-bar\">\n <div class=\"row middle-xs\">\n <div class=\"col-xs-3\">\n <div class=\"box button\"><i class=\"material-icons\" @click=\"downloadTrack\">file_download</i></div>\n </div>\n <div class=\"col-xs-2\">\n <div class=\"box button\"><i class=\"material-icons\" @click=\"backHistory\">skip_previous</i></div>\n </div>\n <div class=\"col-xs-2\">\n <div class=\"box button\">\n <i class=\"material-icons\" @click=\"clickBtnPlay\">{{getIconBtnPlay}}</i>\n </div>\n </div>\n <div class=\"col-xs-2\">\n <div class=\"box button\"><i class=\"material-icons\" @click=\"nextHistory\">skip_next</i></div>\n </div>\n <div class=\"col-xs-3\">\n <div class=\"box button\">\n <i class=\"material-icons\" @click=\"clickBtnSound\">volume_up</i>\n </div>\n </div>\n </div>\n </div>\n</div>\n"
if (module.hot) {(function () { module.hot.accept()
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), true)
Expand Down
38 changes: 16 additions & 22 deletions src/renderer/components/Graphics.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,6 @@ var __vueify_style__ = __vueify_insert__.insert("\n#graphics {\n position: abso









Expand All @@ -65,9 +62,11 @@ var __vueify_style__ = __vueify_insert__.insert("\n#graphics {\n position: abso
name: 'graphics',
methods: {
calcAmplitude(waves) {
if(waves[0] < -Infinity || waves[0] > Infinity) return;

this.siriWave.amplitude = waves[0]*3 < 0 ? .3 : waves[0]*3;
if(waves[0] < -Infinity || waves[0] > Infinity) this.siriWave.amplitude = 0;
else {
this.siriWave.setAmplitude(waves[0]/200);
this.siriWave.frequency = 1-waves[0]/300;
}
}
},
mounted() {
Expand All @@ -84,22 +83,17 @@ var __vueify_style__ = __vueify_insert__.insert("\n#graphics {\n position: abso
autostart: true
});

let waves = new Float32Array(1);
let timerId = null;

video.onloadeddata = () => {
let context = new AudioContext();
let mediaSourceNode = context.createMediaElementSource(video);
let analyserNode = context.createAnalyser();
mediaSourceNode.connect(analyserNode);
analyserNode.connect(context.destination);

timerId && clearInterval(timerId);
timerId = setInterval(() => {
analyserNode.getFloatTimeDomainData(waves);
this.calcAmplitude(waves);
}, 500);
}
let waves = new Uint8Array(1);
let context = new AudioContext();
let mediaSourceNode = context.createMediaElementSource(video);
let analyserNode = context.createAnalyser();
mediaSourceNode.connect(analyserNode);
analyserNode.connect(context.destination);

setInterval(() => {
analyserNode.getByteFrequencyData(waves);
this.calcAmplitude(waves);
}, 500);
}
}

Expand Down
68 changes: 62 additions & 6 deletions src/renderer/components/Player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,37 @@ var __vueify_style__ = __vueify_insert__.insert("\n#player {\n position: absolu





































Expand Down Expand Up @@ -178,10 +209,11 @@ module.exports = {
},
searchText: '',
srcVideo: '',
currentTrack: 0,
isLoading: false,
isMainScreeShow: true,
savePath: '../saved',
player: null
history: []
}
},
methods: {
Expand All @@ -193,23 +225,47 @@ module.exports = {

YTsearch(req, this.youtubeSearch, (err, results) => {
if(err) throw err;
this.setVideo(results[0].id);
for(let i = 0; i < results.length; i++) {
if(results[i].kind === 'youtube#video') {
this.setTrackFromId(results[i].id);
return;
}
}
});
},
setVideo(id) {
setTrackFromId(id) {
this.track = youtubedl('http://www.youtube.com/watch?v=' + id, ['--format=18'], {cwd: __dirname});
this.track.on('info', (info) => {
this.trackInfo = info;
this.isLoading = false;

this.searchText = info.title;
this.srcVideo = info.url;
this.isLoading = false;
this.trackInfo = info;

this.currentTrack = this.history.length;
this.history.push(info);
});
},
setTrackFromObject(obj) {
this.trackInfo = obj;
this.searchText = obj.title;
this.srcVideo = obj.url;
},
downloadTrack() {
mkdirp(this.savePath, (err) => {
if(err) throw err;
this.track.pipe(fs.createWriteStream(this.savePath + '/' + this.trackInfo.title + '.mp4'));
});
},
backHistory() {
console.log(this.currentTrack, this.history);
if(this.currentTrack <= 0) return;
this.setTrackFromObject(this.history[this.currentTrack--]);
},
nextHistory() {
console.log(this.currentTrack, this.history);
if(this.currentTrack >= this.history.length-1) return;
this.setTrackFromObject(this.history[this.currentTrack++]);
}
},
mounted() {
Expand All @@ -219,7 +275,7 @@ module.exports = {
}

if (module.exports.__esModule) module.exports = module.exports.default
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div>\n <div id=\"player\" class=\"app-drag\">\n <video v-bind:src=\"srcVideo\" autoplay></video>\n </div>\n\n <transition name=\"hide\">\n <main-screen v-show=\"isMainScreeShow\" class=\"app-drag\"></main-screen>\n </transition>\n\n <search @searchTrack=\"searchTrack\" :queryTrack=\"searchText\" class=\"no-app-drag\"></search>\n\n <transition name=\"hide\">\n <graphics v-show=\"!isLoading\"></graphics>\n </transition>\n\n <controls v-show=\"!isMainScreeShow\" @downloadTrack=\"downloadTrack\" class=\"no-app-drag\"></controls>\n\n <transition name=\"hide\">\n <div v-show=\"isLoading\" class=\"loader-wrap\">\n <div class=\"signal\"></div>\n </div>\n </transition>\n</div>\n"
;(typeof module.exports === "function"? module.exports.options: module.exports).template = "\n<div>\n <div id=\"player\" class=\"app-drag\">\n <video v-bind:src=\"srcVideo\" autoplay></video>\n </div>\n\n <transition name=\"hide\">\n <main-screen v-show=\"isMainScreeShow\" class=\"app-drag\"></main-screen>\n </transition>\n\n <search @searchTrack=\"searchTrack\" :queryTrack=\"searchText\" class=\"no-app-drag\"></search>\n\n <transition name=\"hide\">\n <graphics v-show=\"!isLoading\"></graphics>\n </transition>\n\n <controls\n v-show=\"!isMainScreeShow\"\n @downloadTrack=\"downloadTrack\"\n @backHistory=\"backHistory\"\n @nextHistory=\"nextHistory\"\n class=\"no-app-drag\"\n ></controls>\n\n <transition name=\"hide\">\n <div v-show=\"isLoading\" class=\"loader-wrap\">\n <div class=\"signal\"></div>\n </div>\n </transition>\n</div>\n"
if (module.hot) {(function () { module.hot.accept()
var hotAPI = require("vue-hot-reload-api")
hotAPI.install(require("vue"), true)
Expand Down
10 changes: 8 additions & 2 deletions src/vue/components/Controls.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,15 @@
<div class="box button"><i class="material-icons" @click="downloadTrack">file_download</i></div>
</div>
<div class="col-xs-2">
<div class="box button"><i class="material-icons">skip_previous</i></div>
<div class="box button"><i class="material-icons" @click="backHistory">skip_previous</i></div>
</div>
<div class="col-xs-2">
<div class="box button">
<i class="material-icons" @click="clickBtnPlay">{{getIconBtnPlay}}</i>
</div>
</div>
<div class="col-xs-2">
<div class="box button"><i class="material-icons">skip_next</i></div>
<div class="box button"><i class="material-icons" @click="nextHistory">skip_next</i></div>
</div>
<div class="col-xs-3">
<div class="box button">
Expand Down Expand Up @@ -103,6 +103,12 @@
downloadTrack() {
this.$emit('downloadTrack');
},
backHistory() {
this.$emit('backHistory');
},
nextHistory() {
this.$emit('nextHistory');
},
restartTrack() {
this.isRestartTrackBtnShow = false;
this.setTrackTime(0);
Expand Down
33 changes: 15 additions & 18 deletions src/vue/components/Graphics.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@
name: 'graphics',
methods: {
calcAmplitude(waves) {
if(waves[0] < -Infinity || waves[0] > Infinity) return;
this.siriWave.amplitude = waves[0]*3 < 0 ? .3 : waves[0]*3;
if(waves[0] < -Infinity || waves[0] > Infinity) this.siriWave.amplitude = 0;
else {
this.siriWave.setAmplitude(waves[0]/200);
this.siriWave.frequency = waves[0]/100;
}
}
},
mounted() {
Expand All @@ -28,22 +30,17 @@
autostart: true
});
let waves = new Float32Array(1);
let timerId = null;
video.onloadeddata = () => {
let context = new AudioContext();
let mediaSourceNode = context.createMediaElementSource(video);
let analyserNode = context.createAnalyser();
mediaSourceNode.connect(analyserNode);
analyserNode.connect(context.destination);
let waves = new Uint8Array(1);
let context = new AudioContext();
let mediaSourceNode = context.createMediaElementSource(video);
let analyserNode = context.createAnalyser();
mediaSourceNode.connect(analyserNode);
analyserNode.connect(context.destination);
timerId && clearInterval(timerId);
timerId = setInterval(() => {
analyserNode.getFloatTimeDomainData(waves);
this.calcAmplitude(waves);
}, 500);
}
setInterval(() => {
analyserNode.getByteFrequencyData(waves);
this.calcAmplitude(waves);
}, 500);
}
}
</script>
Expand Down
43 changes: 37 additions & 6 deletions src/vue/components/Player.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,13 @@
<graphics v-show="!isLoading"></graphics>
</transition>

<controls v-show="!isMainScreeShow" @downloadTrack="downloadTrack" class="no-app-drag"></controls>
<controls
v-show="!isMainScreeShow"
@downloadTrack="downloadTrack"
@backHistory="backHistory"
@nextHistory="nextHistory"
class="no-app-drag"
></controls>

<transition name="hide">
<div v-show="isLoading" class="loader-wrap">
Expand Down Expand Up @@ -51,10 +57,11 @@
},
searchText: '',
srcVideo: '',
currentTrack: 0,
isLoading: false,
isMainScreeShow: true,
savePath: '../saved',
player: null
history: []
}
},
methods: {
Expand All @@ -66,23 +73,47 @@
YTsearch(req, this.youtubeSearch, (err, results) => {
if(err) throw err;
this.setVideo(results[0].id);
for(let i = 0; i < results.length; i++) {
if(results[i].kind === 'youtube#video') {
this.setTrackFromId(results[i].id);
return;
}
}
});
},
setVideo(id) {
setTrackFromId(id) {
this.track = youtubedl('http://www.youtube.com/watch?v=' + id, ['--format=18'], {cwd: __dirname});
this.track.on('info', (info) => {
this.trackInfo = info;
this.isLoading = false;
this.searchText = info.title;
this.srcVideo = info.url;
this.isLoading = false;
this.trackInfo = info;
this.currentTrack = this.history.length;
this.history.push(info);
});
},
setTrackFromObject(obj) {
this.trackInfo = obj;
this.searchText = obj.title;
this.srcVideo = obj.url;
},
downloadTrack() {
mkdirp(this.savePath, (err) => {
if(err) throw err;
this.track.pipe(fs.createWriteStream(this.savePath + '/' + this.trackInfo.title + '.mp4'));
});
},
backHistory() {
console.log(this.currentTrack, this.history);
if(this.currentTrack <= 0) return;
this.setTrackFromObject(this.history[this.currentTrack--]);
},
nextHistory() {
console.log(this.currentTrack, this.history);
if(this.currentTrack >= this.history.length-1) return;
this.setTrackFromObject(this.history[this.currentTrack++]);
}
},
mounted() {
Expand Down

0 comments on commit 5890c16

Please sign in to comment.