funkwhale/front/src/App.vue

<template>
  <div
    id="app"
    :key="String($store.state.instance.instanceUrl)"
    :class="[$store.state.ui.queueFocused ? 'queue-focused' : '',
             {'has-bottom-player': $store.state.queue.tracks.length > 0}]"
  >
    <!-- here, we display custom stylesheets, if any -->
    <link
      v-for="url in customStylesheets"
      :key="url"
      rel="stylesheet"
      property="stylesheet"
      :href="url"
    >
    <sidebar
      :width="width"
      @show:set-instance-modal="showSetInstanceModal = !showSetInstanceModal"
      @show:shortcuts-modal="showShortcutsModal = !showShortcutsModal"
    />
    <set-instance-modal
      :show="showSetInstanceModal"
      @update:show="showSetInstanceModal = $event"
    />
    <service-messages />
    <transition name="queue">
      <queue
        v-if="$store.state.ui.queueFocused"
        @touch-progress="$refs.player.setCurrentTime($event)"
      />
    </transition>
    <router-view
      role="main"
      :class="{hidden: $store.state.ui.queueFocused}"
    />
    <player ref="player" />
    <playlist-modal v-if="$store.state.auth.authenticated" />
    <channel-upload-modal v-if="$store.state.auth.authenticated" />
    <filter-modal v-if="$store.state.auth.authenticated" />
    <report-modal />
    <shortcuts-modal
      :show="showShortcutsModal"
      @update:show="showShortcutsModal = $event"
    />
    <GlobalEvents @keydown.h.exact="showShortcutsModal = !showShortcutsModal" />
  </div>
</template>

<script>
import axios from 'axios'
import _ from 'lodash'
import { mapState, mapGetters } from 'vuex'
import { useWebSocket, whenever } from '@vueuse/core'
import GlobalEvents from '@/components/utils/global-events.vue'
import locales from './locales'
import { getClientOnlyRadio } from '@/radios'

import Player from '@/components/audio/Player.vue'
import Queue from '@/components/Queue.vue'
import PlaylistModal from '@/components/playlists/PlaylistModal.vue'
import ChannelUploadModal from '@/components/channels/UploadModal.vue'
import Sidebar from '@/components/Sidebar.vue'
import ServiceMessages from '@/components/ServiceMessages.vue'
import SetInstanceModal from '@/components/SetInstanceModal.vue'
import ShortcutsModal from '@/components/ShortcutsModal.vue'
import FilterModal from '@/components/moderation/FilterModal.vue'
import ReportModal from '@/components/moderation/ReportModal.vue'
import { watch, watchEffect } from '@vue/composition-api'

export default {
  name: 'App',
  components: {
    Player,
    Queue,
    PlaylistModal,
    ChannelUploadModal,
    Sidebar,
    ServiceMessages,
    SetInstanceModal,
    ShortcutsModal,
    FilterModal,
    ReportModal,
    GlobalEvents
  },
  setup (props, { root }) {
    const store = root.$store

    const url = store.getters['instance/absoluteUrl']('api/v1/activity')
      .replace(/^http/, 'ws')

    const { data, status, open, close } = useWebSocket(url, {
      autoReconnect: true,
      immediate: false
    })

    watch(() => store.state.auth.authenticated, (authenticated) => {
      if (authenticated) return open()
      close()
    })

    whenever(data, () => {
      store.dispatch('ui/websocketEvent', JSON.parse(data.value))
    })

    watchEffect(() => {
      console.log('Websocket status:', status.value)
    })
  },
  data () {
    return {
      instanceUrl: null,
      showShortcutsModal: false,
      showSetInstanceModal: false,
      initialTitle: document.title,
      width: window.innerWidth
    }
  },
  computed: {
    ...mapState({
      messages: state => state.ui.messages,
      nodeinfo: state => state.instance.nodeinfo,
      playing: state => state.player.playing,
      bufferProgress: state => state.player.bufferProgress,
      isLoadingAudio: state => state.player.isLoadingAudio,
      serviceWorker: state => state.ui.serviceWorker
    }),
    ...mapGetters({
      hasNext: 'queue/hasNext',
      currentTrack: 'queue/currentTrack',
      progress: 'player/progress'
    }),
    labels () {
      const play = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Play track')
      const pause = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Pause track')
      const next = this.$pgettext('Sidebar/Player/Icon.Tooltip', 'Next track')
      const expandQueue = this.$pgettext('Sidebar/Player/Icon.Tooltip/Verb', 'Expand queue')
      return {
        play,
        pause,
        next,
        expandQueue
      }
    },
    suggestedInstances () {
      const instances = this.$store.state.instance.knownInstances.slice(0)
      if (this.$store.state.instance.frontSettings.defaultServerUrl) {
        let serverUrl = this.$store.state.instance.frontSettings.defaultServerUrl
        if (!serverUrl.endsWith('/')) {
          serverUrl = serverUrl + '/'
        }
        instances.push(serverUrl)
      }
      instances.push(this.$store.getters['instance/defaultUrl'](), 'https://demo.funkwhale.audio/')
      return _.uniq(instances.filter((e) => { return e }))
    },
    version () {
      if (!this.nodeinfo) {
        return null
      }
      return _.get(this.nodeinfo, 'software.version')
    },
    customStylesheets () {
      if (this.$store.state.instance.frontSettings) {
        return this.$store.state.instance.frontSettings.additionalStylesheets || []
      }
      return null
    },
    matchDarkColorScheme () {
      if (window.matchMedia) {
        return window.matchMedia('(prefers-color-scheme: dark)')
      }
      return null
    }
  },
  watch: {
    '$store.state.instance.instanceUrl' (v) {
      this.$store.dispatch('instance/fetchSettings')
      this.fetchNodeInfo()
    },
    '$store.state.ui.theme': {
      immediate: true,
      handler (newValue) {
        const matchesDark = this.matchDarkColorScheme
        if (matchesDark) {
          if (newValue === 'system') {
            newValue = matchesDark.matches ? 'dark' : 'light'
            matchesDark.addEventListener('change', this.handleThemeChange)
          } else {
            matchesDark.removeEventListener('change', this.handleThemeChange)
          }
        } else {
          if (newValue === 'system') {
            newValue = 'light'
          }
        }
        this.setTheme(newValue)
      }
    },
    '$store.state.ui.currentLanguage': {
      immediate: true,
      handler (newValue) {
        const self = this
        const htmlLocale = newValue.toLowerCase().replace('_', '-')
        document.documentElement.setAttribute('lang', htmlLocale)
        if (newValue === 'en_US') {
          self.$language.current = 'noop'
          self.$language.current = newValue
          return self.$store.commit('ui/momentLocale', 'en')
        }
      }
    },
    currentTrack: {
      immediate: true,
      handler (newValue) {
        this.updateDocumentTitle()
      }
    },
    '$store.state.ui.pageTitle': {
      immediate: true,
      handler (newValue) {
        this.updateDocumentTitle()
      }
    },
    'serviceWorker.updateAvailable': {
      handler (v) {
        if (!v) {
          return
        }
        const self = this
        this.$store.commit('ui/addMessage', {
          content: this.$pgettext('App/Message/Paragraph', 'A new version of the app is available.'),
          date: new Date(),
          key: 'refreshApp',
          displayTime: 0,
          classActions: 'bottom attached opaque',
          actions: [
            {
              text: this.$pgettext('App/Message/Paragraph', 'Update'),
              class: 'primary',
              click: function () {
                self.updateApp()
              }
            },
            {
              text: this.$pgettext('App/Message/Paragraph', 'Later'),
              class: 'basic'
            }
          ]
        })
      },
      immediate: true
    }
  },
  async created () {
    if (navigator.serviceWorker) {
      navigator.serviceWorker.addEventListener(
        'controllerchange', () => {
          if (this.serviceWorker.refreshing) return
          this.$store.commit('ui/serviceWorker', {
            refreshing: true
          })
          window.location.reload()
        }
      )
    }
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
    const self = this
    if (!this.$store.state.ui.selectedLanguage) {
      this.autodetectLanguage()
    }
    setInterval(() => {
      // used to redraw ago dates every minute
      self.$store.commit('ui/computeLastDate')
    }, 1000 * 60)
    const urlParams = new URLSearchParams(window.location.search)
    const serverUrl = urlParams.get('_server')
    if (serverUrl) {
      this.$store.commit('instance/instanceUrl', serverUrl)
    }
    const url = urlParams.get('_url')
    if (url) {
      await this.$router.replace(url)
    } else if (!this.$store.state.instance.instanceUrl) {
      // we have several way to guess the API server url. By order of precedence:
      // 1. use the url provided in settings.json, if any
      // 2. use the url specified when building via VUE_APP_INSTANCE_URL
      // 3. use the current url
      const defaultInstanceUrl =
        this.$store.state.instance.frontSettings.defaultServerUrl ||
        import.meta.env.VUE_APP_INSTANCE_URL || this.$store.getters['instance/defaultUrl']()
      this.$store.commit('instance/instanceUrl', defaultInstanceUrl)
    } else {
      // needed to trigger initialization of axios / service worker
      this.$store.commit('instance/instanceUrl', this.$store.state.instance.instanceUrl)
    }
    await this.fetchNodeInfo()
    this.$store.dispatch('instance/fetchSettings')
    this.$store.commit('ui/addWebsocketEventHandler', {
      eventName: 'inbox.item_added',
      id: 'sidebarCount',
      handler: this.incrementNotificationCountInSidebar
    })
    this.$store.commit('ui/addWebsocketEventHandler', {
      eventName: 'mutation.created',
      id: 'sidebarReviewEditCount',
      handler: this.incrementReviewEditCountInSidebar
    })
    this.$store.commit('ui/addWebsocketEventHandler', {
      eventName: 'mutation.updated',
      id: 'sidebarReviewEditCount',
      handler: this.incrementReviewEditCountInSidebar
    })
    this.$store.commit('ui/addWebsocketEventHandler', {
      eventName: 'report.created',
      id: 'sidebarPendingReviewReportCount',
      handler: this.incrementPendingReviewReportsCountInSidebar
    })
    this.$store.commit('ui/addWebsocketEventHandler', {
      eventName: 'user_request.created',
      id: 'sidebarPendingReviewRequestCount',
      handler: this.incrementPendingReviewRequestsCountInSidebar
    })
    this.$store.commit('ui/addWebsocketEventHandler', {
      eventName: 'Listen',
      id: 'handleListen',
      handler: this.handleListen
    })
  },
  mounted () {
    const self = this
    // slight hack to allow use to have internal links in <translate> tags
    // while preserving router behaviour
    document.documentElement.addEventListener('click', function (event) {
      if (!event.target.matches('a.internal')) return
      self.$router.push(event.target.getAttribute('href'))
      event.preventDefault()
    }, false)
    this.$nextTick(() => {
      document.getElementById('fake-content').classList.add('loaded')
    })
  },
  destroyed () {
    this.$store.commit('ui/removeWebsocketEventHandler', {
      eventName: 'inbox.item_added',
      id: 'sidebarCount'
    })
    this.$store.commit('ui/removeWebsocketEventHandler', {
      eventName: 'mutation.created',
      id: 'sidebarReviewEditCount'
    })
    this.$store.commit('ui/removeWebsocketEventHandler', {
      eventName: 'mutation.updated',
      id: 'sidebarReviewEditCount'
    })
    this.$store.commit('ui/removeWebsocketEventHandler', {
      eventName: 'mutation.updated',
      id: 'sidebarPendingReviewReportCount'
    })
    this.$store.commit('ui/removeWebsocketEventHandler', {
      eventName: 'user_request.created',
      id: 'sidebarPendingReviewRequestCount'
    })
    this.$store.commit('ui/removeWebsocketEventHandler', {
      eventName: 'Listen',
      id: 'handleListen'
    })
  },
  methods: {
    incrementNotificationCountInSidebar (event) {
      this.$store.commit('ui/incrementNotifications', { type: 'inbox', count: 1 })
    },
    incrementReviewEditCountInSidebar (event) {
      this.$store.commit('ui/incrementNotifications', { type: 'pendingReviewEdits', value: event.pending_review_count })
    },
    incrementPendingReviewReportsCountInSidebar (event) {
      this.$store.commit('ui/incrementNotifications', { type: 'pendingReviewReports', value: event.unresolved_count })
    },
    incrementPendingReviewRequestsCountInSidebar (event) {
      this.$store.commit('ui/incrementNotifications', { type: 'pendingReviewRequests', value: event.pending_count })
    },
    handleListen (event) {
      if (this.$store.state.radios.current && this.$store.state.radios.running) {
        const current = this.$store.state.radios.current
        if (current.clientOnly && current.type === 'account') {
          getClientOnlyRadio(current).handleListen(current, event, this.$store)
        }
      }
    },
    async fetchNodeInfo () {
      const response = await axios.get('instance/nodeinfo/2.0/')
      this.$store.commit('instance/nodeinfo', response.data)
    },
    autodetectLanguage () {
      const userLanguage = navigator.language || navigator.userLanguage
      const available = locales.locales.map(e => { return e.code })
      let candidate
      const matching = available.filter((a) => {
        return userLanguage.replace('-', '_') === a
      })
      const almostMatching = available.filter((a) => {
        return userLanguage.replace('-', '_').split('_')[0] === a.split('_')[0]
      })
      if (matching.length > 0) {
        candidate = matching[0]
      } else if (almostMatching.length > 0) {
        candidate = almostMatching[0]
      } else {
        return
      }
      this.$store.commit('ui/currentLanguage', candidate)
    },
    getTrackInformationText (track) {
      const trackTitle = track.title
      const albumArtist = (track.album) ? track.album.artist.name : null
      const artistName = (
        (track.artist) ? track.artist.name : albumArtist)
      const text = `♫ ${trackTitle} – ${artistName} ♫`
      return text
    },
    updateDocumentTitle () {
      const parts = []
      const currentTrackPart = (
        (this.currentTrack)
          ? this.getTrackInformationText(this.currentTrack)
          : null)
      if (currentTrackPart) {
        parts.push(currentTrackPart)
      }
      if (this.$store.state.ui.pageTitle) {
        parts.push(this.$store.state.ui.pageTitle)
      }
      parts.push(this.initialTitle || 'Funkwhale')
      document.title = parts.join(' – ')
    },

    updateApp () {
      this.$store.commit('ui/serviceWorker', { updateAvailable: false })
      if (!this.serviceWorker.registration || !this.serviceWorker.registration.waiting) { return }
      this.serviceWorker.registration.waiting.postMessage({ command: 'skipWaiting' })
    },
    handleResize () {
      this.width = window.innerWidth
    },
    handleThemeChange (event) {
      this.setTheme(event.matches ? 'dark' : 'light')
    },
    setTheme (theme) {
      const oldTheme = (theme === 'light') ? 'dark' : 'light'
      document.body.classList.remove(`theme-${oldTheme}`)
      document.body.classList.add(`theme-${theme}`)
    }
  }
}
</script>

<style lang="scss">
@import "style/_main";

</style>