diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 000000000..e0f905339
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,28 @@
+{
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "embeddedLanguageFormatting": "off",
+  "htmlWhitespaceSensitivity": "strict",
+  "printWidth": 160,
+  "semi": false,
+  "singleAttributePerLine": true,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "useTabs": false,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "singleAttributePerLine": false
+      }
+    },
+    {
+      "files": "*.json",
+      "options": {
+        "parser": "json",
+        "printWidth": 80
+      }
+    }
+  ]
+}
diff --git a/front/index.html b/front/index.html
index 186250640..092ef0c79 100644
--- a/front/index.html
+++ b/front/index.html
@@ -1,101 +1,99 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <meta name="generator" content="Funkwhale">
-  <title>Funkwhale</title>
-  <meta name="description" content="Your free and federated audio platform">
-  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=1">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=1">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=1">
-  <link rel="mask-icon" href="/safari-pinned-tab.svg?v=1" color="#009fe3">
-  <link rel="shortcut icon" href="/favicon.ico?v=1">
-  <meta name="apple-mobile-web-app-title" content="Funkwhale">
-  <meta name="application-name" content="Funkwhale">
-  <meta name="msapplication-TileColor" content="#009fe3">
-  <meta name="theme-color" content="#f2711c">
-  <style>
-    #fake-app {
-      width: 100vw;
-      height: 100vh;
-      z-index: -1;
-      position: fixed;
-      top: 0;
-      left: 0;
-      display: flex;
-      font-family: sans-serif;
-    }
-    #fake-sidebar {
-      width: 275px;
-      height: 100vh;
-      background-color: #2D2F33;
-    }
-    #fake-sidebar.loaded,  #fake-content.loaded {
-      display: none;
-    }
-    #orange-square {
-      width: 56px;
-      height: 56px;
-      background-color: #f2711c;
-    }
-    #fake-content {
-      height: 100vh;
-      flex-grow: 1;
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-    }
-    #fake-content h1 {
-      margin-bottom: 2em;
-    }
-    #fake-content .placeholder {
-      width: 20em;
-      max-width: 95%;
-    }
-    @media only screen and (max-width: 768px) {
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="generator" content="Funkwhale" />
+    <title>Funkwhale</title>
+    <meta name="description" content="Your free and federated audio platform" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=1" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=1" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=1" />
+    <link rel="mask-icon" href="/safari-pinned-tab.svg?v=1" color="#009fe3" />
+    <link rel="shortcut icon" href="/favicon.ico?v=1" />
+    <meta name="apple-mobile-web-app-title" content="Funkwhale" />
+    <meta name="application-name" content="Funkwhale" />
+    <meta name="msapplication-TileColor" content="#009fe3" />
+    <meta name="theme-color" content="#f2711c" />
+    <style>
       #fake-app {
-        flex-direction: column;
+        width: 100vw;
+        height: 100vh;
+        z-index: -1;
+        position: fixed;
+        top: 0;
+        left: 0;
+        display: flex;
+        font-family: sans-serif;
       }
       #fake-sidebar {
-        width: 100%;
-        height: 56px;
+        width: 275px;
+        height: 100vh;
+        background-color: #2D2F33;
       }
-    }
-  </style>
-</head>
+      #fake-sidebar.loaded,  #fake-content.loaded {
+        display: none;
+      }
+      #orange-square {
+        width: 56px;
+        height: 56px;
+        background-color: #f2711c;
+      }
+      #fake-content {
+        height: 100vh;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+      #fake-content h1 {
+        margin-bottom: 2em;
+      }
+      #fake-content .placeholder {
+        width: 20em;
+        max-width: 95%;
+      }
+      @media only screen and (max-width: 768px) {
+        #fake-app {
+          flex-direction: column;
+        }
+        #fake-sidebar {
+          width: 100%;
+          height: 56px;
+        }
+      }
+    </style>
+  </head>
 
-<body id="body">
-  <div id="fake-app">
-    <div id="fake-sidebar">
-      <div id="orange-square"></div>
-    </div>
-    <div id="fake-content">
-      <noscript>
-        <strong>We're sorry but Funkwhale doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-      </noscript>
-      <h1>Loading Funkwhale…</h1>
-      <div class="ui placeholder">
-        <div class="image header">
-          <div class="full line"></div>
-          <div class="line"></div>
-        </div>
-        <div class="image header">
-          <div class="line"></div>
-          <div class="full line"></div>
-        </div>
-        <div class="image header">
-          <div class="medium line"></div>
-          <div class="full line"></div>
+  <body id="body" style="margin:0">
+    <div id="fake-app">
+      <div id="fake-sidebar">
+        <div id="orange-square"></div>
+      </div>
+      <div id="fake-content">
+        <noscript>
+          <strong>We're sorry but Funkwhale doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+        </noscript>
+        <h1>Loading Funkwhale…</h1>
+        <div class="ui placeholder">
+          <div class="image header">
+            <div class="full line"></div>
+            <div class="line"></div>
+          </div>
+          <div class="image header">
+            <div class="line"></div>
+            <div class="full line"></div>
+          </div>
+          <div class="image header">
+            <div class="medium line"></div>
+            <div class="full line"></div>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div id="app"></div>
-  <script type="module" src="/src/main.ts"></script>
-</body>
-
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
 </html>
diff --git a/front/public/embed.html b/front/public/embed.html
index 8e367ada3..f109f21cb 100644
--- a/front/public/embed.html
+++ b/front/public/embed.html
@@ -1,517 +1,508 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="generator" content="Funkwhale" />
 
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <meta name="generator" content="Funkwhale">
+    <link rel="icon" href="/favicon.ico" />
 
-  <link rel="icon" href="/favicon.ico">
+    <title>Funkwhale Widget</title>
 
-  <title>Funkwhale Widget</title>
+    <link rel="stylesheet" href="/embed.css" />
 
-  <link rel="stylesheet" href="/embed.css">
+    <script type="module">
+      import { createApp, reactive, nextTick } from 'https://unpkg.com/petite-vue@0.4.1?module'
 
-  <script type="module">
-    import { createApp, reactive, nextTick } from 'https://unpkg.com/petite-vue@0.4.1?module'
+      const SUPPORTED_TYPES = ['track', 'album', 'artist', 'playlist', 'channel']
 
-    const SUPPORTED_TYPES = ['track', 'album', 'artist', 'playlist', 'channel']
+      // Params
+      const params = new URL(location.href).searchParams
+      let baseUrl = params.get('instance') ?? params.get('b') ?? location.origin
+      const type = params.get('type')
+      const id = params.get('id')
 
-    // Params
-    const params = new URL(location.href).searchParams
-    let baseUrl = params.get('instance') ?? params.get('b') ?? location.origin
-    const type = params.get('type')
-    const id = params.get('id')
-
-    // Error
-    let error = reactive({ value: false })
-    if (!SUPPORTED_TYPES.includes(type)) {
-      error.value = `The embed widget doesn't support this media type: ${type}.`
-    }
-
-    if (id === null || isNaN(+id)) {
-      error.value = `The embed widget couldn't read the provided media ID: ${id}.`
-    }
-
-    // Standardize base URL
-    try {
-      baseUrl = new URL(baseUrl).origin
-    } catch (err) {
-      console.error(err)
-      error.value = `The embed widget couldn't read the provided instance URL: ${baseUrl}.`
-    }
-
-    // Cover
-    const DEFAULT_COVER = '/embed-default-cover.jpeg'
-    const cover = reactive({ value: DEFAULT_COVER })
-
-    const fetchArtistCover = async (id) => {
-      const response = await fetch(`${baseUrl}/api/v1/artists/${id}/`)
-      const data = await response.json()
-      cover.value = data.cover?.urls.medium_square_crop ?? DEFAULT_COVER
-    }
-
-    if (type === 'artist') {
-      fetchArtistCover(id).catch(() => undefined)
-    }
-
-    // Tracks
-    const tracks = reactive([])
-
-    const getTracksUrl = () => type === 'track'
-      ? `${baseUrl}/api/v1/tracks/${id}`
-      :  type === 'playlist'
-        ? `${baseUrl}/api/v1/playlists/${id}/tracks/`
-        : `${baseUrl}/api/v1/tracks/`
-
-    const getAudioSources = (uploads) => {
-      const sources = uploads
-        // NOTE: Filter out repeating and unplayable media types
-        .filter(({ mimetype }, index, array) => array.findIndex((upload) => upload.mimetype === mimetype) === index)
-        .filter(({ mimetype }) => ['probably', 'maybe'].includes(audio.element?.canPlayType(mimetype)))
-        // NOTE: For backwards compatibility, prepend the baseUrl if listen_url starts with a slash
-        .map(source => ({
-          ...source,
-          listen_url: source.listen_url[0] === '/'
-            ? `${baseUrl}${source.listen_url}`
-            : source.listen_url
-        }))
-
-      // NOTE: Add a transcoded MP3 src at the end for browsers
-      //       that do not support other codecs to be able to play it :)
-      if (sources.length > 0 && !sources.some(({ mimetype }) => mimetype === 'audio/mpeg')) {
-        const source = sources[0].listen_url
-        const regex = /^https?:/
-        const url = new URL(regex.test(source)
-          ? source
-          : source[0] === '/'
-            ? `${baseUrl}${source}`
-            : `${baseUrl}/${source}`
-        )
-        url.searchParams.set('to', 'mp3')
-        sources.push({ mimetype: 'audio/mpeg', listen_url: url.toString() })
+      // Error
+      const error = reactive({ value: false })
+      if (!SUPPORTED_TYPES.includes(type)) {
+        error.value = `The embed widget doesn't support this media type: ${type}.`
       }
 
-      return sources
-    }
-
-    const fetchTracks = async (url = getTracksUrl()) => {
-      const filters = new URLSearchParams({
-        include_channels: true,
-        playable: true,
-        [type]: id
-      })
-
-      switch (type) {
-        case 'album':
-          filters.set('ordering', 'disc_number,position')
-          break
-
-        case 'artist':
-          filters.set('ordering', '-album__release_date,disc_number,position')
-          break
-
-        case 'channel':
-          filters.set('ordering', '-creation_date')
-          break
-
-        case 'playlist': break
-        case 'track': break
-
-        // NOTE: The type is undefined, let's return before we make any request
-        default: return
+      if (id === null || isNaN(+id)) {
+        error.value = `The embed widget couldn't read the provided media ID: ${id}.`
       }
 
-      const response = await fetch(`${url}?${filters}`)
-      const data = await response.json()
+      // Standardize base URL
+      try {
+        baseUrl = new URL(baseUrl).origin
+      } catch (err) {
+        // console.error(err)
+        error.value = `The embed widget couldn't read the provided instance URL: ${baseUrl}.`
+      }
 
-      if (response.status > 299) {
-        switch (response.status) {
-          case 400:
-          case 404:
-            error.value = `This ${type} wasn't found on the server.`
-            break
+      // Cover
+      const DEFAULT_COVER = '/embed-default-cover.jpeg'
+      const cover = reactive({ value: DEFAULT_COVER })
 
-          case 403:
-            error.value = `You need to log in to access this ${type}.`
-            break
+      const fetchArtistCover = async (id) => {
+        const response = await fetch(`${baseUrl}/api/v1/artists/${id}/`)
+        const data = await response.json()
+        cover.value = data.cover?.urls.medium_square_crop ?? DEFAULT_COVER
+      }
 
-          case 500:
-            error.value = `An unknown error occurred while loading this ${type} from the server.`
-            break
+      if (type === 'artist') {
+        fetchArtistCover(id).catch(() => undefined)
+      }
 
-          default:
-            error.value = `An unknown error occurred while loading this ${type}.`
+      // Tracks
+      const tracks = reactive([])
+
+      const getTracksUrl = () => type === 'track'
+        ? `${baseUrl}/api/v1/tracks/${id}`
+        :  type === 'playlist'
+          ? `${baseUrl}/api/v1/playlists/${id}/tracks/`
+          : `${baseUrl}/api/v1/tracks/`
+
+      const getAudioSources = (uploads) => {
+        const sources = uploads
+          // NOTE: Filter out repeating and unplayable media types
+          .filter(({ mimetype }, index, array) => array.findIndex((upload) => upload.mimetype === mimetype) === index)
+          .filter(({ mimetype }) => ['probably', 'maybe'].includes(audio.element?.canPlayType(mimetype)))
+          // NOTE: For backwards compatibility, prepend the baseUrl if listen_url starts with a slash
+          .map(source => ({
+            ...source,
+            listen_url: source.listen_url[0] === '/'
+              ? `${baseUrl}${source.listen_url}`
+              : source.listen_url
+          }))
+
+        // NOTE: Add a transcoded MP3 src at the end for browsers
+        //       that do not support other codecs to be able to play it :)
+        if (sources.length > 0 && !sources.some(({ mimetype }) => mimetype === 'audio/mpeg')) {
+          const source = sources[0].listen_url
+          const regex = /^https?:/
+          const url = new URL(regex.test(source)
+            ? source
+            : source[0] === '/'
+              ? `${baseUrl}${source}`
+              : `${baseUrl}/${source}`
+          )
+          url.searchParams.set('to', 'mp3')
+          sources.push({ mimetype: 'audio/mpeg', listen_url: url.toString() })
         }
 
-        // NOTE: If we already have some tracks, let's fail silently
-        if (tracks.length > 0) {
-          console.error(error.value)
-          error.value = false
+        return sources
+      }
+
+      const fetchTracks = async (url = getTracksUrl()) => {
+        const filters = new URLSearchParams({
+          include_channels: true,
+          playable: true,
+          [type]: id
+        })
+
+        switch (type) {
+          case 'album':
+            filters.set('ordering', 'disc_number,position')
+            break
+
+          case 'artist':
+            filters.set('ordering', '-album__release_date,disc_number,position')
+            break
+
+          case 'channel':
+            filters.set('ordering', '-creation_date')
+            break
+
+          case 'playlist': break
+          case 'track': break
+
+          // NOTE: The type is undefined, let's return before we make any request
+          default: return
         }
 
-        return
-      }
+        const response = await fetch(`${url}?${filters}`)
+        const data = await response.json()
 
-      if (type === 'track') {
-        data.results = [data]
-      }
+        if (response.status > 299) {
+          switch (response.status) {
+            case 400:
+            case 404:
+              error.value = `This ${type} wasn't found on the server.`
+              break
 
-      if (type === 'playlist') {
-        data.results = data.results.map(({ track }) => track)
-      }
+            case 403:
+              error.value = `You need to log in to access this ${type}.`
+              break
 
-      tracks.push(
-        ...data.results.map((track) => ({
-          id: track.id,
-          title: track.title,
-          artist: track.artist,
-          album: track.album,
-          cover: (track.cover ?? track.album.cover)?.urls.medium_square_crop,
-          sources: getAudioSources(track.uploads)
-        })).filter(({ sources }) => sources.length > 0)
-      )
+            case 500:
+              error.value = `An unknown error occurred while loading this ${type} from the server.`
+              break
 
-      if (data.next) {
-        return fetchTracks(data.next)
-      }
-    }
-
-    // NOTE: Fetch tracks only if there is no error
-    if (error.value === false) {
-      fetchTracks().catch(err => {
-        console.error(err)
-        error.value = `An unknown error occurred while loading this ${type}.`
-      })
-    }
-
-    // Duration
-    const ZERO_DATE = +new Date('2022-01-01T00:00:00.000')
-    const intl = new Intl.DateTimeFormat('en', {
-      hour: '2-digit',
-      minute: '2-digit',
-      second: '2-digit',
-      hourCycle: 'h23'
-    })
-
-    const formatDuration = (duration) => {
-      if (duration === 0) return
-
-      const time = intl.format(new Date(ZERO_DATE + duration * 1e3))
-      return time.replace(/^00:/, '')
-    }
-
-    // Logo component
-    const Logo = () => ({ $template: '#logo-template' })
-
-    // Icon component
-    const Icon = ({ icon }) => ({ $template: '#icon-template', icon })
-
-    // Media Session
-    const initializeMediaSession = () => {
-      if ('mediaSession' in navigator) {
-        navigator.mediaSession.setActionHandler('play', () => {
-          player.playing = true
-          audio.element.play()
-        })
-
-        navigator.mediaSession.setActionHandler('pause', () => {
-          player.playing = false
-          audio.element.pause()
-        })
-
-        navigator.mediaSession.setActionHandler('seekbackward', () => player.seekTime({
-          target: { value: (audio.element.currentTime - 5) / audio.element.duration * 100 }
-        }))
-
-        navigator.mediaSession.setActionHandler('seekforward', () => player.seekTime({
-          target: { value: (audio.element.currentTime + 5) / audio.element.duration * 100 }
-        }))
-
-        navigator.mediaSession.setActionHandler('previoustrack', () => player.prev())
-        navigator.mediaSession.setActionHandler('nexttrack', () => player.next())
-      }
-    }
-
-    const updateMediaSessionMetadata = () => {
-      const { current } = player
-
-      if (tracks[current] && 'mediaSession' in navigator) {
-        const metadata = new MediaMetadata({
-          title: tracks[current].title,
-          album: tracks[current]?.album.title ?? '',
-          artist: tracks[current]?.artist.name ?? '',
-          artwork: [
-            { src: tracks[current]?.cover ?? cover.value, sizes: '96x96', type: 'image/png' },
-            { src: tracks[current]?.cover ?? cover.value, sizes: '128x128', type: 'image/png' },
-            { src: tracks[current]?.cover ?? cover.value, sizes: '192x192', type: 'image/png' },
-            { src: tracks[current]?.cover ?? cover.value, sizes: '256x256', type: 'image/png' },
-            { src: tracks[current]?.cover ?? cover.value, sizes: '384x384', type: 'image/png' },
-            { src: tracks[current]?.cover ?? cover.value, sizes: '512x512', type: 'image/png' }
-          ]
-        })
-
-        requestAnimationFrame(() => {
-          navigator.mediaSession.metadata = metadata
-        })
-      }
-    }
-
-    // Player
-    const player = reactive({
-      playing: false,
-      current: 0,
-      seek: 0,
-      play (unsafeIndex) {
-        const index = Math.min(tracks.length - 1, Math.max(unsafeIndex, 0))
-        if (this.current === index) return
-
-        const wasPlaying = this.playing
-        if (wasPlaying) audio.element.pause()
-
-        this.current = index
-        audio.element.currentTime = 0
-        audio.element.load()
-
-        if (wasPlaying) audio.element.play()
-
-        updateMediaSessionMetadata()
-      },
-
-      next () {
-        this.play(this.current + 1)
-      },
-
-      prev () {
-        this.play(this.current - 1)
-      },
-
-      seekTime (event) {
-        if (!audio.element) return
-
-        const seek = audio.element.duration * event.target.value / 100
-        audio.element.currentTime = isNaN(seek) ? 0 : Math.min(seek, audio.element.duration - 1)
-      },
-
-      togglePlay () {
-        this.playing = !this.playing
-
-        if (this.playing) audio.element.play()
-        else audio.element.pause()
-
-        updateMediaSessionMetadata()
-      }
-    })
-
-    // Volume
-    const DEFAULT_VOLUME = 75
-    const volume = reactive({
-      level: DEFAULT_VOLUME,
-      lastLevel: DEFAULT_VOLUME,
-
-      mute () {
-        if (this.lastLevel === 0) {
-          this.lastLevel = DEFAULT_VOLUME
-        }
-
-        const lastLevel = this.level
-        this.level = lastLevel === 0
-          ? this.lastLevel
-          : 0
-
-        this.lastLevel = lastLevel
-      }
-    })
-
-    // Audio
-    const audio = reactive({
-      element: undefined,
-      current: -1,
-      volume: -1
-    })
-
-    const watchAudio = (element, volume) => {
-      if (audio.element !== element) {
-        audio.element = element
-
-        element.addEventListener('timeupdate', (event) => {
-          const seek = element.currentTime / element.duration * 100
-          player.seek = isNaN(seek) ? 0 : seek
-        })
-
-        element.addEventListener('ended', () => {
-          // NOTE: Pause playback if it's a last track
-          if (player.current === tracks.length - 1) {
-            player.playing = false
+            default:
+              error.value = `An unknown error occurred while loading this ${type}.`
           }
 
-          player.next()
+          // NOTE: If we already have some tracks, let's fail silently
+          if (tracks.length > 0) {
+            // console.error(error.value)
+            error.value = false
+          }
+
+          return
+        }
+
+        if (type === 'track') {
+          data.results = [data]
+        }
+
+        if (type === 'playlist') {
+          data.results = data.results.map(({ track }) => track)
+        }
+
+        tracks.push(
+          ...data.results.map((track) => ({
+            id: track.id,
+            title: track.title,
+            artist: track.artist,
+            album: track.album,
+            cover: (track.cover ?? track.album.cover)?.urls.medium_square_crop,
+            sources: getAudioSources(track.uploads)
+          })).filter(({ sources }) => sources.length > 0)
+        )
+
+        if (data.next) {
+          return fetchTracks(data.next)
+        }
+      }
+
+      // NOTE: Fetch tracks only if there is no error
+      if (error.value === false) {
+        fetchTracks().catch(err => {
+          // console.error(err)
+          error.value = `An unknown error occurred while loading this ${type}.`
         })
       }
 
-      if (audio.volume !== volume) {
-        audio.element.volume = volume / 100
-        audio.volume = volume
-      }
-    }
-
-    // Application
-    const app = createApp({
-      // Components
-      Logo,
-      Icon,
-
-      // Errors
-      error,
-
-      // Playback
-      initializeMediaSession,
-      watchAudio,
-      player,
-      volume,
-
-      // Track info
-      formatDuration,
-      tracks,
-      cover
-    })
-
-    app.directive('range', (ctx) => {
-      ctx.effect(() => {
-        ctx.el.style.setProperty('--value', ctx.get())
+      // Duration
+      const ZERO_DATE = +new Date('2022-01-01T00:00:00.000')
+      const intl = new Intl.DateTimeFormat('en', {
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit',
+        hourCycle: 'h23'
       })
-    })
 
-    app.mount()
-  </script>
-</head>
+      const formatDuration = (duration) => {
+        if (duration === 0) return
 
-<template id="logo-template">
-  <a
-    title="Funkwhale"
-    href="https://funkwhale.audio"
-    target="_blank"
-    rel="noopener noreferrer"
-    class="logo-link"
-    tabindex="-1"
-  >
-    <img src="/logo-white.svg" />
-  </a>
-</template>
+        const time = intl.format(new Date(ZERO_DATE + duration * 1e3))
+        return time.replace(/^00:/, '')
+      }
 
-<template id="icon-template">
-  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="icon" fill="currentColor" viewBox="0 0 16 16">
-    <path v-if="icon === 'pause'" d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z" />
-    <path v-else-if="icon === 'play'" d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
-    <path v-else-if="icon === 'prev'" d="M4 4a.5.5 0 0 1 1 0v3.248l6.267-3.636c.54-.313 1.232.066 1.232.696v7.384c0 .63-.692 1.01-1.232.697L5 8.753V12a.5.5 0 0 1-1 0V4z" />
-    <path v-else-if="icon === 'next'" d="M12.5 4a.5.5 0 0 0-1 0v3.248L5.233 3.612C4.693 3.3 4 3.678 4 4.308v7.384c0 .63.692 1.01 1.233.697L11.5 8.753V12a.5.5 0 0 0 1 0V4z" />
-    <path v-else-if="icon === 'mute'" d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z" />
-    <g v-else-if="icon === 'volume'">
-      <path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z" />
-      <path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z" />
-      <path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z" />
-    </g>
-  </svg>
-</template>
+      // Logo component
+      const Logo = () => ({ $template: '#logo-template' })
 
-<body>
-  <noscript>
-    <strong>You need to enable Javascript to use the embed widget.</strong>
-  </noscript>
+      // Icon component
+      const Icon = ({ icon }) => ({ $template: '#icon-template', icon })
 
-  <main v-scope v-cloak>
-    <div v-if="error.value !== false" class="error">
-      {{ error.value }}
-      <div v-scope="Logo()"></div>
-    </div>
+      // Media Session
+      const initializeMediaSession = () => {
+        if ('mediaSession' in navigator) {
+          navigator.mediaSession.setActionHandler('play', () => {
+            player.playing = true
+            audio.element.play()
+          })
 
-    <template v-else>
-      <div class="player">
-        <img :src="tracks[player.current]?.cover ?? cover.value" class="cover-image" />
+          navigator.mediaSession.setActionHandler('pause', () => {
+            player.playing = false
+            audio.element.pause()
+          })
 
-        <div class="player-content">
-          <h1>{{ tracks[player.current]?.title }}</h1>
-          <h2>{{ tracks[player.current]?.artist.name }}</h2>
-        </div>
+          navigator.mediaSession.setActionHandler('seekbackward', () => player.seekTime({
+            target: { value: (audio.element.currentTime - 5) / audio.element.duration * 100 }
+          }))
 
-        <div class="player-controls">
-          <button @click="player.prev">
-            <span v-scope="Icon({ icon: 'prev' })"></span>
-          </button>
-          <button @click="player.togglePlay" class="play">
-            <span v-if="!player.playing" v-scope="Icon({ icon: 'play' })"></span>
-            <span v-else v-scope="Icon({ icon: 'pause' })"></span>
-          </button>
-          <button @click="player.next">
-            <span v-scope="Icon({ icon: 'next' })"></span>
-          </button>
+          navigator.mediaSession.setActionHandler('seekforward', () => player.seekTime({
+            target: { value: (audio.element.currentTime + 5) / audio.element.duration * 100 }
+          }))
 
-          <input
-            v-model.number="player.seek"
-            v-range="player.seek"
-            @input="player.seekTime"
-            type="range"
-            step="0.1"
-          />
+          navigator.mediaSession.setActionHandler('previoustrack', () => player.prev())
+          navigator.mediaSession.setActionHandler('nexttrack', () => player.next())
+        }
+      }
 
-          <button @click="volume.mute">
-            <span v-if="volume.level === 0" v-scope="Icon({ icon: 'mute' })"></span>
-            <span v-else v-scope="Icon({ icon: 'volume' })"></span>
-          </button>
+      const updateMediaSessionMetadata = () => {
+        const { current } = player
 
-          <input
-            v-model.number="volume.level"
-            v-range="volume.level"
-            type="range"
-            step="0.1"
-          />
-        </div>
+        if (tracks[current] && 'mediaSession' in navigator) {
+          const metadata = new MediaMetadata({
+            title: tracks[current].title,
+            album: tracks[current]?.album.title ?? '',
+            artist: tracks[current]?.artist.name ?? '',
+            artwork: [
+              { src: tracks[current]?.cover ?? cover.value, sizes: '96x96', type: 'image/png' },
+              { src: tracks[current]?.cover ?? cover.value, sizes: '128x128', type: 'image/png' },
+              { src: tracks[current]?.cover ?? cover.value, sizes: '192x192', type: 'image/png' },
+              { src: tracks[current]?.cover ?? cover.value, sizes: '256x256', type: 'image/png' },
+              { src: tracks[current]?.cover ?? cover.value, sizes: '384x384', type: 'image/png' },
+              { src: tracks[current]?.cover ?? cover.value, sizes: '512x512', type: 'image/png' }
+            ]
+          })
 
-        <span v-scope="Logo()" class="logo-wrapper"></span>
+          requestAnimationFrame(() => {
+            navigator.mediaSession.metadata = metadata
+          })
+        }
+      }
+
+      // Player
+      const player = reactive({
+        playing: false,
+        current: 0,
+        seek: 0,
+        play (unsafeIndex) {
+          const index = Math.min(tracks.length - 1, Math.max(unsafeIndex, 0))
+          if (this.current === index) return
+
+          const wasPlaying = this.playing
+          if (wasPlaying) audio.element.pause()
+
+          this.current = index
+          audio.element.currentTime = 0
+          audio.element.load()
+
+          if (wasPlaying) audio.element.play()
+
+          updateMediaSessionMetadata()
+        },
+
+        next () {
+          this.play(this.current + 1)
+        },
+
+        prev () {
+          this.play(this.current - 1)
+        },
+
+        seekTime (event) {
+          if (!audio.element) return
+
+          const seek = audio.element.duration * event.target.value / 100
+          audio.element.currentTime = isNaN(seek) ? 0 : Math.min(seek, audio.element.duration - 1)
+        },
+
+        togglePlay () {
+          this.playing = !this.playing
+
+          if (this.playing) audio.element.play()
+          else audio.element.pause()
+
+          updateMediaSessionMetadata()
+        }
+      })
+
+      // Volume
+      const DEFAULT_VOLUME = 75
+      const volume = reactive({
+        level: DEFAULT_VOLUME,
+        lastLevel: DEFAULT_VOLUME,
+
+        mute () {
+          if (this.lastLevel === 0) {
+            this.lastLevel = DEFAULT_VOLUME
+          }
+
+          const lastLevel = this.level
+          this.level = lastLevel === 0
+            ? this.lastLevel
+            : 0
+
+          this.lastLevel = lastLevel
+        }
+      })
+
+      // Audio
+      const audio = reactive({
+        element: undefined,
+        current: -1,
+        volume: -1
+      })
+
+      const watchAudio = (element, volume) => {
+        if (audio.element !== element) {
+          audio.element = element
+
+          element.addEventListener('timeupdate', (event) => {
+            const seek = element.currentTime / element.duration * 100
+            player.seek = isNaN(seek) ? 0 : seek
+          })
+
+          element.addEventListener('ended', () => {
+            // NOTE: Pause playback if it's a last track
+            if (player.current === tracks.length - 1) {
+              player.playing = false
+            }
+
+            player.next()
+          })
+        }
+
+        if (audio.volume !== volume) {
+          audio.element.volume = volume / 100
+          audio.volume = volume
+        }
+      }
+
+      // Application
+      const app = createApp({
+        // Components
+        Logo,
+        Icon,
+
+        // Errors
+        error,
+
+        // Playback
+        initializeMediaSession,
+        watchAudio,
+        player,
+        volume,
+
+        // Track info
+        formatDuration,
+        tracks,
+        cover
+      })
+
+      app.directive('range', (ctx) => {
+        ctx.effect(() => {
+          ctx.el.style.setProperty('--value', ctx.get())
+        })
+      })
+
+      app.mount()
+    </script>
+  </head>
+
+  <template id="logo-template">
+    <a title="Funkwhale" href="https://funkwhale.audio" target="_blank" rel="noopener noreferrer" class="logo-link" tabindex="-1">
+      <img src="/logo-white.svg" />
+    </a>
+  </template>
+
+  <template id="icon-template">
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="icon" fill="currentColor" viewBox="0 0 16 16">
+      <path
+        v-if="icon === 'pause'"
+        d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"
+      />
+      <path
+        v-else-if="icon === 'play'"
+        d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"
+      />
+      <path
+        v-else-if="icon === 'prev'"
+        d="M4 4a.5.5 0 0 1 1 0v3.248l6.267-3.636c.54-.313 1.232.066 1.232.696v7.384c0 .63-.692 1.01-1.232.697L5 8.753V12a.5.5 0 0 1-1 0V4z"
+      />
+      <path
+        v-else-if="icon === 'next'"
+        d="M12.5 4a.5.5 0 0 0-1 0v3.248L5.233 3.612C4.693 3.3 4 3.678 4 4.308v7.384c0 .63.692 1.01 1.233.697L11.5 8.753V12a.5.5 0 0 0 1 0V4z"
+      />
+      <path
+        v-else-if="icon === 'mute'"
+        d="M6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06zm7.137 2.096a.5.5 0 0 1 0 .708L12.207 8l1.647 1.646a.5.5 0 0 1-.708.708L11.5 8.707l-1.646 1.647a.5.5 0 0 1-.708-.708L10.793 8 9.146 6.354a.5.5 0 1 1 .708-.708L11.5 7.293l1.646-1.647a.5.5 0 0 1 .708 0z"
+      />
+      <g v-else-if="icon === 'volume'">
+        <path
+          d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"
+        />
+        <path
+          d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"
+        />
+        <path
+          d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"
+        />
+      </g>
+    </svg>
+  </template>
+
+  <body>
+    <noscript>
+      <strong>You need to enable Javascript to use the embed widget.</strong>
+    </noscript>
+
+    <main v-scope v-cloak>
+      <div v-if="error.value !== false" class="error">
+        {{ error.value }}
+        <div v-scope="Logo()"></div>
       </div>
 
-      <div class="track-list">
-        <table>
-          <tr
-            v-for="(track, index) in tracks"
-            :id="'queue-item-' + index"
-            :key="track.id"
-            role="button"
-            :class="{ 'current': player.current === index }"
-            @click="player.play(index)"
-            @keyup.enter="player.play(index)"
-            tabindex="0"
-          >
-            <td>
-              {{ index + 1 }}
-            </td>
-            <td :title="track.title">
-              {{ track.title }}
-            </td>
-            <td :title="track.artist.name">
-              {{ track.artist.name }}
-            </td>
-            <td :title="track.album?.title">
-              {{ track.album?.title }}
-            </td>
-            <td>
-              {{ formatDuration(track.sources?.[0].duration ?? 0) }}
-            </td>
-          </tr>
-        </table>
-      </div>
+      <template v-else>
+        <div class="player">
+          <img :src="tracks[player.current]?.cover ?? cover.value" class="cover-image" />
 
-      <audio v-effect="watchAudio($el, volume.level)" @vue:mounted="initializeMediaSession">
-        <source
-          v-for="source in tracks[player.current]?.sources ?? []"
-          :key="source.mimetype + source.listen_url"
-          :type="source.mimetype"
-          :src="source.listen_url"
-        >
-      </audio>
-    </template>
-  </main>
-</body>
+          <div class="player-content">
+            <h1>{{ tracks[player.current]?.title }}</h1>
+            <h2>{{ tracks[player.current]?.artist.name }}</h2>
+          </div>
 
+          <div class="player-controls">
+            <button @click="player.prev">
+              <span v-scope="Icon({ icon: 'prev' })"></span>
+            </button>
+            <button @click="player.togglePlay" class="play">
+              <span v-if="!player.playing" v-scope="Icon({ icon: 'play' })"></span>
+              <span v-else v-scope="Icon({ icon: 'pause' })"></span>
+            </button>
+            <button @click="player.next">
+              <span v-scope="Icon({ icon: 'next' })"></span>
+            </button>
+
+            <input v-model.number="player.seek" v-range="player.seek" @input="player.seekTime" type="range" step="0.1" />
+
+            <button @click="volume.mute">
+              <span v-if="volume.level === 0" v-scope="Icon({ icon: 'mute' })"></span>
+              <span v-else v-scope="Icon({ icon: 'volume' })"></span>
+            </button>
+
+            <input v-model.number="volume.level" v-range="volume.level" type="range" step="0.1" />
+          </div>
+
+          <span v-scope="Logo()" class="logo-wrapper"></span>
+        </div>
+
+        <div class="track-list">
+          <table>
+            <tr
+              v-for="(track, index) in tracks"
+              :id="'queue-item-' + index"
+              :key="track.id"
+              role="button"
+              :class="{ 'current': player.current === index }"
+              @click="player.play(index)"
+              @keyup.enter="player.play(index)"
+              tabindex="0"
+            >
+              <td> {{ index + 1 }} </td>
+              <td :title="track.title"> {{ track.title }} </td>
+              <td :title="track.artist.name"> {{ track.artist.name }} </td>
+              <td :title="track.album?.title"> {{ track.album?.title }} </td>
+              <td> {{ formatDuration(track.sources?.[0].duration ?? 0) }} </td>
+            </tr>
+          </table>
+        </div>
+
+        <audio v-effect="watchAudio($el, volume.level)" @vue:mounted="initializeMediaSession">
+          <source
+            v-for="source in tracks[player.current]?.sources ?? []"
+            :key="source.mimetype + source.listen_url"
+            :type="source.mimetype"
+            :src="source.listen_url"
+          />
+        </audio>
+      </template>
+    </main>
+  </body>
 </html>
