Merge c8f9ae3441 into 3502f7669a

Translations update from Hosted Weblate

src/App.vue

@@ -9,6 +9,7 @@
             </router-view>
         </div>
 
+        <ReloadPrompt />
         <FooterComponent />
     </div>
 </template>
@@ -16,6 +17,7 @@
 <script>
 import NavBar from "./components/NavBar.vue";
 import FooterComponent from "./components/FooterComponent.vue";
+import ReloadPrompt from "./components/ReloadPrompt.vue";
 
 const darkModePreference = window.matchMedia("(prefers-color-scheme: dark)");
 
@@ -23,6 +25,7 @@ export default {
     components: {
         NavBar,
         FooterComponent,
+        ReloadPrompt,
     },
     data() {
         return {

src/components/ReloadPrompt.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { useRegisterSW } from "virtual:pwa-register/vue";
+
+const { offlineReady, needRefresh, updateServiceWorker } = useRegisterSW();
+
+const close = async () => {
+    offlineReady.value = false;
+    needRefresh.value = false;
+};
+</script>
+
+<template>
+    <div v-if="offlineReady || needRefresh" class="pwa-toast" role="alert">
+        <div class="message">
+            <span v-if="offlineReady"> App ready to work offline </span>
+            <span v-else> New content available, click on reload button to update. </span>
+        </div>
+        <button v-if="needRefresh" @click="updateServiceWorker()">Reload</button>
+        <button @click="close">Close</button>
+    </div>
+</template>
+
+<style>
+.pwa-toast {
+    @apply fixed right-0 bottom-0 m-4 p-3 border border-gray-500 rounded shadow bg-white text-gray-700;
+}
+.pwa-toast .message {
+    @apply margin-bottom-2;
+}
+.pwa-toast button {
+    @apply border border-solid border-gray-500 rounded px-2 py-1;
+}
+</style>

src/locales/zh_Hans.json

@@ -132,7 +132,11 @@
         "customize": "自定义",
         "invalid_url": "无效的 URL！",
         "add": "添加",
-        "delete_group_confirm": "删除该组吗？"
+        "delete_group_confirm": "删除该组吗？",
+        "creator_replied": "创作者回复了",
+        "creator_liked": "创作者点赞了",
+        "playback_speed": "播放速度",
+        "invalid_input": "无效输入"
     },
     "video": {
         "sponsor_segments": "赞助商部分",

src/main.js

@@ -15,8 +15,6 @@ import "uno.css";
 
 const timeAgo = new TimeAgo("en-US");
 
-import("./registerServiceWorker");
-
 const mixin = {
     methods: {
         timeFormat: function (duration) {

src/registerServiceWorker.js

@@ -1,7 +0,0 @@
-/* eslint-disable no-console */
-
-import { registerSW } from "virtual:pwa-register";
-
-if (process.env.NODE_ENV === "production") {
-    registerSW();
-}

vite.config.js

@@ -19,7 +19,7 @@ export default defineConfig({
             targets: ["defaults", "not IE 11"],
         }),
         VitePWA({
-            registerType: "autoUpdate",
+            registerType: "prompt",
             workbox: {
                 globPatterns: [
                     "**/*.{css,html}",