koel/resources/assets/js/components/shared/view-mode-switch.vue

<template>
  <span class="view-modes">
    <a :class="{ active: mutatedMode === 'thumbnails' }"
      title="View as thumbnails"
      @click.prevent="setMode('thumbnails')"><i class="fa fa-th-large"></i></a>
    <a :class="{ active: mutatedMode === 'list' }"
      title="View as list"
      @click.prevent="setMode('list')"><i class="fa fa-list"></i></a>
  </span>
</template>

<script>
import isMobile from 'ismobilejs';

import { event } from '../../utils';
import { preferenceStore as preferences } from '../../stores';

export default {
  props: ['mode', 'for'],

  data() {
    return {
      mutatedMode: this.mode,
    };
  },

  computed: {
    /**
     * The preference key for local storage for persistent mode.
     *
     * @return {string}
     */
    preferenceKey() {
      return `${this.for}ViewMode`;
    },
  },

  methods: {
    setMode(mode) {
      preferences[this.preferenceKey] = this.mutatedMode = mode;
      this.$parent.changeViewMode(mode);
    },
  },

  created() {
    event.on('koel:ready', () => {
      this.mutatedMode = preferences[this.preferenceKey];

      // If the value is empty, we set a default mode.
      // On mobile, the mode should be 'listing'.
      // For desktop, 'thumbnails'.
      if (!this.mutatedMode) {
        this.mutatedMode = isMobile.phone ? 'list' : 'thumbnails';
      }

      this.setMode(this.mutatedMode);
    });
  },
};
</script>

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

.view-modes {
  display: flex;
  flex: 0 0 64px;
  border: 1px solid rgba(255, 255, 255, .2);
  height: 2rem;
  border-radius: 5px;
  overflow: hidden;

  a {
    width: 50%;
    text-align: center;
    line-height: 2rem;
    font-size: 1rem;

    &.active {
      background: #fff;
      color: #111;
    }
  }

  @media only screen and(max-width: 768px) {
    flex: auto;
    width: 64px;
    margin-top: 8px;
  }
}
</style>