koel/resources/assets/js/components/main-wrapper/extra/index.vue

<template>
    <section id="extra" :class="{ showing: state.showExtraPanel }">
        <div class="tabs">
            <div class="header clear">
                <a @click.prevent="currentView = 'lyrics'"
                    :class="{ active: currentView === 'lyrics' }">Lyrics</a>
                <a @click.prevent="currentView = 'artistInfo'"
                    :class="{ active: currentView === 'artistInfo' }">Artist</a>
                <a @click.prevent="currentView = 'albumInfo'"
                    :class="{ active: currentView === 'albumInfo' }">Album</a>
            </div>

            <div class="panes">
                <lyrics :song="song" ref="lyrics" v-show="currentView === 'lyrics'"></lyrics>
                <artist-info v-if="song.artist.id"
                    :artist="song.artist"
                    :mode="'sidebar'"
                    ref="artist-info"
                    v-show="currentView === 'artistInfo'">
                </artist-info>
                <album-info v-if="song.album.id"
                    :album="song.album"
                    :mode="'sidebar'"
                    ref="album-info"
                    v-show="currentView === 'albumInfo'">
                </album-info>
            </div>
        </div>
    </section>
</template>

<script>
    import isMobile from 'ismobilejs';
    import { invokeMap } from 'lodash';
    import $ from 'jquery';

    import { event } from '../../../utils';
    import lyrics from './lyrics.vue';
    import artistInfo from './artist-info.vue';
    import albumInfo from './album-info.vue';
    import preferences from '../../../stores/preference';
    import songStore from '../../../stores/song';
    import songInfoService from '../../../services/info/song';

    export default {
        name: 'main-wrapper--extra--index',
        components: { lyrics, artistInfo, albumInfo },

        data() {
            return {
                song: songStore.stub,
                state: preferences.state,
                currentView: 'lyrics',
            };
        },

        watch: {
            /**
             * Watch the "showExtraPanel" property to add/remove the corresponding class
             * to/from the html tag.
             * Some element's CSS can then be controlled based on this class.
             */
            'state.showExtraPanel': function (newVal) {
                if (newVal && !isMobile.any) {
                    $('html').addClass('with-extra-panel');
                } else {
                    $('html').removeClass('with-extra-panel');
                }
            },
        },

        mounted() {
            // On ready, add 'with-extra-panel' class.
            if (!isMobile.any) {
                $('html').addClass('with-extra-panel');
            }

            if (isMobile.phone) {
                // On a mobile device, we always hide the panel initially regardless of
                // the saved preference.
                preferences.showExtraPanel = false;
            }
        },

        methods: {
            /**
             * Reset all self and applicable child components' states.
             */
            resetState() {
                this.currentView = 'lyrics';
                this.song = songStore.stub;
                invokeMap(this.$refs, 'resetState');
            },
        },

        created() {
            event.on({
                'main-content-view:load': view => {
                    // Hide the panel away if a main view is triggered on mobile.
                    if (isMobile.phone) {
                        preferences.showExtraPanel = false;
                    }
                },

                'song:played': song => songInfoService.fetch(this.song = song),

                'koel:teardown': () => this.resetState(),
            });
        },
    };
</script>

<style lang="sass">
    @import "../../../../sass/partials/_vars.scss";
    @import "../../../../sass/partials/_mixins.scss";

    #extra {
        flex: 0 0 $extraPanelWidth;
        padding: 24px 16px $footerHeight;
        background: $colorExtraBgr;
        max-height: calc(100vh - #{$headerHeight + $footerHeight});
        display: none;
        color: $color2ndText;
        overflow: auto;
        -ms-overflow-style: -ms-autohiding-scrollbar;

        html.touchevents & {
            // Enable scroll with momentum on touch devices
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }

        &.showing {
            display: block;
        }

        h1 {
            font-weight: $fontWeight_UltraThin;
            font-size: 2.2rem;
            margin-bottom: 16px;
            line-height: 2.8rem;
        }

        @media only screen and (max-width : 1024px) {
            position: fixed;
            height: calc(100vh - #{$headerHeight + $footerHeight});
            padding-bottom: $footerHeight; // make sure the footer can never overlap the content
            width: $extraPanelWidth;
            z-index: 5;
            top: $headerHeight;
            right: -100%;
            transition: right .3s ease-in;

            &.showing {
                right: 0;
            }
        }

        @media only screen and (max-width : 667px) {
            width: 100%;
        }
    }
</style>