pixelfed/resources/assets/components/Home.vue

<template>
    <div class="web-wrapper">
        <div v-if="isLoaded" class="container-fluid mt-3">
            <div class="row">
                <div class="col-md-4 col-lg-3">
                    <sidebar
                        :user="profile"
                        @refresh="shouldRefresh = true" />
                </div>

                <div class="col-md-8 col-lg-6 px-0">
                    <template v-if="showUpdateWarning && updateInfo && updateInfo.hasOwnProperty('running_latest')">
                        <div class="card rounded-lg mb-4 ft-std" style="background: #e11d48;border: 3px dashed #fff">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center flex-column flex-lg-row" style="gap:1rem">
                                    <div class="d-flex justify-content-between align-items-center" style="gap:1rem">
                                        <i class="d-none d-sm-block far fa-exclamation-triangle fa-5x text-white"></i>

                                        <div>
                                            <h1 class="h3 font-weight-bold text-light mb-0">New Update Available</h1>
                                            <p class="mb-0 text-white" style="font-size:18px;">Update your Pixelfed server as soon as possible!</p>
                                            <p class="mb-n1 text-white small" style="opacity:.7">Once you update, this message will disappear.</p>
                                            <p class="mb-0 text-white small d-flex" style="opacity:.5;gap:1rem;">
                                                <span>Current version: <strong>{{ updateInfo?.current ?? 'Unknown' }}</strong></span>
                                                <span>Latest version: <strong>{{ updateInfo?.latest?.version ?? 'Unknown' }}</strong></span>
                                            </p>
                                        </div>
                                    </div>

                                    <a v-if="updateInfo.latest.url" class="btn btn-light font-weight-bold" :href="updateInfo.latest.url" target="_blank">View Update</a>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-if="showUpdateConnectionWarning">
                        <div class="card rounded-lg mb-4 ft-std" style="background: #e11d48;border: 3px dashed #fff">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-items-center flex-column flex-lg-row" style="gap:1rem">
                                    <div class="d-flex justify-content-between align-items-center" style="gap:1rem">
                                        <i class="d-none d-sm-block far fa-exclamation-triangle fa-5x text-white"></i>

                                        <div>
                                            <h1 class="h3 font-weight-bold text-light mb-1">Software Update Check Failed</h1>
                                            <p class="mb-1 text-white" style="font-size:18px;line-height: 1.2;">We attempted to check if there is a new version available, however we encountered an error. <a href="https://github.com/pixelfed/pixelfed/releases" class="text-white font-weight-bold" style="text-decoration: underline;" target="_blank">Click here</a> to view the latest releases.</p>
                                            <p class="mb-0 text-white small">You can set <code class="text-white">INSTANCE_SOFTWARE_UPDATE_DISABLE_FAILED_WARNING=true</code> to remove this warning.</p>
                                            <p class="mb-0 text-white small" style="opacity:.7">Current version: {{ updateInfo?.current ?? 'Unknown' }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>

                    <story-carousel
                        v-if="storiesEnabled"
                        :profile="profile" />

                    <timeline
                        :profile="profile"
                        :scope="scope"
                        :key="scope"
                        v-on:update-profile="updateProfile"
                        :refresh="shouldRefresh"
                        @refreshed="shouldRefresh = false" />
                </div>

                <div class="d-none d-lg-block col-lg-3">
                    <rightbar class="sticky-top sidebar" />
                </div>
            </div>

            <drawer />
        </div>

        <div v-else class="d-flex justify-content-center align-items-center" style="height:calc(100vh - 58px);">
            <b-spinner />
        </div>
    </div>
</template>

<script type="text/javascript">
    import Drawer from './partials/drawer.vue';
    import Sidebar from './partials/sidebar.vue';
    import Rightbar from './partials/rightbar.vue';
    import Timeline from './sections/Timeline.vue';
    import Notifications from './sections/Notifications.vue';
    import StoryCarousel from './partials/timeline/StoryCarousel.vue';

    export default {
        props: {
            scope: {
                type: String,
                default: 'home'
            }
        },

        components: {
            "drawer": Drawer,
            "sidebar": Sidebar,
            "timeline": Timeline,
            "rightbar": Rightbar,
            "story-carousel": StoryCarousel,
        },
        data() {
            return {
                isLoaded: false,
                profile: undefined,
                recommended: [],
                trending: [],
                storiesEnabled: false,
                shouldRefresh: false,
                showUpdateWarning: false,
                showUpdateConnectionWarning: false,
                updateInfo: undefined,
            }
        },

        mounted() {
            this.init();
        },

        watch: {
            '$route': 'init'
        },

        methods: {
            init() {
                this.profile = window._sharedData.user;
                this.isLoaded = true;
                this.storiesEnabled = window.App?.config?.features?.hasOwnProperty('stories') ? window.App.config.features.stories : false;

                if(this.profile.is_admin) {
                    this.softwareUpdateCheck();
                }
            },

            updateProfile(delta) {
                this.profile = Object.assign(this.profile, delta);
            },

            softwareUpdateCheck() {
                axios.get('/api/web-admin/software-update/check')
                .then(res => {
                    if(!res || !res.data || !res.data.hasOwnProperty('running_latest') || res.data.running_latest) {
                        return;
                    }
                    if(res.data.running_latest === null) {
                        this.updateInfo = res.data;
                        this.showUpdateConnectionWarning = true;
                        return;
                    }
                    this.updateInfo = res.data;
                    this.showUpdateWarning = !res.data.running_latest;
                })
                .catch(err => {
                    this.showUpdateConnectionWarning = true;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .avatar {
        border-radius: 15px;
    }

    .username {
        margin-bottom: -6px;
    }

    .btn-white {
        background-color: #fff;
        border: 1px solid #F3F4F6;
    }

    .sidebar {
        top: 90px;
    }
</style>