oSoc17 · Dakad · Aug 1, 2017 · Aug 4, 2017 · Aug 4, 2017 · Aug 4, 2017
diff --git a/frontend/index.html b/frontend/index.html
@@ -12,6 +12,7 @@
   <body>
     <div id="app"></div>
 
+    <!--<script src="src/ytb_player_api.js"></script>-->
     <script src="src/waterfall.js"></script>
     <script src="dist/build.js"></script>
   </body>

diff --git 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/components/results/WaterfallDisplay.vue b/frontend/src/components/results/WaterfallDisplay.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="content" @click.self.stop="displayFilterPopup = false">
+  <div id="content" @click.self.stop="displayFilterPopup = false" @scroll="handleScroll">
   	<div class="flashmessage">You succesfully created an entity called {{ entity }}</div>
 
   	<filters :active="displayFilterPopup"
@@ -42,6 +42,7 @@
 					</twitterFeed>
 
 					<youtubeFeed :feed="feed" :keyword="selectedKeyword" :active="activeSocialMedia.indexOf('youtube')!==-1" 
+					              :scroll="scroll"
 					              v-if="feed.service_name == 'youtube'">
 					</youtubeFeed>
 
@@ -87,6 +88,7 @@
     		isLoading: false,
     		activeSocialMedia: [],
     		selectedKeyword: '',
+    		scroll : 0,
     	}
   	},
   	created () {
@@ -96,13 +98,18 @@
 			bus.$on('ENTITIES_IS_EMPTY', (bool) => this.entitiesIsEmpty = bool)
       bus.$on('UPDATE_WATERFALL', this.updateWaterfall)
 			bus.$on('FETCH_DATA', this.fetchData)
+
+			window.addEventListener("scroll", _ => this.scroll = window.scrollY);
 		},
 		watch: {
 			items: function(updatingWfContainer){
 				this.updateWaterfall()
 			}
 		},
 		methods: {
+		  handleScroll : function ($event) {
+		    bus.$emit('SCROLLING', window.scrollY)
+		  },
 		  out : function () {
 		    this.displayFilterPopup = false
 		  },
@@ -155,4 +162,4 @@
 
 <style>
 
-</style>
+</style>
diff --git a/frontend/src/components/results/YoutubeFeed.vue b/frontend/src/components/results/YoutubeFeed.vue
@@ -26,24 +26,28 @@
     </div>
 
     <!-- VIDEO-IFRAME -->
-    <figure class="content-media content-media--video featured-media" 
-            v-if="feed.type == 'video' && isLoaded"
-    >
-      <iframe class="content-media_object media featured-video" 
-              frameborder="0"
-              v-bind:src="feed.link + '?enablejsapi=1&autoplay=1&controls=0&rel=1&showinfo=0'"
-      > </iframe>
+    <figure ref="ytb_media"  class="content-media">
+      <youtube  v-if="feed.type == 'video' && isLoaded" 
+                ref="ytb_vid" :class="classList"
+                :videoId="feed.id"
+                :player-vars="{ autoplay: 1, controls: 0,  showinfo: 0, rel: 0 }" 
+                @ready="initStickyFloat" 
+                @playing="playing" 
+                @paused="paused"
+                @error="error"
+      ></youtube>
+
     </figure>
 
     <!-- METADATA - likes/comments/views -->
     <div class="metadata_2">
       <div class="name">
-        <a target="_blank"  v-bind:href="feed.channel_link" :alt="feed.channel +' Channel'" :title="feed.channel +' Channel'">
+        <a target="_blank"  :href="feed.channel_link" :alt="feed.channel +' Channel'" :title="feed.channel +' Channel'">
           {{feed.channel}}
         </a>
       </div>
       <div class="social_media">
-        <a target="_blank" v-bind:href="'https://www.youtube.com/watch?v='+feed.id" alt="Go to Youtube" title="Go to Youtube">
+        <a target="_blank" :href="'https://www.youtube.com/watch?v='+feed.id" alt="Go to Youtube" title="Go to Youtube">
           <i class="fa fa-youtube-play"></i>
         </a>
       </div>
@@ -52,19 +56,44 @@
 </template>
 
 <script>
+  import _throttle from 'lodash.throttle'
+
+  import Vue from 'vue'
+
   import { bus } from '../../main'
+
 
 	export default {
-		props: ['feed', 'keyword', 'active'],
-		components: {
-		},
+		props: ['feed', 'keyword', 'active', 'scroll'],
+		components: { },
 		data() {
 			return {
+			  classList : {'is-playing':false, 'is-paused':false, 'is-sticky' : false},
         isLoaded : false,
+        player : {},
 			}
 		},
 		created() { },
-		mounted() { },
+		mounted() { 
+		  bus.$on('RESIZE', function (){
+		    if(this.player.isPlaying)
+		      this.calcOffset()
+		  })
+		  // bus.$on('SCROLLING', this.float)
+		},
+		watch : { 
+		  scroll : function (scroll){
+		    if(this.classList['is-playing']){
+          const state = this.classList['is-playing'] && (scroll-50) > this.player.offset
+          console.log(this.feed.id, ' => SCROLLED\n',
+                scroll, this.player.offset ,'isSticky : ', state);
+
+          this.$refs.ytb_vid.$el.style.top = (this.player.offset  + scroll) +'px'
+
+          this.classList['is-sticky'] = state
+		    }
+      },
+		},
 		computed : {
    	  hasKeyword: function(item){
     		if(this.keyword){
@@ -75,35 +104,105 @@
     		}
     		// No keyword selected
   		  return true
-    	}
+    	},
+    	generateIframeSrc : function(){
+    	  let link = this.feed.link 
+    	  link += '?enablejsapi=1&autoplay=1&controls=0&rel=1&showinfo=0'
+    	  return link
+    	},
+
 		},
 		methods: {
-		}
+		  calcOffset : function (){
+		    console.log('CALC OFFSET');
+		    this.player.top = this.$refs.ytb_media.offsetTop
+        this.player.offset = Math.floor(
+          this.player.top + (this.$refs.ytb_media.offsetHeight / 2)
+        )
+		  },
+		  initStickyFloat : function (player) {
+		    console.log(this.feed.id + ' => READY');
+		    this.player = player
+        this.calcOffset()
+      },
+
+      playing : function (player) {
+		    console.log(this.feed.id + ' => PLAYING');
+		    this.player = player
+        this.classList['is-playing'] = true
+        this.classList['is-paused'] = false
+      },
+      paused : function (player) {
+		    console.log(this.feed.id + ' => PAUSED');
+        this.classList['is-paused'] = true
+        this.classList['is-playing'] = true
+      },
+      stop : function() {
+		    console.log(this.feed.id + ' => STOPPED');
+        this.player.stopVideo()
+        this.player['is-playing'] = false
+      },
+
+      error : function(err) {
+		    console.log(this.feed.id + ' => ERROR', err);
+
+      },
+    },
 
 	}
 
 </script>
 
 <style>
-
-.featured-media iframe {
-  top: 0;
-  left: 0;
-  height:100%;
-  width: 100%;
-}
-
-
-.play-button {
-  cursor : pointer;
-}
-
-.metadata_2 .name a {
-  color: #515151;
-  text-decoration: none;
-}
-
-.social_media a .fa {
-  color : #FFF;
-}
+
+  .play-button {
+    cursor : pointer;
+  }
+
+  .metadata_2 .name a {
+    color: #515151;
+    text-decoration: none;
+  }
+
+  .social_media a .fa {
+    color : #FFF;
+  }
+
+
+  .content-media iframe {
+    top: 0;
+    left: 0;
+    height:100%;
+    width: 100%;
+  }
+
+  .content-media {
+      transition: width .2s ease-in-out, height .2s ease-in-out, transform .38s ease-in-out;
+  }
+
+  /** Use .sticky */
+
+  .is-sticky {
+      position: fixed;
+      top: 45px;
+      left: 100px;
+      width: 280px;
+      height: 158px;
+      max-width: 350px;
+      max-height: 250px;
+      box-shadow: 0 0 5px 2px #ec8080;
+  }
+
+
+  @media screen and (min-width: 1120px) {
+      .is-sticky {
+          transform: translateX(-80%);
+      }
+  }
+
+  @media screen and (min-width: 1300px) {
+      .is-sticky {
+          transform: translateX(-115%);
+      }
+  }
 </style>
diff --git 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),
 })