Skip to content

Commit

Permalink
close #137-lazy-loadin-video
Browse files Browse the repository at this point in the history
  • Loading branch information
Dakad committed Aug 3, 2017
2 parents c4081c3 + 4bdcf9c commit 4230d40
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 77 deletions.
33 changes: 21 additions & 12 deletions frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,13 @@
"name": "frontend",
"version": "1.0.0",
"description": "Social media aggregator",
"keywords": ["social media", "vuejs", "gulp", "babel", "browserify"],
"keywords": [
"social media",
"vuejs",
"gulp",
"babel",
"browserify"
],
"license": "AGPL-3.0",
"author": "Maxime Van Driessche <van-driessche-maxime@hotmail.com>",
"main": "dist/build.js",
Expand All @@ -14,16 +20,18 @@
"bugs": {
"url": "https://github.com/oSoc17/datascouts/issues"
},
"contributors": [{
"name": "Maxime Van Driessche",
"email": "van-driessche-maxime@hotmail.com",
"role": "Frontend Developer"
}, {
"name": "Ismail Kutlu",
"email": "ismail.kutlu94@gmail.com",
"url": "https://ismailkutlu.github.io/",
"role": "Designer && Front-end developer"
}
"contributors": [
{
"name": "Maxime Van Driessche",
"email": "van-driessche-maxime@hotmail.com",
"role": "Frontend Developer"
},
{
"name": "Ismail Kutlu",
"email": "ismail.kutlu94@gmail.com",
"url": "https://ismailkutlu.github.io/",
"role": "Designer && Front-end developer"
}
],
"browserify": {
"transform": [
Expand All @@ -46,7 +54,8 @@
"dependencies": {
"lodash.debounce": "^4.0.8",
"vue": "^2.4.2",
"vue-resource": "^1.3.4"
"vue-resource": "^1.3.4",
"vue2-filters": "^0.1.9"
},
"devDependencies": {
"babel-core": "^6.0.0",
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components/results/Filters.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@
selectedKeyword: '',
newKeyword: '',
keywords: [],
activeSocialMedia: [],
}
},
Expand Down
84 changes: 48 additions & 36 deletions frontend/src/components/results/VimeoFeed.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,43 @@
{{ feed.title }}
</h3>
<div
<p class="description" v-if="feed.description !== null && needsTruncation(feed.description)">
{{ feed.description.substring(0, max_length) }}...
<p class="description">
{{ feed.description | truncate(maxLength) }}
</p>
<p class="description" v-else>
{{ feed.description}}
</p>
<div class="date">{{newFormatDate()}}</div>
<div class="date">{{newFormatDate}}</div>
</div>


<!-- THUMBNAIL -->
<div style="position: relative;">
<img v-bind:src="feed.thumbnail" alt="" class="media">
<a href="" class="play-button">
<div style="position: relative;" v-show="!isLoaded" >
<img v-bind:src="feed.thumbnail" alt="Thumbnail" class="media">
<span href="" class="play-button"
v-if="!isLoaded" @click="isLoaded = true"
>
<i class="fa fa-play"></i>
</a>
</span>
</div>

<!-- VIDEO-IFRAME -->
<!-- <figure class="content-media content-media--video" id="featured-media">
<iframe class="content-media__object media" id="featured-video"
v-bind:src=="'https://player.vimeo.com/'+feed.id?title=0&byline=0&badge=0&autopause=0&player_id=0">
</iframe>
</figure> -->
<figure class="content-media content-media--video featured-media" v-if="isLoaded">
<iframe class="content-media_object media featured-video"
frameborder="0" :title="feed.title"
v-bind:src="generateIframeSrc"
></iframe>
</figure>

<!-- METADATA - likes/comments/views -->
<div class="metadata_1">
<i class="fa fa-eye"></i> {{feed.played_count}}
<a v-bind:href="feed.link"><i class="fa fa-external-link"></i></a>
<i class="fa fa-eye" title="Views count" v-if="feed.played_count"></i> {{feed.played_count}}
<i class="fa fa-low-vision" title="No played" v-if="!feed.played_count"></i> |
<i class="fa fa-heart" title="Likes count"></i> {{feed.likes_count}}
<a v-bind:href="feed.link" alt="Watch on Vimeo" title="Watch on Vimeo" target='_blank'>
<i class="fa fa-external-link"></i>
</a>
</div>
<div class="metadata_2">
<div class="image_avatar">
<img v-bind:src="feed.user.avatar" alt="" class="avatar">
<img v-bind:src="feed.user.avatar" alt="Vimeo User Avatar" class="avatar">
</div>
<div class="name">{{feed.user.name}}</div>
<div class="social_media">
Expand All @@ -50,20 +54,30 @@


<script>
import Config from '../../config/'
import { bus } from '../../main'
export default {
props: ['feed', 'keyword', 'active'],
components: { },
data() {
return {
max_length: 140,
maxLength : Config.TRUNCATE_MAX_LENGTH,
isLoaded : false,
}
},
created() { },
mounted() { },
computed : {
newFormatDate: function() {
const date = new Date(this.feed.created_at);
// const month = date.getMonth();
const locale = "en-us";
const newMonth = date.toLocaleString(locale, { month: "short" });
return newMonth + ' ' + date.getDate();
},
hasKeyword: function(item){
if(this.keyword){
// ? Contains the selected keyword
Expand All @@ -76,30 +90,28 @@
}
// No keyword selected
return true
},
generateIframeSrc : function (){
let src = 'https://player.vimeo.com/video/'
src += this.feed.id.split('/').pop()
src +='?title=0&byline=0&portrait=0&badge=0&autoplay=1&autopause=1&api=1'
return src
}
},
methods: {
newFormatDate: function() {
const date = new Date(this.feed.created_at);
// const month = date.getMonth();
const locale = "en-us";
const newMonth = date.toLocaleString(locale, { month: "short" });
return newMonth + ' ' + date.getDate();
},
needsTruncation: function(string){
if(typeof(string)!=='undefined'){
return string.length > this.max_length
}
else{
return false
}
}
}
}
</script>

<style>
.play-button {
cursor : pointer;
}
</style>
75 changes: 51 additions & 24 deletions frontend/src/components/results/YoutubeFeed.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,27 +11,42 @@
</div>

<!-- THUMBNAIL -->
<div style="position: relative;margin-bottom:16px;">
<img v-bind:src="feed.thumbnail" alt="" class="media">
<a v-bind:href="'https://www.youtube.com/watch?v='+feed.id" target="_blank" class="play-button">
<i class="fa fa-youtube-play"></i>
<div style="position: relative;margin-bottom:16px;" v-show="!isLoaded" >
<img v-bind:src="feed.thumbnail" alt="Thumbnail" class="media">

<a target="_blank" class="play-button" v-if="feed.type == 'channel'" :href="feed.channel_link">
<i class="fa fa-external-link"></i>
</a>

<span class="play-button"
v-if="feed.type == 'video' && !isLoaded" @click="isLoaded = true"
>
<i class="fa fa-youtube-play"></i>
</span>
</div>

<!-- VIDEO-IFRAME -->
<!-- <figure class="content-media content-media--video" id="featured-media" v-if="isLoaded">
<iframe class="content-media__object media" id="featured-video" v-bind:src='feed.link + "?enablejsapi=1&rel=0&showinfo=0&controls=0"' frameborder="0"></iframe>
</figure> -->
<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>

<!-- METADATA - likes/comments/views -->
<div class="metadata_1">
<a v-bind:href="'https://www.youtube.com/watch?v='+feed.id" target="_blank"><i class="fa fa-external-link"></i></a>
</div>
<div class="metadata_2">
<div class="name">{{feed.channel}}</div>
<div class="social_media">
<div class="name">
<a target="_blank" v-bind: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">
<i class="fa fa-youtube-play"></i>
</div>
</a>
</div>
</div>
</div>
</template>
Expand All @@ -48,26 +63,18 @@
isLoaded : false,
}
},
created() {
},
mounted() {
},
destroyed() {
console.log(this) // There's practically nothing here!
},
created() { },
mounted() { },
computed : {
hasKeyword: function(item){
if(this.keyword){
// ? Contains the selected keyword
let isIncluded = this.feed.description != null
let isIncluded = this.feed.description != null // ? Contains the selected keyword
isIncluded = isIncluded && this.feed.description.includes(this.keyword)
if(isIncluded) setTimeout(() => bus.$emit('UPDATE_WATERFALL'), 10)
return isIncluded
}
// No keyword selected
return true
}
},
methods: {
Expand All @@ -79,4 +86,24 @@

<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;
}
</style>
3 changes: 2 additions & 1 deletion frontend/src/config/default.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@


export default {
'API_URL' : 'https://osoc.weconnectdata.com/api/v1/',
API_URL : 'https://osoc.weconnectdata.com/api/v1/',
TRUNCATE_MAX_LENGTH : 140,
}
14 changes: 10 additions & 4 deletions frontend/src/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,24 @@
// This is done with the browser options. For the config, see package.json
import Vue from 'vue'
import VueResource from 'vue-resource'
import Vue2Filters from 'vue2-filters'

import Config from './config/'
import filters from './utils/filters'
import App from './App.vue'



export const bus = new Vue();


Vue.use(VueResource);
Vue.http.options.root = Config.API_URL;
Vue.http.options.root = Config.API_URL

new Vue({ // eslint-disable-line no-new
Vue.use(Vue2Filters)

new Vue({
el: '#app',
filters,
render: (h) => h(App),

})
})

0 comments on commit 4230d40

Please sign in to comment.