mirror of
				https://github.com/TeamPiped/Piped.git
				synced 2024-08-14 23:57:27 +00:00 
			
		
		
		
	Merge videos in FeedPage with VideoItem.
This commit is contained in:
		
							parent
							
								
									5bd4fd9ebd
								
							
						
					
					
						commit
						d3f4653e8a
					
				
					 2 changed files with 14 additions and 43 deletions
				
			
		| 
						 | 
				
			
			@ -16,50 +16,14 @@
 | 
			
		|||
            v-bind:key="video.url"
 | 
			
		||||
            v-for="video in videos"
 | 
			
		||||
        >
 | 
			
		||||
            <div class="uk-text-secondary" :style="[{ background: backgroundColor }]">
 | 
			
		||||
                <router-link class="uk-text-emphasis" v-bind:to="'/watch?v=' + video.id">
 | 
			
		||||
                    <div class="uk-position-relative">
 | 
			
		||||
                        <img style="width: 100%" v-bind:src="video.thumbnail" alt="thumbnail" loading="lazy" />
 | 
			
		||||
                        <span
 | 
			
		||||
                            v-if="video.duration"
 | 
			
		||||
                            class="uk-label uk-border-rounded uk-position-absolute video-duration"
 | 
			
		||||
                            style="bottom: 5px; right: 5px; background: rgba(0, 0, 0, .75); color: white; padding: 0 5px;"
 | 
			
		||||
                            >{{ timeFormat(video.duration) }}</span
 | 
			
		||||
                        >
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <p>{{ video.title }}</p>
 | 
			
		||||
                </router-link>
 | 
			
		||||
 | 
			
		||||
                <div>
 | 
			
		||||
                    <div>
 | 
			
		||||
                        <router-link class="uk-link-muted" :to="'/channel/' + video.uploader_id">
 | 
			
		||||
                            <a>{{ video.uploader }}</a>
 | 
			
		||||
                        </router-link>
 | 
			
		||||
                        <br />
 | 
			
		||||
                    </div>
 | 
			
		||||
                </div>
 | 
			
		||||
 | 
			
		||||
                <b class="uk-text-small uk-align-left">
 | 
			
		||||
                    <div v-if="video.views >= 0">
 | 
			
		||||
                        <font-awesome-icon icon="eye"></font-awesome-icon>
 | 
			
		||||
                        {{ numberFormat(video.views) }} views
 | 
			
		||||
                        <br />
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div>
 | 
			
		||||
                        {{ timeAgo(video.uploaded) }}
 | 
			
		||||
                    </div>
 | 
			
		||||
                </b>
 | 
			
		||||
                <div class="uk-align-right">
 | 
			
		||||
                    <router-link :to="'/watch?v=' + video.id + '&listen=1'">
 | 
			
		||||
                        <font-awesome-icon icon="headphones"></font-awesome-icon>
 | 
			
		||||
                    </router-link>
 | 
			
		||||
                </div>
 | 
			
		||||
            </div>
 | 
			
		||||
            <VideoItem :video="video" />
 | 
			
		||||
        </div>
 | 
			
		||||
    </div>
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import VideoItem from "@/components/VideoItem.vue";
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
    data() {
 | 
			
		||||
        return {
 | 
			
		||||
| 
						 | 
				
			
			@ -84,5 +48,8 @@ export default {
 | 
			
		|||
            return _this.apiUrl() + "/feed/rss?authToken=" + _this.getAuthToken();
 | 
			
		||||
        },
 | 
			
		||||
    },
 | 
			
		||||
    components: {
 | 
			
		||||
        VideoItem,
 | 
			
		||||
    },
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -10,11 +10,12 @@
 | 
			
		|||
                    alt="thumbnail"
 | 
			
		||||
                    loading="lazy"
 | 
			
		||||
                />
 | 
			
		||||
                <span 
 | 
			
		||||
                <span
 | 
			
		||||
                    v-if="video.duration"
 | 
			
		||||
                    class="uk-label uk-border-rounded uk-position-absolute video-duration" 
 | 
			
		||||
                    class="uk-label uk-border-rounded uk-position-absolute video-duration"
 | 
			
		||||
                    style="bottom: 5px; right: 5px; background: rgba(0, 0, 0, .75); color: white; padding: 0 5px;"
 | 
			
		||||
                    >{{ timeFormat(video.duration) }}</span>
 | 
			
		||||
                    >{{ timeFormat(video.duration) }}</span
 | 
			
		||||
                >
 | 
			
		||||
            </div>
 | 
			
		||||
            <p>{{ video.title }}</p>
 | 
			
		||||
        </router-link>
 | 
			
		||||
| 
						 | 
				
			
			@ -37,6 +38,9 @@
 | 
			
		|||
            <div v-if="video.uploadedDate">
 | 
			
		||||
                {{ video.uploadedDate }}
 | 
			
		||||
            </div>
 | 
			
		||||
            <div v-if="video.uploaded">
 | 
			
		||||
                {{ timeAgo(video.uploaded) }}
 | 
			
		||||
            </div>
 | 
			
		||||
        </b>
 | 
			
		||||
        <div class="uk-align-right">
 | 
			
		||||
            <router-link :to="video.url + '&listen=1'">
 | 
			
		||||
| 
						 | 
				
			
			@ -55,4 +59,4 @@ export default {
 | 
			
		|||
        hideChannel: Boolean,
 | 
			
		||||
    },
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
</script>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue