Merge branch 'master' of github.com:jcalixte/bons-programmeurs

package.json

@@ -13,6 +13,7 @@
     "core-js": "^3.6.5",
     "plyr": "^3.6.2",
     "register-service-worker": "^1.7.1",
+    "retrobus": "^1.0.1",
     "vue": "^2.6.11",
     "vue-i18n": "^8.17.3",
     "vue-router": "^3.2.0",

src/App.vue

@@ -1,10 +1,23 @@
 <template>
   <div id="app">
+    <SWNewVersion />
     <img class="logo" src="@/assets/logo.svg" alt="binôme" />
     <router-view />
   </div>
 </template>
 
+<script lang="ts">
+import { defineComponent } from '@vue/composition-api'
+import SWNewVersion from '@/components/SWNewVersion.vue'
+
+export default defineComponent({
+  name: 'App',
+  components: {
+    SWNewVersion
+  }
+})
+</script>
+
 <style lang="scss">
 @import '@/styles/app';
 

src/assets/reload.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-rotate-clockwise" width="76" height="76" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3a47" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z"/>
+  <path d="M4.05 11a8 8 0 1 1 .5 4m-.5 5v-5h5" />
+</svg>

src/components/SWNewVersion.vue

@@ -0,0 +1,51 @@
+<template>
+  <transition name="fade">
+    <div class="sw-new-version" v-if="newVersion">
+      <button @click="reload">
+        <img src="@/assets/reload.svg" alt="reload" />
+      </button>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from '@vue/composition-api'
+import { addEventBusListener } from 'retrobus'
+
+export default defineComponent({
+  name: 'SWNewVersion',
+  setup() {
+    const newVersion = ref(false)
+
+    onMounted(() => {
+      addEventBusListener('new-version', () => (newVersion.value = true), {
+        retro: true,
+        once: true
+      })
+    })
+
+    return {
+      newVersion,
+      reload: () => location.reload(true)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+$size: 25px;
+
+.sw-new-version {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+
+  button {
+    padding: 0.5rem;
+    img {
+      width: $size;
+      height: $size;
+    }
+  }
+}
+</style>

src/hooks/useTimer.ts

@@ -1,4 +1,10 @@
-import { ref, computed, watch } from '@vue/composition-api'
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  onUnmounted
+} from '@vue/composition-api'
 import { StopwatchState } from '@/types/StopwatchState'
 import { notify } from '@/utils/notification'
 import { useInterval } from './useInterval'
@@ -84,6 +90,23 @@ export const useTimer = () => {
     isDev1Turn.value = true
   }
 
+  const handleSpacebar = (event: KeyboardEvent) => {
+    if (event.target !== document.body) {
+      return
+    }
+    if (event.charCode === 32) {
+      timeState.value === 'started' ? pause() : start()
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('keypress', handleSpacebar)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('keypress', handleSpacebar)
+  })
+
   return {
     interval,
     start,

src/registerServiceWorker.ts

@@ -3,14 +3,13 @@
 import { register } from 'register-service-worker'
 import { setNotificationInstance, notify } from './utils/notification'
 import i18n from '@/i18n'
+import { emit } from 'retrobus'
 
 if (process.env.NODE_ENV === 'production') {
   register(`${process.env.BASE_URL}service-worker.js`, {
     ready(sw) {
       sw.getNotifications().then((notifs) => {
-        notifs
+        notifs.forEach((notif) => notif.close())
-          // .filter((notif) => notif.tag === 'new-version')
-          .forEach((notif) => notif.close())
       })
       console.log('App is being served from cache by a service worker')
       setNotificationInstance((title, options?) =>
@@ -35,6 +34,7 @@ if (process.env.NODE_ENV === 'production') {
         body: i18n.t('notification.update.body').toString(),
         tag: 'new-version'
       })
+      emit('new-version')
     },
     offline() {
       console.log(

src/utils/spotify.ts

@@ -1,10 +1,4 @@
-const PLAYLIST_LINKS = [
+let PLAYLIST_LINKS: string[] | null = null
-  'spotify:playlist:0vvXsWCC9xrXsKd4FyS8kM',
-  'spotify:playlist:5G1gAuXjmJHgEoI7XzrXOP',
-  'spotify:playlist:5OJs7eATLrvZ2Ea9als3lK',
-  'spotify:playlist:5NKv3Ucc0kqe1Me7CEdWty',
-  'spotify:playlist:0jGkhFr4yxLlHnpRg2Njj4'
-]
 
 interface SpotifyTracks {
   items: Array<{ track: { name: string } }>
@@ -40,6 +34,15 @@ export const redirectToSpotifyConnect = () => {
 }
 
 export const playOnSpotify = async (token: string, deviceId: string) => {
+  if (process.env.VUE_APP_PLAYLIST_URL && !PLAYLIST_LINKS) {
+    const playlistResult = await fetch(process.env.VUE_APP_PLAYLIST_URL)
+    PLAYLIST_LINKS = (await playlistResult.json()).playlists
+  }
+
+  if (!PLAYLIST_LINKS) {
+    return
+  }
+
   const playlistId = PLAYLIST_LINKS[random(PLAYLIST_LINKS.length - 1)]
     .split(':')
     .pop()

yarn.lock

@@ -7418,6 +7418,11 @@ ret@~0.1.10:
   resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc"
   integrity sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==
 
+retrobus@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/retrobus/-/retrobus-1.0.1.tgz#69bd7192b363d0aa4e47350e209bc1b07439aab3"
+  integrity sha512-TLaSvnycUsro1+L62C+J+bmD3Y/BWnOZ4L/4qMBJvkfecFodo7QgtVWLXU8Zs4tAOoPMUcu62dSy2CsP4QyuGA==
+
 retry@^0.12.0:
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"