Finalize updating Vue3 & related deps, remove dead code and format te…

…mplates
palavatv · Sep 23, 2023 · 0304ddc · 0304ddc
1 parent 4985bb0
commit 0304ddc
Show file tree

Hide file tree

Showing 15 changed files with 3,385 additions and 5,496 deletions.
diff --git a/package.json b/package.json
@@ -1,40 +1,39 @@
 {
   "name": "palava-web",
-  "version": "1.1.0",
-  "author": "palava e. V.",
-  "license": "MIT",
-  "description": "The 2020 web front-end of palava.tv",
+  "version": "2.0.0",
+  "description": "The 2023 web front-end of palava.tv",
   "keywords": [
     "palava",
     "webrtc",
     "video chat"
   ],
+  "license": "MIT",
+  "author": "palava e.V.",
   "scripts": {
-    "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "serve": "vue-cli-service serve",
     "test:e2e": "vue-cli-service test:e2e",
-    "lint": "vue-cli-service lint"
+    "test:unit": "vue-cli-service test:unit"
   },
   "dependencies": {
+    "@vueuse/head": "^1.1.23",
     "palava-client": "^2.2.1",
-    "register-service-worker": "^1.7.1",
-    "vue": "^3.2.45",
-    "vue-i18n": "^9.0.0",
-    "vue-inline-svg": "^3.1.0",
-    "vue-meta": "^3.0.0-alpha.2",
-    "vue-router": "^4.1.6",
+    "register-service-worker": "^1.7.2",
+    "vue": "^3.3.4",
+    "vue-i18n": "^9.4.1",
+    "vue-inline-svg": "^3.1.2",
+    "vue-router": "^4.2.5",
     "yyid": "2"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.16.3",
-    "@vue/cli-plugin-babel": "~4.5.15",
-    "@vue/cli-plugin-e2e-nightwatch": "~4.5.15",
-    "@vue/cli-plugin-eslint": "~4.5.15",
-    "@vue/cli-plugin-router": "~4.5.15",
-    "@vue/cli-plugin-unit-mocha": "~4.5.15",
-    "@vue/cli-plugin-vuex": "~4.5.15",
-    "@vue/cli-service": "~4.5.15",
+    "@vue/cli-plugin-babel": "~5.0.8",
+    "@vue/cli-plugin-e2e-nightwatch": "~5.0.8",
+    "@vue/cli-plugin-eslint": "~5.0.8",
+    "@vue/cli-plugin-router": "~5.0.8",
+    "@vue/cli-plugin-unit-mocha": "~5.0.8",
+    "@vue/cli-service": "~5.0.8",
     "@vue/eslint-config-airbnb": "^6.0.0",
     "@vue/test-utils": "^1.3.0",
     "babel-eslint": "^10.1.0",

diff --git a/public/index.html b/public/index.html
@@ -49,6 +49,5 @@
       <strong>We're sorry but palava.tv doesn't work without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
   </body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -2,19 +2,16 @@
   <router-view/>
 </template>
 
-<script>
-export default {
-  metaInfo() {
-    const lang = this.$root.$i18n.locale
-    return {
-      htmlAttrs: {
-        lang,
-      },
-      title: 'palava.tv',
-      titleTemplate: 'palava.tv | %s',
-    }
+<script setup>
+const lang = this.$root.$i18n.locale
+
+useHead({
+  htmlAttrs: {
+    lang,
   },
-}
+  title: 'palava.tv',
+  titleTemplate: 'palava.tv | %s',
+});
 </script>
 
 <style lang="scss">

diff --git a/src/components/InfoScreen.vue b/src/components/InfoScreen.vue
@@ -4,14 +4,12 @@
       <inline-svg
         :aria-label="$t('closeAlt')"
         :src="require('../assets/icons/cross.svg')"
-        />
+      />
     </button>
-
     <Navigation
       type="screen"
       @open-info-screen="(page) => $emit('open-info-screen', page)"
-      />
-
+    />
     <div class="info-content" v-html="infoPage.content" />
   </aside>
 </template>
@@ -38,13 +36,6 @@ export default {
       if (newPage) { this.$el.focus() }
     }
   },
-  methods: {
-    // confirmLeave($event) {
-    //   if (!window.confirm(this.$t("info.confirmLeave"))) {
-    //     $event.preventDefault()
-    //   }
-    // }
-  },
   computed: {
     infoPage() {
       return i18nStrings[this.$root.$i18n.locale].infoPages.filter((ip) => ip.id === this.page)[0] || {}

diff --git a/src/components/Logo.vue b/src/components/Logo.vue
@@ -1,21 +1,10 @@
 <template>
   <div class="logo">
-    <router-link :to="to">
+    <router-link to="/">
       <inline-svg
         :alt="$t('palavaLogoAlt')"
         :src="require('../assets/icons/palava.svg')"
-        />
+      />
     </router-link>
   </div>
 </template>
-
-<script>
-export default {
-  props: {
-    to: {
-      type: String,
-      default: "/",
-    }
-  }
-}
-</script>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
@@ -6,16 +6,16 @@
           <span
             @click="checkScreen(infoPage.id, $event)"
             @keypress.enter="checkScreen(infoPage.id, $event)"
-          >{{ infoPage.title }}</span>
+          >
+            {{ infoPage.title }}
+          </span>
         </router-link>
       </li>
     </ul>
-    <!-- <LanguageSwitcher /> -->
   </nav>
 </template>
 
 <script>
-// import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 import i18nStrings from '@/i18nStrings'
 
 export default {
@@ -25,9 +25,6 @@ export default {
       default: "page",
     },
   },
-  components: {
-    // LanguageSwitcher,
-  },
   methods: {
     checkScreen(infoPage, $event) {
       if (this.type === 'screen') {

diff --git a/src/components/NetworkInfo.vue b/src/components/NetworkInfo.vue
@@ -5,7 +5,7 @@
         :alt="$t('closeAlt')"
         :aria-label="$t('closeAlt')"
         :src="require('../assets/icons/cross.svg')"
-        />
+      />
     </button>
 
     <section>
@@ -16,7 +16,7 @@
             :alt="$t('moreInfoAlt')"
             :aria-label="$t('moreInfoAlt')"
             :src="require('../assets/icons/info-with-circle.svg')"
-            />
+          />
         </button>
       </h2>
     </section>
@@ -29,7 +29,7 @@
             :aria-label="$t('networkInfo.ipAlt')"
             :alt="$t('networkInfo.ipAlt')"
             :src="require('../assets/icons/dot-single.svg')"
-            />
+          />
           {{ ip }}
           <span v-if="allRelayIps.includes(ip)"> ({{ $t('networkInfo.ipIsRelay') }})</span>
         </li>
@@ -44,7 +44,7 @@
             :aria-label="$t('networkInfo.ipAlt')"
             :alt="$t('networkInfo.ipAlt')"
             :src="require('../assets/icons/dot-single.svg')"
-            />
+          />
           {{ ip }}
           <span v-if="allRelayIps.includes(ip)"> ({{ $t('networkInfo.ipIsRelay') }})</span>
         </li>

diff --git a/src/components/Party.vue b/src/components/Party.vue
@@ -82,34 +82,6 @@
         </button>
       </transition>
 
-      <!-- <transition name="fade-control">
-        <button
-          :title="$t('party.screenShareTitle')"
-          class="control control--screen-share"
-          v-if="controlsActive"
-          >
-          <inline-svg
-            :alt="$t('party.screenShareAlt')"
-            :aria-label="$t('party.screenShareAlt')"
-            :src="require('../assets/icons/tv.svg')"
-            />
-        </button>
-      </transition> -->
-
-      <!-- <transition name="fade-control">
-        <button
-          :title="$t('party.openTextChatTitle')"
-          class="control control--text-chat"
-          v-if="controlsActive"
-          >
-          <inline-svg
-            :src="require('../assets/icons/chat.svg')"
-            :alt="$t('party.textChatAlt')"
-            :aria-label="$t('party.textChatAlt')"
-            \>
-        </button>
-      </transition> -->
-
       <transition name="fade-control">
         <button
           :title="$t('switchLanguageTitle')"
@@ -297,6 +269,7 @@ export default {
       this.controlsActive = !this.controlsActive
       this.$refs.logo.blur()
     },
+    // TODO: Use vueuse here
     copyShareLink() {
       if (navigator.share) {
         navigator.share({ url: this.shareLink })
@@ -306,10 +279,12 @@ export default {
 
       this.$refs.copyLink.blur()
     },
+    // Maybe vueuse has some language handling as well?
     switchLanguage() {
       this.$root.$i18n.locale = this.$root.$i18n.locale === 'de' ? 'en' : 'de'
       this.$refs.switchLanguage.blur()
     },
+    // TODO: Use vueuse here
     toggleMicrophone() {
       this.microphoneMuted = !this.microphoneMuted
       if(this.microphoneMuted) {
@@ -318,6 +293,7 @@ export default {
         this.localPeer.enableAudio()
       }
     },
+    // TODO: Use vueuse here
     toggleCamera() {
       this.cameraOff = !this.cameraOff
       if(this.cameraOff) {
@@ -326,6 +302,7 @@ export default {
         this.localPeer.enableVideo()
       }
     },
+    // TODO: Use vueuse here
     onResize() {
       const partyWidth = window.innerWidth
       const partyHeight = window.innerHeight