From b5feb9332367a19871a4b5706cab15de5bede223 Mon Sep 17 00:00:00 2001 From: Dakad Date: Tue, 1 Aug 2017 23:43:30 +0000 Subject: [PATCH 1/6] Add lib to control Ytb Video --- frontend/index.html | 1 + frontend/src/ytb_player_api.js | 2 ++ 2 files changed, 3 insertions(+) create mode 100644 frontend/src/ytb_player_api.js diff --git a/frontend/index.html b/frontend/index.html index d1d0e1b..169f426 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -12,6 +12,7 @@
+ diff --git a/frontend/src/ytb_player_api.js b/frontend/src/ytb_player_api.js new file mode 100644 index 0000000..37ef1d6 --- /dev/null +++ b/frontend/src/ytb_player_api.js @@ -0,0 +1,2 @@ + +if (!window['YT']) {var YT = {loading: 0,loaded: 0};}if (!window['YTConfig']) {var YTConfig = {'host': 'http://www.youtube.com'};}if (!YT.loading) {YT.loading = 1;(function(){var l = [];YT.ready = function(f) {if (YT.loaded) {f();} else {l.push(f);}};window.onYTReady = function() {YT.loaded = 1;for (var i = 0; i < l.length; i++) {try {l[i]();} catch (e) {}}};YT.setConfig = function(c) {for (var k in c) {if (c.hasOwnProperty(k)) {YTConfig[k] = c[k];}}};var a = document.createElement('script');a.type = 'text/javascript';a.id = 'www-widgetapi-script';a.src = 'https://s.ytimg.com/yts/jsbin/www-widgetapi-vflZguxdr/www-widgetapi.js';a.async = true;var b = document.getElementsByTagName('script')[0];b.parentNode.insertBefore(a, b);})();} \ No newline at end of file From 03e8cc14d1a8d5d1305bc0b0b44e4887442df560 Mon Sep 17 00:00:00 2001 From: Dakad Date: Fri, 4 Aug 2017 14:07:41 +0000 Subject: [PATCH 2/6] Remove incorrect import --- frontend/src/main.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/frontend/src/main.js b/frontend/src/main.js index 0070866..7b00791 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -6,7 +6,6 @@ import VueResource from 'vue-resource' import Vue2Filters from 'vue2-filters' import Config from './config/' -import filters from './utils/filters' import App from './App.vue' @@ -21,6 +20,5 @@ Vue.use(Vue2Filters) new Vue({ el: '#app', - filters, render: (h) => h(App), }) From a0daff881778a53f42ef4ff3ed6c45dd691ce5b1 Mon Sep 17 00:00:00 2001 From: Dakad Date: Sat, 5 Aug 2017 15:06:58 +0000 Subject: [PATCH 3/6] Add package to handle youtube embeeded video --- frontend/index.html | 2 +- frontend/package.json | 2 ++ frontend/src/main.js | 12 ++++++++++-- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 169f426..c168727 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -12,7 +12,7 @@
- + diff --git a/frontend/package.json b/frontend/package.json index 539bae9..968da48 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -52,7 +52,9 @@ "start": "npm install && npm run dev" }, "dependencies": { + "jquery": "^3.2.1", "lodash.debounce": "^4.0.8", + "lodash.throttle": "^4.1.1", "vue": "^2.4.2", "vue-resource": "^1.3.4", "vue2-filters": "^0.1.9" diff --git a/frontend/src/main.js b/frontend/src/main.js index 7b00791..befab19 100644 --- a/frontend/src/main.js +++ b/frontend/src/main.js @@ -4,21 +4,29 @@ import Vue from 'vue' import VueResource from 'vue-resource' import Vue2Filters from 'vue2-filters' +import VueYouTubeEmbed from 'vue-youtube-embed' import Config from './config/' import App from './App.vue' - +// Used as Global Event for PubSub export const bus = new Vue(); +// Insert vue Ressource for the XHR REquest Vue.use(VueResource); Vue.http.options.root = Config.API_URL +// Insert Basic filters Vue.use(Vue2Filters) -new Vue({ +// Insert Youtube Component +Vue.use(VueYouTubeEmbed) + + +// Init a new Vue App to render +const app = new Vue({ el: '#app', render: (h) => h(App), }) From 7eaac1b2c98a7ea32352743a18cf9f09e6a08054 Mon Sep 17 00:00:00 2001 From: Dakad Date: Sat, 5 Aug 2017 15:07:41 +0000 Subject: [PATCH 4/6] Use vue-youtube-embeed for the YoutubeFeed --- .../src/components/results/YoutubeFeed.vue | 191 +++++++++++++++--- 1 file changed, 160 insertions(+), 31 deletions(-) diff --git a/frontend/src/components/results/YoutubeFeed.vue b/frontend/src/components/results/YoutubeFeed.vue index 3df5747..a21e8b4 100644 --- a/frontend/src/components/results/YoutubeFeed.vue +++ b/frontend/src/components/results/YoutubeFeed.vue @@ -26,13 +26,16 @@ -
- +
+ +
@@ -52,19 +55,33 @@ + case YT.PlayerState.ENDED: + this.player.$featuredVideo.removeClass("is-playing", "is-paused"); + break; - From 2eec0145ac8b4e5284837e0f71482963fe2cb161 Mon Sep 17 00:00:00 2001 From: Dakad Date: Sat, 5 Aug 2017 21:46:01 +0000 Subject: [PATCH 5/6] Implements Sticky Float but buggy --- .../components/results/WaterfallDisplay.vue | 11 +- .../src/components/results/YoutubeFeed.vue | 180 +++++++----------- frontend/src/ytb_player_api.js | 2 - 3 files changed, 82 insertions(+), 111 deletions(-) delete mode 100644 frontend/src/ytb_player_api.js diff --git a/frontend/src/components/results/WaterfallDisplay.vue b/frontend/src/components/results/WaterfallDisplay.vue index 41c92f9..0a74c0b 100644 --- a/frontend/src/components/results/WaterfallDisplay.vue +++ b/frontend/src/components/results/WaterfallDisplay.vue @@ -1,5 +1,5 @@