pixelfed/pixelfed

<template>
    <div class="w-100 h-100">
        <div v-if="loading" style="min-height: 400px;" class="d-flex justify-content-center align-items-center">
            <img src="/img/pixelfed-icon-grey.svg" class="">
        </div>
        <div v-else>
            <div class="mb-4">
                <p class="text-center">
                    <!-- <a :class="[tab == 'popular'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('popular')">Popular</a> -->
                    <a :class="[tab == 'new'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('new')">New</a>
                    <!-- <a :class="[tab == 'random'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('random')">Random</a> -->
                    <a :class="[tab == 'about'? 'btn font-weight-bold py-0 btn-success' : 'btn font-weight-bold py-0 btn-outline-success']" href="#" @click.prevent="setTab('about')">About</a>
                </p>
            </div>
            <div v-if="tab != 'about'" class="row loops-container">
                <div class="col-12 col-md-4 mb-3" v-for="(loop, index) in loops">
                    <div class="card border border-success">
                        <div class="embed-responsive embed-responsive-1by1">
                            <video class="embed-responsive-item" :src="videoSrc(loop)" preload="none" width="100%" height="100%" loop @click="toggleVideo(loop, $event)" :poster="posterSrc(loop)"></video>
                        </div>
                        <div class="card-body">
                            <p class="username font-weight-bolder lead d-flex justify-content-between">
                                <a :href="loop.account.url" :title="loop.account.acct">{{truncate(loop.account.acct)}}</a> 
                                <a :href="loop.url">{{timestamp(loop)}}</a></p>
                            <p class="small text-muted text-truncate" v-html="getTitle(loop)"></p>
                            <div class="small text-muted d-flex justify-content-between mb-0">
                                <span>{{loop.favourites_count}} Likes</span>
                                <span>{{loop.reblogs_count}} Shares</span>
                                <span>{{loop.reply_count}} Comments</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="col-12">
                <div class="card">
                    <div class="card-body">
                        <p class="lead text-center mb-0">Loops are an exciting new way to explore short videos on Pixelfed.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style type="text/css">
    .loops-container .card {
        box-shadow: none;
    }
    .loops-container .card .card-img-top{
        border-radius: 0;
    }
    .loops-container a {
        color: #343a40;
    }
    a.hashtag,
    .loops-container .card-body a:hover {
        color: #28a745 !important;
    }
</style>

<script type="text/javascript">
Object.defineProperty(HTMLMediaElement.prototype, 'playing', {
    get: function(){
        return !!(this.currentTime > 0 && !this.paused && !this.ended && this.readyState > 2);
    }
})
export default {
    data() {
        return {
            loading: true,
            version: 1,
            loops: [],
            tab: 'new'
        }
    },

    mounted() {
        axios.get('/api/v2/loops')
            .then(res => {
                this.loops = res.data;
                this.loading = false;
            })
    }, 

    methods: {
        videoSrc(loop) {
            return loop.media_attachments[0].url;
        },
        posterSrc(loop) {
            return loop.media_attachments[0].preview_url;
        },
        setTab(tab) {
            this.tab = tab;
        },
        toggleVideo(loop, $event) {
            let el = $event.target;
            $('video').each(function() {
                if(el.src != $(this)[0].src) {
                    $(this)[0].pause();
                }
            });
            if(!el.playing) {
                el.play();
                //this.incrementLoop(loop);
            } else {
                el.pause();
            }
        },
        incrementLoop(loop) {
            // axios.post('/api/v2/loops/watch', {
            //     id: loop.id
            // }).then(res => {
            //     console.log(res.data);
            // });
        },
        timestamp(loop) {
            let ts = new Date(loop.created_at);
            return ts.toLocaleDateString();
        },
        getTitle(loop) {
            let content = loop.content ? loop.content : 'Untitled';
            return content.trim();
        },
        truncate(str, len = 15) {
            return _.truncate(str, {length: len});
        }
    }
}
</script>