From 8fe9069278c66af3fc145b8ba28c19eb1ee604d3 Mon Sep 17 00:00:00 2001
From: Olivier Savignac <sircharlo@gmail.com>
Date: Wed, 12 Jun 2024 17:05:23 -0400
Subject: [PATCH] chore: add OBS Status icon, i18n notifications

---
 .editorconfig                              |   1 +
 .eslintrc.cjs                              |   8 +-
 .vscode/settings.json                      |  14 +-
 package.json                               |   2 +-
 src-electron/electron-preload.ts           |   2 +-
 src/boot/axios.ts                          |   5 +-
 src/boot/i18n.ts                           |  11 -
 src/boot/obs.ts                            |  13 +-
 src/components/form-inputs/SelectInput.vue |   1 +
 src/components/form-inputs/TimeInput.vue   |  41 +-
 src/components/form-inputs/ToggleInput.vue |   2 +-
 src/components/media/DownloadStatus.vue    |   6 +-
 src/components/media/ObsStatus.vue         | 194 +++++++
 src/components/media/ScenePicker.vue       |   4 +-
 src/components/media/SongPicker.vue        |   2 +-
 src/defaults/settings.ts                   |  10 +-
 src/helpers/jw-media.ts                    | 586 +++++++++++----------
 src/helpers/notifications.ts               |  56 +-
 src/helpers/obs.ts                         | 114 ++--
 src/i18n/en-US/index.json                  |  12 +-
 src/i18n/fr-CA/index.json                  |   8 +-
 src/layouts/MainLayout.vue                 |  36 +-
 src/pages/CongregationSelectorPage.vue     |   2 +-
 src/pages/MediaCalendarPage.vue            |  96 ++--
 src/pages/MediaPlayerPage.vue              |   6 +-
 src/pages/SetupWizard.vue                  |   6 +
 src/router/routes.ts                       |   4 +-
 src/stores/obs-state.ts                    |   3 +-
 yarn.lock                                  |   8 +-
 29 files changed, 710 insertions(+), 543 deletions(-)
 create mode 100644 src/components/media/ObsStatus.vue

diff --git a/.editorconfig b/.editorconfig
index 9d08a1a8..7846ea1d 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -7,3 +7,4 @@ indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
+max_line_length = 80
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 06316117..d19e69dc 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -36,14 +36,12 @@ module.exports = {
 
     // https://github.com/prettier/eslint-config-prettier#installation
     // usage with Prettier, provided by 'eslint-config-prettier'.
+    'plugin:perfectionist/recommended-natural',
     'prettier',
-    "plugin:perfectionist/recommended-natural",
   ],
 
   plugins: [
     // required to apply rules which need type information
-    '@typescript-eslint',
-    'perfectionist',
 
     // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
     // required to lint *.vue files
@@ -52,6 +50,8 @@ module.exports = {
     // https://github.com/typescript-eslint/typescript-eslint/issues/389#issuecomment-509292674
     // Prettier has not been included as plugin to avoid performance impact
     // add it as an extension for your IDE
+    'perfectionist',
+    '@typescript-eslint',
   ],
 
   globals: {
@@ -85,6 +85,6 @@ module.exports = {
 
     // allow debugger during development only
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    "perfectionist/sort-interfaces": "error",
+    'perfectionist/sort-interfaces': 'error',
   },
 };
diff --git a/.vscode/settings.json b/.vscode/settings.json
index d8e4dee7..d2b83f48 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,6 +11,7 @@
     "icns",
     "iscoweek",
     "jwlplaylist",
+    "jwpub",
     "Jwpub",
     "klaw",
     "langwritten",
@@ -31,5 +32,16 @@
   ],
   "i18n-ally.localesPaths": ["src/i18n"],
   "i18n-ally.sourceLanguage": "en-US",
-  "i18n-ally.keystyle": "flat"
+  "i18n-ally.keystyle": "flat",
+
+  "prettier.useEditorConfig": false,
+  "prettier.useTabs": false,
+  "prettier.configPath": ".prettierrc",
+
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "notebook.formatOnSave.enabled": true,
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/package.json b/package.json
index f6353b87..fe2c9e9b 100644
--- a/package.json
+++ b/package.json
@@ -59,7 +59,7 @@
     "electron-builder": "^24.3.0",
     "electron-rebuild": "^3.2.9",
     "eslint": "^8.11.0",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-perfectionist": "^2.10.0",
     "eslint-plugin-vue": "^9.0.0",
     "node-polyfill-webpack-plugin": "^3.0.0",
diff --git a/src-electron/electron-preload.ts b/src-electron/electron-preload.ts
index d44e8e08..b1466336 100644
--- a/src-electron/electron-preload.ts
+++ b/src-electron/electron-preload.ts
@@ -135,7 +135,7 @@ const isWritable = (filePath: fs.PathLike) => {
     fs.closeSync(fs.openSync(filePath, 'r+'));
     fileAccess = true;
   } catch (err) {
-    console.log('can not open file:' + filePath, 'error:' + err);
+    console.error('can not open file:' + filePath, 'error:' + err);
   }
   return fileAccess;
 };
diff --git a/src/boot/axios.ts b/src/boot/axios.ts
index 38f33592..b13ad9a5 100644
--- a/src/boot/axios.ts
+++ b/src/boot/axios.ts
@@ -1,6 +1,5 @@
-import { boot } from 'quasar/wrappers';
-console.log('axios start');
 import axios, { AxiosRequestConfig } from 'axios';
+import { boot } from 'quasar/wrappers';
 export default boot(({ app }) => {
   app.config.globalProperties.$axios = axios;
 });
@@ -40,6 +39,4 @@ const getYeartext = async (lang: string, year?: number) => {
   return await get(urlWithParamsToString(url, params));
 };
 
-console.log('axios end');
-
 export { get, getLanguages, getYeartext, urlWithParamsToString };
diff --git a/src/boot/i18n.ts b/src/boot/i18n.ts
index 2a6970f8..1a1d9c52 100644
--- a/src/boot/i18n.ts
+++ b/src/boot/i18n.ts
@@ -1,22 +1,14 @@
-console.log('i18n start');
 import { boot } from 'quasar/wrappers';
 import messages from 'src/i18n';
 import { createI18n } from 'vue-i18n';
 
 export type MessageLanguages = keyof typeof messages;
-// Type-define 'en-US' as the master schema for the resource
 export type MessageSchema = (typeof messages)['en-US'];
 
-// See https://vue-i18n.intlify.dev/guide/advanced/typescript.html#global-resource-schema-type-definition
 /* eslint-disable @typescript-eslint/no-empty-interface */
 declare module 'vue-i18n' {
-  // define the locale messages schema
   export interface DefineLocaleMessage extends MessageSchema {}
-
-  // define the datetime format schema
   export interface DefineDateTimeFormat {}
-
-  // define the number format schema
   export interface DefineNumberFormat {}
 }
 /* eslint-enable @typescript-eslint/no-empty-interface */
@@ -30,10 +22,7 @@ export default boot(({ app }) => {
     locale: 'en-US',
     messages,
   });
-
-  // Set i18n instance on app
   app.use(i18n);
 });
-console.log('i18n end');
 
 export { i18n };
diff --git a/src/boot/obs.ts b/src/boot/obs.ts
index 69dd2f19..7984add1 100644
--- a/src/boot/obs.ts
+++ b/src/boot/obs.ts
@@ -1,14 +1,3 @@
-console.log('obs start');
 import OBSWebSocket from 'obs-websocket-js';
-import { QNotifyCreateOptions, QNotifyUpdateOptions } from 'quasar';
-import { Ref, ref } from 'vue';
 const obsWebSocket = new OBSWebSocket();
-const obsNotification: Ref<
-  | ((
-      opts: QNotifyCreateOptions | string,
-    ) => (props?: QNotifyUpdateOptions | undefined) => void)
-  | null
-> = ref(null);
-
-console.log('obs end');
-export { obsNotification, obsWebSocket };
+export { obsWebSocket };
diff --git a/src/components/form-inputs/SelectInput.vue b/src/components/form-inputs/SelectInput.vue
index 571b0ac2..180cfd0e 100644
--- a/src/components/form-inputs/SelectInput.vue
+++ b/src/components/form-inputs/SelectInput.vue
@@ -17,6 +17,7 @@
     map-options
     v-model="localValue"
     v-bind="{ label: label || undefined }"
+    spellcheck=false
   >
   </q-select>
 </template>
diff --git a/src/components/form-inputs/TimeInput.vue b/src/components/form-inputs/TimeInput.vue
index 4a47f23f..8bdba732 100644
--- a/src/components/form-inputs/TimeInput.vue
+++ b/src/components/form-inputs/TimeInput.vue
@@ -1,10 +1,33 @@
 <template>
-  <q-input :rules="getRules(rules)" class="q-pb-none" dense filled mask="time" readonly v-model="localValue"
-    v-bind="{ label: label || undefined }">
-    <q-popup-proxy breakpoint="1000" transition-hide="scale" transition-show="scale">
-      <q-time :options="getTimeOptions(options)" class="non-selectable" format24h v-model="localValue">
+  <q-input
+    :rules="getRules(rules)"
+    class="q-pb-none"
+    dense
+    filled
+    mask="time"
+    readonly
+    v-model="localValue"
+    v-bind="{ label: label || undefined }"
+  >
+    <q-popup-proxy
+      breakpoint="1000"
+      transition-hide="scale"
+      transition-show="scale"
+    >
+      <q-time
+        :options="getTimeOptions(options)"
+        class="non-selectable"
+        format24h
+        v-model="localValue"
+      >
         <div class="row items-center justify-end">
-          <q-btn @click="clearTime" color="negative" flat icon="mdi-close" v-close-popup />
+          <q-btn
+            @click="clearTime"
+            color="negative"
+            flat
+            icon="mdi-close"
+            v-close-popup
+          />
           <q-btn color="positive" flat icon="mdi-check" v-close-popup />
         </div>
       </q-time>
@@ -17,10 +40,10 @@ import { getRules, getTimeOptions } from 'src/helpers/settings';
 import { ref, watch } from 'vue';
 
 const props = defineProps<{
-  label?: string,
-  modelValue: string,
-  options: string[] | undefined,
-  rules?: string[] | undefined,
+  label?: string;
+  modelValue: string;
+  options: string[] | undefined;
+  rules?: string[] | undefined;
 }>();
 
 const emit = defineEmits(['update:modelValue']);
diff --git a/src/components/form-inputs/ToggleInput.vue b/src/components/form-inputs/ToggleInput.vue
index ea8a1387..5a18188c 100644
--- a/src/components/form-inputs/ToggleInput.vue
+++ b/src/components/form-inputs/ToggleInput.vue
@@ -4,7 +4,7 @@
 
 <script setup lang="ts">
 import { getActions } from 'src/helpers/settings';
-import { defineEmits, defineProps, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 // Define props and emits
 const props = defineProps<{
diff --git a/src/components/media/DownloadStatus.vue b/src/components/media/DownloadStatus.vue
index ebbdd203..0b6577a0 100644
--- a/src/components/media/DownloadStatus.vue
+++ b/src/components/media/DownloadStatus.vue
@@ -28,6 +28,7 @@
           dense
           separator
         >
+          <!-- <q-slide-transition> -->
           <q-item
             style="align-items: center"
             v-if="Object.values(downloadProgress).length === 0"
@@ -45,12 +46,13 @@
             v-for="statusObject in statusConfig"
           >
             <q-item-label
-              class="q-pt-md text-weight-bold text-uppercase"
+              class="q-pt-md q-pl-md text-weight-bold text-uppercase"
               overline
               v-if="hasStatus(downloadProgress, statusObject.status)"
             >
               {{ $t(statusObject.label) }}
             </q-item-label>
+            <!-- <q-slide-transition> -->
             <q-item
               :key="url"
               style="align-items: center"
@@ -79,7 +81,9 @@
                 />
               </q-item-section>
             </q-item>
+            <!-- </q-slide-transition> -->
           </template>
+          <!-- </q-slide-transition> -->
         </q-list>
       </div>
     </q-popup-proxy>
diff --git a/src/components/media/ObsStatus.vue b/src/components/media/ObsStatus.vue
new file mode 100644
index 00000000..0409e3c8
--- /dev/null
+++ b/src/components/media/ObsStatus.vue
@@ -0,0 +1,194 @@
+<template>
+  <!-- :loading="
+      Object.values(downloadProgress).filter((item) => item.loaded).length > 0
+    " -->
+  <!-- <q-btn
+    flat
+    icon="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg transform='matrix(0.77 0 0 0.77 12 12)' %3E%3Cpath style='stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;' transform=' translate(-16, -16)' d='M 16 3 C 8.82 3 3 8.82 3 16 C 3 23.18 8.82 29 16 29 C 23.18 29 29 23.18 29 16 C 29 8.82 23.18 3 16 3 z M 16 5 C 22.065 5 27 9.935 27 16 C 27 16.50788 26.953696 17.004343 26.886719 17.494141 C 26.520485 15.461275 25.274395 13.591986 23.345703 12.513672 C 22.376703 11.970672 21.336969 11.691672 20.292969 11.638672 C 19.860969 12.439672 19.2195 13.106594 18.4375 13.558594 C 17.6665 14.003594 16.772547 14.236313 15.810547 14.195312 C 15.431547 14.179312 15.048359 14.140687 14.693359 14.054688 C 12.637359 13.471687 11.129344 11.587609 11.152344 9.3496094 C 11.168648 7.7089655 12.014884 6.24578 13.277344 5.3554688 C 14.149701 5.1321017 15.059033 5 16 5 z M 11.707031 5.8730469 C 9.9593818 7.197907 8.8307222 9.3171916 8.8632812 11.662109 C 8.8772812 12.773109 9.1568125 13.814141 9.6328125 14.744141 C 10.541813 14.718141 11.442609 14.938625 12.224609 15.390625 C 12.995609 15.835625 13.643844 16.494656 14.089844 17.347656 C 14.264844 17.682656 14.414625 18.00575 14.515625 18.34375 C 15.060625 20.42675 14.182703 22.696734 12.220703 23.802734 C 11.169801 24.395897 9.974626 24.559981 8.8574219 24.347656 C 6.501292 22.328555 5 19.338626 5 16 C 5 11.457453 7.768964 7.5491323 11.707031 5.8730469 z M 21.886719 14.984375 C 22.677699 15.005146 23.474953 15.220719 24.205078 15.652344 C 25.487851 16.409673 26.310364 17.684901 26.556641 19.064453 C 25.225431 23.641945 21.000983 27 16 27 C 14.008698 27 12.144256 26.46055 10.53125 25.53125 C 12.146679 25.801922 13.865799 25.524862 15.369141 24.628906 C 16.324141 24.060906 17.084344 23.300828 17.652344 22.423828 C 17.175344 21.649828 16.917969 20.759469 16.917969 19.855469 C 16.917969 18.965469 17.163688 18.073719 17.679688 17.261719 C 17.881688 16.942719 18.071594 16.662109 18.308594 16.412109 C 19.265469 15.455859 20.568418 14.949756 21.886719 14.984375 z' stroke-linecap='round' /%3E%3C/g%3E%3C/svg%3E"
+    push
+    round
+    size="md"
+    v-if="currentSettings.obsEnable"
+  > -->
+  <q-btn
+    @click="obsConnectionState === 'disconnected' && obsConnect()"
+    flat
+    round
+    v-if="currentSettings.obsEnable"
+  >
+    <q-icon>
+      <q-tooltip v-if="obsMessage">{{ $t(obsMessage) }}</q-tooltip>
+      <svg
+        height="48"
+        viewBox="0 0 24 24"
+        width="48"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+      >
+        <rect height="48" opacity="0" stroke="none" width="48" />
+
+        <g transform="matrix(0.77 0 0 0.77 12 12)">
+          <path
+            d="M 16 3 C 8.82 3 3 8.82 3 16 C 3 23.18 8.82 29 16 29 C 23.18 29 29 23.18 29 16 C 29 8.82 23.18 3 16 3 z M 16 5 C 22.065 5 27 9.935 27 16 C 27 16.50788 26.953696 17.004343 26.886719 17.494141 C 26.520485 15.461275 25.274395 13.591986 23.345703 12.513672 C 22.376703 11.970672 21.336969 11.691672 20.292969 11.638672 C 19.860969 12.439672 19.2195 13.106594 18.4375 13.558594 C 17.6665 14.003594 16.772547 14.236313 15.810547 14.195312 C 15.431547 14.179312 15.048359 14.140687 14.693359 14.054688 C 12.637359 13.471687 11.129344 11.587609 11.152344 9.3496094 C 11.168648 7.7089655 12.014884 6.24578 13.277344 5.3554688 C 14.149701 5.1321017 15.059033 5 16 5 z M 11.707031 5.8730469 C 9.9593818 7.197907 8.8307222 9.3171916 8.8632812 11.662109 C 8.8772812 12.773109 9.1568125 13.814141 9.6328125 14.744141 C 10.541813 14.718141 11.442609 14.938625 12.224609 15.390625 C 12.995609 15.835625 13.643844 16.494656 14.089844 17.347656 C 14.264844 17.682656 14.414625 18.00575 14.515625 18.34375 C 15.060625 20.42675 14.182703 22.696734 12.220703 23.802734 C 11.169801 24.395897 9.974626 24.559981 8.8574219 24.347656 C 6.501292 22.328555 5 19.338626 5 16 C 5 11.457453 7.768964 7.5491323 11.707031 5.8730469 z M 21.886719 14.984375 C 22.677699 15.005146 23.474953 15.220719 24.205078 15.652344 C 25.487851 16.409673 26.310364 17.684901 26.556641 19.064453 C 25.225431 23.641945 21.000983 27 16 27 C 14.008698 27 12.144256 26.46055 10.53125 25.53125 C 12.146679 25.801922 13.865799 25.524862 15.369141 24.628906 C 16.324141 24.060906 17.084344 23.300828 17.652344 22.423828 C 17.175344 21.649828 16.917969 20.759469 16.917969 19.855469 C 16.917969 18.965469 17.163688 18.073719 17.679688 17.261719 C 17.881688 16.942719 18.071594 16.662109 18.308594 16.412109 C 19.265469 15.455859 20.568418 14.949756 21.886719 14.984375 z"
+            stroke-linecap="round"
+            style="
+              stroke: none;
+              stroke-width: 1;
+              stroke-dasharray: none;
+              stroke-linecap: butt;
+              stroke-dashoffset: 0;
+              stroke-linejoin: miter;
+              stroke-miterlimit: 4;
+              fill-rule: nonzero;
+              opacity: 1;
+            "
+            transform=" translate(-16, -16)"
+          />
+        </g>
+      </svg>
+      <!-- <template v-slot:loading>
+      <q-spinner-rings />
+    </template> -->
+      <!-- <q-popup-proxy> -->
+      <!-- <div
+        :class="'rounded-borders bg-grey-' + $q.dark.isActive ? '2' : '9'"
+        style="width: 400px; height: 300px"
+      >
+        <q-list
+          :class="
+            'q-px-md non-selectable bg-grey-' + $q.dark.isActive ? '2' : '9'
+          "
+          dense
+          separator
+        >
+          <q-item
+            style="align-items: center"
+            v-if="Object.values(downloadProgress).length === 0"
+          >
+            <q-item-section class="q-pt-md">
+              {{ $t('noDownloadsInProgress') }}
+            </q-item-section>
+            <q-space />
+            <q-item-section avatar class="q-pr-none" style="align-items: end">
+              <q-icon color="positive" name="mdi-check-circle" />
+            </q-item-section>
+          </q-item>
+          <template
+            :key="statusObject.status"
+            v-for="statusObject in statusConfig"
+          >
+            <q-item-label
+              class="q-pt-md q-pl-md text-weight-bold text-uppercase"
+              overline
+              v-if="hasStatus(downloadProgress, statusObject.status)"
+            >
+              {{ $t(statusObject.label) }}
+            </q-item-label>
+            <q-item
+              :key="url"
+              style="align-items: center"
+              v-for="(item, url) in filteredDownloads(
+                downloadProgress,
+                statusObject.status,
+              )"
+            >
+              <q-item-label caption lines="1">
+                {{ basename(url as string) }}
+              </q-item-label>
+              <q-space />
+              <q-item-section avatar class="q-pr-none" style="align-items: end">
+                <q-icon
+                  :color="statusColor(statusObject.status)"
+                  :name="statusObject.icon"
+                  v-if="statusObject.icon"
+                />
+                <q-circular-progress
+                  :thickness="0.3"
+                  :value="progressValue(item)"
+                  color="primary"
+                  size="18px"
+                  style="margin-right: 3px"
+                  v-else-if="showProgress(item)"
+                />
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-list>
+      </div> -->
+      <!-- </q-popup-proxy> -->
+    </q-icon>
+    <q-badge
+      :color="
+        obsConnectionState === 'connected'
+          ? 'positive'
+          : obsConnectionState === 'disconnected'
+          ? 'negative'
+          : 'warning'
+      "
+      floating
+      rounded
+      style="margin-top: 1.5em"
+    />
+  </q-btn>
+</template>
+
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+// import { electronApi } from 'src/helpers/electron-api';
+// import { DownloadProgressItems } from 'src/types/media';
+
+import { useCurrentStateStore } from '../../stores/current-state';
+import { useObsStateStore } from '../../stores/obs-state';
+
+// Initialize store and destructure reactive properties
+const currentState = useCurrentStateStore();
+const { currentSettings } = storeToRefs(currentState);
+
+const obsState = useObsStateStore();
+const { obsConnectionState, obsMessage } = storeToRefs(obsState);
+
+import { obsConnect } from 'src/helpers/obs';
+
+// Setup component
+// const { path } = electronApi;
+// const basename = path.basename;
+
+// Method to filter downloads by status
+// const filteredDownloads = (
+//   obj: DownloadProgressItems,
+//   status: 'complete' | 'error' | 'loaded',
+// ) =>
+//   Object.fromEntries(
+//     Object.entries(obj)
+//       // eslint-disable-next-line @typescript-eslint/no-unused-vars
+//       .filter(([_, item]) => item[status])
+//       .sort(([keyA], [keyB]) =>
+//         path.basename(keyA).localeCompare(path.basename(keyB)),
+//       ),
+//   ) as DownloadProgressItems;
+
+// Method to check if downloads have a specific status
+// const hasStatus = (
+//   obj: DownloadProgressItems,
+//   status: 'complete' | 'error' | 'loaded',
+// ) => Object.values(obj).some((item) => item[status]);
+
+// Method to calculate progress value
+// const progressValue = (item: { loaded?: number; total?: number }) =>
+//   item.loaded && item.total ? (item.loaded / item.total) * 100 : 0;
+
+// // Method to check if progress is available
+// const showProgress = (item: { loaded?: number; total?: number }) =>
+//   item.loaded && item.total;
+
+// // Method to determine status color
+// const statusColor = (status: string) =>
+//   status === 'complete' ? 'positive' : 'negative';
+
+// // Status configuration
+// const statusConfig = [
+//   { icon: '', label: 'inProgress', status: 'loaded' },
+//   { icon: 'mdi-alert-circle', label: 'errors', status: 'error' },
+//   { icon: 'mdi-check-circle', label: 'complete', status: 'complete' },
+// ] as { icon: string; label: string; status: 'complete' | 'error' | 'loaded' }[];
+</script>
diff --git a/src/components/media/ScenePicker.vue b/src/components/media/ScenePicker.vue
index 9fb9c9f9..dec35b1d 100644
--- a/src/components/media/ScenePicker.vue
+++ b/src/components/media/ScenePicker.vue
@@ -1,5 +1,5 @@
 <template>
-  <template v-if="obsConnected && nonMediaScenes.length > 1">
+  <template v-if="obsConnectionState && nonMediaScenes.length > 1">
     <q-btn flat icon="mdi-lectern" size="sm">
       <!-- :flat="!disabled"
     :outline="disabled"
@@ -57,7 +57,7 @@ import { ref } from 'vue';
 import { useObsStateStore } from '../../stores/obs-state';
 
 const obsState = useObsStateStore();
-const { currentSceneUuid, mediaScene, nonMediaScenes, obsConnected } =
+const { currentSceneUuid, mediaScene, nonMediaScenes, obsConnectionState } =
   storeToRefs(obsState);
 
 const menuActive = ref(false);
diff --git a/src/components/media/SongPicker.vue b/src/components/media/SongPicker.vue
index 3d693a48..f4e9a122 100644
--- a/src/components/media/SongPicker.vue
+++ b/src/components/media/SongPicker.vue
@@ -42,7 +42,7 @@ import {
   processMissingMediaInfo,
 } from 'src/helpers/jw-media';
 import { MultimediaItem } from 'src/types/sqlite';
-import { defineEmits, defineProps, ref, watch } from 'vue';
+import { ref, watch } from 'vue';
 
 import { useCurrentStateStore } from '../../stores/current-state';
 import { useJwStore } from '../../stores/jw';
diff --git a/src/defaults/settings.ts b/src/defaults/settings.ts
index eb74c3fc..fb186f32 100644
--- a/src/defaults/settings.ts
+++ b/src/defaults/settings.ts
@@ -383,19 +383,19 @@ export const defaultSettings: SettingsValues = {
   maxRes: '720p',
   // musicFadeOutType: 'smart',
   musicVolume: 100,
-  mwDay: '0',
+  mwDay: '',
   // outputFolderDateFormat: 'YYYY-MM-DD',
   // presentShortcut: 'Alt+D',
   // shuffleShortcut: 'Alt+K',
-  mwStartTime: '19:30',
+  mwStartTime: '',
   obsCameraScene: '',
   obsEnable: false,
   obsImageScene: '',
   obsMediaScene: '',
   obsPassword: '',
-  obsPort: '4455',
+  obsPort: '',
   preferredOutput: '',
   // specialCong: false,
-  weDay: '0',
-  weStartTime: '10:00',
+  weDay: '',
+  weStartTime: '',
 };
diff --git a/src/helpers/jw-media.ts b/src/helpers/jw-media.ts
index 568e1c7c..a6c9b72e 100644
--- a/src/helpers/jw-media.ts
+++ b/src/helpers/jw-media.ts
@@ -1,6 +1,16 @@
+import axios from 'axios';
+import { Buffer } from 'buffer';
 import { storeToRefs } from 'pinia';
 import { LocalStorage, date } from 'quasar';
+import sanitize from 'sanitize-filename';
+import { get, urlWithParamsToString } from 'src/boot/axios';
+import mepslangs from 'src/defaults/mepslangs';
 import { electronApi } from 'src/helpers/electron-api';
+import {
+  DownloadedFile,
+  DynamicMediaObject,
+  FileDownloader,
+} from 'src/types/media';
 import {
   MediaImages,
   MediaLink,
@@ -9,37 +19,15 @@ import {
 } from 'src/types/publications';
 import {
   DatedTextItem,
-  // DocumentItem,
   MultimediaExtractItem,
   MultimediaItem,
   MultimediaItemsFetcher,
-  // PublicationIssuePropertyItem,
   PublicationItem,
-  // PublicationItem,
   TableItem,
   VideoMarker,
 } from 'src/types/sqlite';
 
 import { useCurrentStateStore } from '../stores/current-state';
-import {
-  getDurationFromMediaPath,
-  getFileUrl,
-  getPublicationDirectory,
-  getThumbnailUrl,
-} from './fs';
-console.log(123);
-import axios from 'axios';
-import { Buffer } from 'buffer';
-import sanitize from 'sanitize-filename';
-import { get, urlWithParamsToString } from 'src/boot/axios';
-import mepslangs from 'src/defaults/mepslangs';
-import { createTemporaryNotification } from 'src/helpers/notifications';
-import {
-  DownloadedFile,
-  DynamicMediaObject,
-  FileDownloader,
-} from 'src/types/media';
-
 import { MAX_SONGS } from '../stores/jw';
 import {
   dateFromString,
@@ -47,6 +35,12 @@ import {
   isCoWeek,
   isMwMeetingDay,
 } from './date';
+import {
+  getDurationFromMediaPath,
+  getFileUrl,
+  getPublicationDirectory,
+  getThumbnailUrl,
+} from './fs';
 import {
   decompressJwpub,
   findDb,
@@ -125,12 +119,6 @@ FileDownloader) => {
     complete: true,
   };
   if (!downloadedData) {
-    // createTemporaryNotification({
-    //   message: 'Error downloading file',
-    //   caption: filename,
-    //   type: 'negative',
-    //   icon: 'mdi-cloud-off',
-    // });
     return {
       error: true,
       path: destinationPath,
@@ -144,31 +132,48 @@ FileDownloader) => {
 };
 const fetchMedia = async () => {
   const { lookupPeriod } = storeToRefs(useCurrentStateStore());
+  const fetchErrors = {} as Record<string, boolean>;
   for (const day of lookupPeriod.value.filter((day) => day.meeting)) {
     const dayDate = day.date;
     day.loading = true;
+    let fetchResult = null;
     if (day.meeting === 'we') {
-      day.dynamicMedia = await getWeMedia(dayDate);
+      fetchResult = await getWeMedia(dayDate);
+      // day.dynamicMedia = weMedia.media;
+      //formatDate
+      // if (weMedia.error) fetchErrors[date.formatDate(dayDate, 'YYYYMMDD')] = weMedia.error;
     } else if (day.meeting === 'mw') {
-      day.dynamicMedia = await getMwMedia(dayDate);
+      fetchResult = await getMwMedia(dayDate);
+      // day.dynamicMedia = mwMedia.media;
+      // if (mwMedia.error) fetchErrors[date.formatDate(dayDate, 'YYYYMMDD')] = mwMedia.error;
+    }
+    if (fetchResult) {
+      day.dynamicMedia = fetchResult.media;
+      if (fetchResult.error)
+        fetchErrors[date.formatDate(dayDate, 'YYYY/MM/DD')] = fetchResult.error;
     }
     day.loading = false;
   }
+  return fetchErrors;
 };
 
 const getDbFromJWPUB = async (publication: PublicationFetcher) => {
-  const jwpub = await downloadJwpub(publication);
-  if (jwpub.error) console.error('JWPUB download error: ' + publication);
-  const publicationDirectory = getPublicationDirectory(publication);
-  if (jwpub.new || !findDb(publicationDirectory)) {
-    await decompressJwpub(jwpub.path, publicationDirectory);
-  }
-  const dbFile = findDb(publicationDirectory);
-  if (!dbFile) {
-    console.error('No db file found', publicationDirectory);
+  try {
+    const jwpub = await downloadJwpub(publication);
+    if (jwpub.error) throw new Error('JWPUB download error: ' + publication);
+    const publicationDirectory = getPublicationDirectory(publication);
+    if (jwpub.new || !findDb(publicationDirectory)) {
+      await decompressJwpub(jwpub.path, publicationDirectory);
+    }
+    const dbFile = findDb(publicationDirectory);
+    if (!dbFile) {
+      throw new Error('No db file found: ' + publicationDirectory);
+    } else {
+      return dbFile;
+    }
+  } catch (error) {
+    console.error(error);
     return null;
-  } else {
-    return dbFile;
   }
 };
 
@@ -201,10 +206,41 @@ function addFullFilePathToMultimediaItem(
 }
 
 const getMultimediaMepsLangs = (source: MultimediaItemsFetcher) => {
-  const multimediaMepsLangs = executeQuery(
-    source.db,
-    'SELECT KeySymbol, Track, IssueTagNumber, MepsLanguageIndex from ExtractMultimedia ORDER by KeySymbol, IssueTagNumber, Track',
-  ) as MultimediaItem[];
+  const multimediaMepsLangs = [] as MultimediaItem[];
+  for (const table of [
+    'Multimedia',
+    'DocumentMultimedia',
+    'ExtractMultimedia',
+  ]) {
+    // exists
+    const tableExists =
+      (
+        executeQuery(
+          source.db,
+          `SELECT * FROM sqlite_master WHERE type='table' AND name='${table}'`,
+        ) as TableItem[]
+      ).map((item) => item.name).length > 0;
+    if (!tableExists) continue;
+    const columnQueryResult = executeQuery(
+      source.db,
+      `PRAGMA table_info(${table})`,
+    ) as TableItem[];
+
+    const columnMLIExists = columnQueryResult.some(
+      (column) => column.name === 'MepsLanguageIndex',
+    );
+    const columnKSExists = columnQueryResult.some(
+      (column) => column.name === 'KeySymbol',
+    );
+
+    if (columnKSExists && columnMLIExists)
+      multimediaMepsLangs.push(
+        ...(executeQuery(
+          source.db,
+          `SELECT DISTINCT KeySymbol, Track, IssueTagNumber, MepsLanguageIndex from ${table} ORDER by KeySymbol, IssueTagNumber, Track`,
+        ) as MultimediaItem[]),
+      );
+  }
   return multimediaMepsLangs;
 };
 
@@ -303,15 +339,16 @@ const getDocumentMultimediaItems = (source: MultimediaItemsFetcher) => {
 };
 
 const getDocumentExtractItems = async (db: string, docId: number) => {
-  const currentState = useCurrentStateStore();
-  const { getSettingValue } = currentState;
-  const extracts = executeQuery(
-    // ${currentSongbook.value.pub === 'sjjm'
-    //   ? "AND NOT UniqueEnglishSymbol = 'sjj' "
-    //   : ''
-    // }
-    db,
-    `SELECT DocumentExtract.BeginParagraphOrdinal,DocumentExtract.EndParagraphOrdinal,DocumentExtract.DocumentId,
+  try {
+    const currentState = useCurrentStateStore();
+    const { getSettingValue } = currentState;
+    const extracts = executeQuery(
+      // ${currentSongbook.value.pub === 'sjjm'
+      //   ? "AND NOT UniqueEnglishSymbol = 'sjj' "
+      //   : ''
+      // }
+      db,
+      `SELECT DocumentExtract.BeginParagraphOrdinal,DocumentExtract.EndParagraphOrdinal,DocumentExtract.DocumentId,
       Extract.RefMepsDocumentId,Extract.RefPublicationId,Extract.RefMepsDocumentId,UniqueEnglishSymbol,IssueTagNumber,
       Extract.RefBeginParagraphOrdinal,Extract.RefEndParagraphOrdinal, Extract.Link
     FROM DocumentExtract
@@ -327,92 +364,125 @@ const getDocumentExtractItems = async (db: string, docId: number) => {
         : ''
     }
       ORDER BY DocumentExtract.BeginParagraphOrdinal`,
-  ) as MultimediaExtractItem[];
-
-  // AND NOT RefPublication.PublicationCategorySymbol = 'web'
-  // TODO: add toggle to enable/disable web publication multimedia
-  // Right now, enabled
-
-  const allExtractItems = [];
-  for (const extract of extracts) {
-    extract.Lang = getSettingValue('lang') as string;
-    if (extract.Link) {
-      try {
-        const matches = extract.Link.match(/\/(.*)\//);
-        if (matches && matches.length > 0) {
-          extract.Lang = (matches.pop() as string).split(':')[0];
+    ) as MultimediaExtractItem[];
+
+    // AND NOT RefPublication.PublicationCategorySymbol = 'web'
+    // TODO: add toggle to enable/disable web publication multimedia
+    // Right now, enabled
+
+    const allExtractItems = [];
+    for (const extract of extracts) {
+      extract.Lang = getSettingValue('lang') as string;
+      if (extract.Link) {
+        try {
+          const matches = extract.Link.match(/\/(.*)\//);
+          if (matches && matches.length > 0) {
+            extract.Lang = (matches.pop() as string).split(':')[0];
+          }
+        } catch (e: unknown) {
+          console.error(e);
         }
-      } catch (e: unknown) {
-        console.error(e);
       }
-    }
 
-    const symbol = /[^a-zA-Z0-9]/.test(extract.UniqueEnglishSymbol)
-      ? extract.UniqueEnglishSymbol
-      : extract.UniqueEnglishSymbol.replace(/\d/g, '');
+      const symbol = /[^a-zA-Z0-9]/.test(extract.UniqueEnglishSymbol)
+        ? extract.UniqueEnglishSymbol
+        : extract.UniqueEnglishSymbol.replace(/\d/g, '');
 
-    if (symbol === 'snnw') return []; // That's the "old new songs" songbook; we don't need images from that
-    let extractLang = extract.Lang ?? (getSettingValue('lang') as string);
-    let extractDb = await getDbFromJWPUB({
-      issue: extract.IssueTagNumber,
-      langwritten: extractLang,
-      pub: symbol,
-    });
-    const langFallback = getSettingValue('langFallback') as string;
-    if (!extractDb && langFallback) {
-      extractDb = await getDbFromJWPUB({
+      if (symbol === 'snnw') return []; // That's the "old new songs" songbook; we don't need images from that
+      let extractLang = extract.Lang ?? (getSettingValue('lang') as string);
+      let extractDb = await getDbFromJWPUB({
         issue: extract.IssueTagNumber,
-        langwritten: langFallback,
+        langwritten: extractLang,
         pub: symbol,
       });
-      extractLang = langFallback;
-    }
-
-    if (!extractDb) return [];
-
-    const extractItems = getDocumentMultimediaItems({
-      db: extractDb,
-      lang: extractLang,
-      mepsId: extract.RefMepsDocumentId,
-      ...(extract.RefBeginParagraphOrdinal
-        ? { BeginParagraphOrdinal: extract.RefBeginParagraphOrdinal }
-        : {}),
-      ...(extract.RefEndParagraphOrdinal
-        ? { EndParagraphOrdinal: extract.RefEndParagraphOrdinal }
-        : {}),
-    })
-      .map((extractItem) => {
-        return {
-          ...extractItem,
-          BeginParagraphOrdinal: extract.BeginParagraphOrdinal,
-          EndParagraphOrdinal: extract.EndParagraphOrdinal,
-        };
-      })
-      .map((extractItem) =>
-        addFullFilePathToMultimediaItem(extractItem, {
+      const langFallback = getSettingValue('langFallback') as string;
+      if (!extractDb && langFallback) {
+        extractDb = await getDbFromJWPUB({
           issue: extract.IssueTagNumber,
-          langwritten: extractLang,
+          langwritten: langFallback,
           pub: symbol,
-        }),
-      );
-    allExtractItems.push(...extractItems);
+        });
+        extractLang = langFallback;
+      }
+
+      if (!extractDb) return [];
+
+      const extractItems = getDocumentMultimediaItems({
+        db: extractDb,
+        lang: extractLang,
+        mepsId: extract.RefMepsDocumentId,
+        ...(extract.RefBeginParagraphOrdinal
+          ? { BeginParagraphOrdinal: extract.RefBeginParagraphOrdinal }
+          : {}),
+        ...(extract.RefEndParagraphOrdinal
+          ? { EndParagraphOrdinal: extract.RefEndParagraphOrdinal }
+          : {}),
+      })
+        .map((extractItem) => {
+          return {
+            ...extractItem,
+            BeginParagraphOrdinal: extract.BeginParagraphOrdinal,
+            EndParagraphOrdinal: extract.EndParagraphOrdinal,
+          };
+        })
+        .map((extractItem) =>
+          addFullFilePathToMultimediaItem(extractItem, {
+            issue: extract.IssueTagNumber,
+            langwritten: extractLang,
+            pub: symbol,
+          }),
+        );
+      allExtractItems.push(...extractItems);
+    }
+    return allExtractItems;
+  } catch (e: unknown) {
+    console.error(e);
+    return [];
   }
-  return allExtractItems;
 };
 
-const getWtIssue = async (monday: Date, weeksInPast: number) => {
-  const currentState = useCurrentStateStore();
-  const { getSettingValue } = currentState;
-  const issue = date.subtractFromDate(monday, {
-    days: weeksInPast * 7,
-  });
-  const issueString = date.formatDate(issue, 'YYYYMM') + '00';
-  if (!(getSettingValue('lang') as string)) {
-    console.error('No language selected');
+const getWtIssue = async (
+  monday: Date,
+  weeksInPast: number,
+  langwritten: string,
+) => {
+  try {
+    const issue = date.subtractFromDate(monday, {
+      days: weeksInPast * 7,
+    });
+    const issueString = date.formatDate(issue, 'YYYYMM') + '00';
+    if (!langwritten) throw new Error('No language selected');
+    const publication = {
+      issue: issueString,
+      langwritten,
+      pub: 'w',
+    };
+    const db = await getDbFromJWPUB(publication);
+    if (!db) throw new Error('No db file found: ' + issueString);
+    const datedTexts = executeQuery(
+      db,
+      'SELECT * FROM DatedText',
+    ) as DatedTextItem[];
+    const weekNr = datedTexts.findIndex((weekItem) => {
+      const mondayAsNumber = parseInt(date.formatDate(monday, 'YYYYMMDD'));
+      return weekItem.FirstDateOffset === mondayAsNumber;
+    });
+    if (weekNr === -1) {
+      throw new Error('No week found: ' + issueString);
+    }
+    const docId = (
+      executeQuery(
+        db,
+        `SELECT Document.DocumentId FROM Document WHERE Document.Class=40 LIMIT 1 OFFSET ${weekNr}`,
+      ) as { DocumentId: number }[]
+    )[0]?.DocumentId;
+    return { db, docId, issueString, publication, weekNr };
+  } catch (e: unknown) {
+    console.error(e);
     return {
       db: '',
       docId: -1,
-      issueString,
+      issueString: '',
       publication: {
         langwritten: '',
         pub: '',
@@ -420,33 +490,6 @@ const getWtIssue = async (monday: Date, weeksInPast: number) => {
       weekNr: -1,
     };
   }
-  const publication = {
-    issue: issueString,
-    langwritten: getSettingValue('lang') as string,
-    pub: 'w',
-  };
-  const db = await getDbFromJWPUB(publication);
-
-  if (!db) return { db: '', docId: -1, issueString, publication, weekNr: -1 };
-  const datedTexts = executeQuery(
-    db,
-    'SELECT * FROM DatedText',
-  ) as DatedTextItem[];
-  const weekNr = datedTexts.findIndex((weekItem) => {
-    const mondayAsNumber = parseInt(date.formatDate(monday, 'YYYYMMDD'));
-    return weekItem.FirstDateOffset === mondayAsNumber;
-  });
-  if (weekNr === -1) {
-    console.warn('No week found');
-    return { db: '', docId: -1, issueString, publication, weekNr };
-  }
-  const docId = (
-    executeQuery(
-      db,
-      `SELECT Document.DocumentId FROM Document WHERE Document.Class=40 LIMIT 1 OFFSET ${weekNr}`,
-    ) as { DocumentId: number }[]
-  )[0]?.DocumentId;
-  return { db, docId, issueString, publication, weekNr };
 };
 
 const dynamicMediaMapper = async (
@@ -531,38 +574,28 @@ const getWeMedia = async (lookupDate: Date) => {
   lookupDate = dateFromString(lookupDate.toISOString());
   try {
     const monday = getSpecificWeekday(lookupDate, 0);
-    let { db, docId, issueString, publication, weekNr } = await getWtIssue(
+
+    const getIssue = async (monday: Date, lang: string) => {
+      let result = await getWtIssue(monday, 8, lang);
+      if (result.db?.length === 0) {
+        result = await getWtIssue(monday, 10, lang);
+      }
+      return result;
+    };
+
+    let { db, docId, issueString, publication, weekNr } = await getIssue(
       monday,
-      8,
+      getSettingValue('lang') as string,
     );
-    if (db?.length === 0)
-      ({ db, docId, issueString, publication, weekNr } = await getWtIssue(
+    if (db?.length === 0) {
+      ({ db, docId, issueString, publication, weekNr } = await getIssue(
         monday,
-        10,
+        getSettingValue('langFallback') as string,
       ));
-
+    }
     if (!db || docId < 0) {
-      createTemporaryNotification({
-        caption: 'weMeeting',
-        group: 'error.downloadMedia.weMeeting',
-        message: 'error.downloadMedia',
-        type: 'negative',
-      });
-      console.error('No suitable db or docid found');
-      // return [];
-      throw new Error('No db found');
+      throw new Error('error.downloadMedia.weMeeting');
     }
-    // const magazine = executeQuery(
-    //   db,
-    //   'SELECT Title FROM PublicationIssueProperty LIMIT 1'
-    // )[0] as PublicationIssuePropertyItem;
-    // const article = executeQuery(
-    //   db,
-    //   `SELECT Title FROM Document WHERE DocumentId = ${docId}`
-    // )[0] as DocumentItem;
-    // const displayTitle = `${magazine.Title} - ${article.Title}`;
-    // console.log('displayTitle', displayTitle);
-
     const videos = executeQuery(
       db,
       `SELECT DocumentMultimedia.MultimediaId, DocumentMultimedia.DocumentId, MepsDocumentId, CategoryType, KeySymbol, Track, IssueTagNumber, MimeType, BeginParagraphOrdinal, TargetParagraphNumberLabel
@@ -674,13 +707,8 @@ const getWeMedia = async (lookupDate: Date) => {
         .sort((a, b) => a.BeginParagraphOrdinal - b.BeginParagraphOrdinal)
         .map((item) => {
           const match = item.Link.match(/\/(.*)\//);
-          let langOverride = '';
-          if (match) {
-            langOverride = match.pop()?.split(':')[0] ?? '';
-          }
-          if (langOverride === (getSettingValue('lang') as string))
-            langOverride = '';
-          return langOverride;
+          const langOverride = match ? match[1].split(':')[0] : '';
+          return langOverride === getSettingValue('lang') ? '' : langOverride;
         });
     } catch (e: unknown) {
       console.error(e);
@@ -707,12 +735,12 @@ const getWeMedia = async (lookupDate: Date) => {
           item.Track === media.Track &&
           item.IssueTagNumber === media.IssueTagNumber,
       );
-      if (multimediaMepsLangItem?.MepsLanguageIndex) {
+      if (multimediaMepsLangItem?.MepsLanguageIndex !== undefined) {
         const mepsLang = mepslangs[multimediaMepsLangItem.MepsLanguageIndex];
         if (mepsLang) media.AlternativeLanguage = mepsLang;
       }
       const videoMarkers = getMediaVideoMarkers(
-        { db, docId },
+        { db, docId } as MultimediaItemsFetcher,
         media.MultimediaId,
       );
       if (videoMarkers) media.VideoMarkers = videoMarkers;
@@ -737,7 +765,10 @@ const getWeMedia = async (lookupDate: Date) => {
     ] = dynamicMediaForDay;
     LocalStorage.set('dynamicMedia', dynamicMedia);
 
-    return dynamicMediaForDay;
+    return {
+      error: false,
+      media: dynamicMediaForDay,
+    };
   } catch (e) {
     console.error('getWeMedia', e);
     const dynamicMedia: Record<
@@ -748,7 +779,10 @@ const getWeMedia = async (lookupDate: Date) => {
       dynamicMedia[currentCongregation.value]?.[
         date.formatDate(lookupDate, 'YYYYMMDD')
       ] ?? [];
-    return returnVal;
+    return {
+      error: true,
+      media: returnVal,
+    };
   }
 };
 
@@ -768,66 +802,46 @@ const getMwMedia = async (lookupDate: Date) => {
   try {
     // if not monday, get the previous monday
     const monday = getSpecificWeekday(lookupDate, 0);
-
     const issue = date.subtractFromDate(monday, {
       months: (monday.getMonth() + 1) % 2 === 0 ? 1 : 0,
     });
     const issueString = date.formatDate(issue, 'YYYYMM') + '00';
-    if (!(getSettingValue('lang') as string))
-      throw new Error('No language selected');
-    const publication = {
-      issue: issueString,
-      langwritten: getSettingValue('lang') as string,
-      pub: 'mwb',
+    let publication = {} as PublicationFetcher;
+    const getMwbIssue = async (langwritten: string) => {
+      if (!langwritten) return '';
+      publication = {
+        issue: issueString,
+        langwritten,
+        pub: 'mwb',
+      };
+      return await getDbFromJWPUB(publication);
     };
-    const db = await getDbFromJWPUB(publication);
+
+    let db = await getMwbIssue(getSettingValue('lang') as string);
+    if (!db) {
+      db = await getMwbIssue(getSettingValue('langFallback') as string);
+    }
     if (!db) {
-      createTemporaryNotification({
-        caption: 'mwMeeting',
-        group: 'error.downloadMedia.mwMeeting',
-        message: 'error.downloadMedia',
-        type: 'negative',
-      });
       throw new Error('No db found');
     }
-    const docId = (
-      executeQuery(
-        db,
-        `SELECT DocumentId FROM DatedText WHERE FirstDateOffset = ${date.formatDate(
-          monday,
-          'YYYYMMDD',
-        )}`,
-      ) as { DocumentId: number }[]
-    )[0]?.DocumentId;
-
-    if (!docId)
+    const docId =
+      (
+        executeQuery(
+          db,
+          `SELECT DocumentId FROM DatedText WHERE FirstDateOffset = ${date.formatDate(
+            monday,
+            'YYYYMMDD',
+          )}`,
+        ) as { DocumentId: number }[]
+      )[0]?.DocumentId ?? -1;
+
+    if (docId < 0)
       throw new Error('No document id found for ' + monday + ' ' + issueString);
 
-    // const treasures = executeQuery(
-    //   db,
-    //   'SELECT FeatureTitle FROM Document WHERE Class = 21'
-    // )[0] as DocumentItem;
-    // const apply = executeQuery(
-    //   db,
-    //   'SELECT FeatureTitle FROM Document WHERE Class = 94'
-    // )[0] as DocumentItem;
-    // const living = executeQuery(
-    //   db,
-    //   'SELECT FeatureTitle FROM Document WHERE Class = 10 ORDER BY FeatureTitle'
-    // ) as DocumentItem[];
-    // let livingTitle = living[0]?.FeatureTitle;
-    // if (living.length > 1) {
-    //   livingTitle = living[Math.floor(living.length / 2)]?.FeatureTitle;
-    // }
-
-    // look into maybe extracting titles from something like this: https://wol.jw.org/wol/d/r1/lp-e/202023001
-
-    // if (treasures?.FeatureTitle && apply?.FeatureTitle && livingTitle) {
-    // }
-    const mms = await getDocumentMultimediaItems({ db, docId }).map(
+    const mms = getDocumentMultimediaItems({ db, docId }).map(
       (multimediaItem) => {
         const videoMarkers = getMediaVideoMarkers(
-          { db, docId },
+          { db, docId } as MultimediaItemsFetcher,
           multimediaItem.MultimediaId,
         );
         if (videoMarkers) multimediaItem.VideoMarkers = videoMarkers;
@@ -858,10 +872,12 @@ const getMwMedia = async (lookupDate: Date) => {
         if (mepsLang) media.AlternativeLanguage = mepsLang;
       }
     }
-
+    console.log('multimediaMepsLangs', multimediaMepsLangs);
     await processMissingMediaInfo(allMedia);
+    console.log('allMedia', allMedia);
 
     const dynamicMediaForDay = await dynamicMediaMapper(allMedia, lookupDate);
+    console.log('dynamicMediaForDay', dynamicMediaForDay);
 
     const dynamicMedia: Record<
       string,
@@ -878,23 +894,21 @@ const getMwMedia = async (lookupDate: Date) => {
     ] = dynamicMediaForDay;
 
     LocalStorage.set('dynamicMedia', dynamicMedia);
-    return dynamicMediaForDay;
+    return {
+      error: false,
+      media: dynamicMediaForDay,
+    };
   } catch (e) {
     console.error('getMwMedia', e);
     const dynamicMedia: Record<
       string,
       Record<string, DynamicMediaObject[]>
     > = LocalStorage.getItem('dynamicMedia') || {};
-    // return (
-    // dynamicMedia[currentCongregation.value][
-    // date.formatDate(lookupDate, 'YYYYMMDD')
-    // ] || ([] as DynamicMediaObject[])
-    // );
     const returnVal =
       dynamicMedia[currentCongregation.value]?.[
         date.formatDate(lookupDate, 'YYYYMMDD')
       ] ?? [];
-    return returnVal;
+    return { error: true, media: returnVal };
   }
 };
 
@@ -906,28 +920,46 @@ async function processMissingMediaInfo(allMedia: MultimediaItem[]) {
       m.KeySymbol && (!m.Label || !m.FilePath || !fs.existsSync(m.FilePath)),
   )) {
     if (!media.KeySymbol) {
-      console.log('MISSING media.KeySymbol', media);
       continue;
     }
-    const langwritten =
-      media.AlternativeLanguage ?? (getSettingValue('lang') as string);
-    const publicationFetcher = {
-      fileformat: media.MimeType?.includes('audio') ? 'MP3' : 'MP4',
-      issue: media.IssueTagNumber,
-      langwritten,
-      pub: media.KeySymbol,
-      ...(typeof media.Track === 'number' &&
-        media.Track > 0 && { track: media.Track }),
-    };
-    if (!media.FilePath || !fs.existsSync(media.FilePath)) {
-      media.FilePath = await downloadMissingMedia(publicationFetcher);
-    }
-    if (!media.Label) {
-      media.Label =
-        media.Label ||
-        media.Caption ||
-        (await getJwMediaInfo(publicationFetcher)).title;
+    const langsWritten = [
+      media.AlternativeLanguage,
+      getSettingValue('lang') as string,
+      getSettingValue('langFallback') as string,
+    ];
+    for (const langwritten of langsWritten) {
+      if (!langwritten) {
+        continue;
+      }
+      const publicationFetcher = {
+        fileformat: media.MimeType?.includes('audio') ? 'MP3' : 'MP4',
+        issue: media.IssueTagNumber,
+        langwritten,
+        pub: media.KeySymbol,
+        ...(typeof media.Track === 'number' &&
+          media.Track > 0 && { track: media.Track }),
+      };
+      if (!media.FilePath || !fs.existsSync(media.FilePath)) {
+        media.FilePath = await downloadMissingMedia(publicationFetcher);
+      }
+      if (!media.Label) {
+        media.Label =
+          media.Label ||
+          media.Caption ||
+          (await getJwMediaInfo(publicationFetcher)).title;
+      }
     }
+    // const publicationFetcher = {
+    //   fileformat: media.MimeType?.includes('audio') ? 'MP3' : 'MP4',
+    //   issue: media.IssueTagNumber,
+    //   langwritten,
+    //   pub: media.KeySymbol,
+    //   ...(typeof media.Track === 'number' &&
+    //     media.Track > 0 && { track: media.Track }),
+    // };
+    // if (!media.FilePath || !fs.existsSync(media.FilePath)) {
+    //   media.FilePath = await downloadMissingMedia(publicationFetcher);
+    // }
   }
 }
 
@@ -954,11 +986,6 @@ const getPubMediaLinks = async (publication: PublicationFetcher) => {
   };
   const response = await get(urlWithParamsToString(url, params));
   if (!response) {
-    // createTemporaryNotification({
-    //   message: 'error.pubNotFound',
-    //   caption: [publication.pub, publication.langwritten, publication.issue, publication.track, publication.fileformat].filter(Boolean).join('_'),
-    //   type: 'negative',
-    // })
     downloadProgress.value[
       [
         publication.pub,
@@ -1101,10 +1128,8 @@ const getJwMediaInfo = async (publication: PublicationFetcher) => {
     if (publication.fileformat?.includes('MP4')) url += '_VIDEO';
     else if (publication.fileformat?.includes('MP3')) url += '_AUDIO';
     const responseObject = await get(url);
-    if (!responseObject.media || responseObject.media.length === 0) {
-      console.warn('No thumbnail found:' + url);
-      return { thumbnail: '', title: '' };
-    }
+    if (!responseObject.media || responseObject.media.length === 0)
+      throw new Error('No thumbnail found:' + url);
     return {
       thumbnail: getBestImageUrl(responseObject.media[0].images),
       title: responseObject.media[0].title,
@@ -1135,14 +1160,12 @@ const downloadPubMediaFiles = async (publication: PublicationFetcher) => {
     };
     return;
   }
-  console.log('publicationInfo.files', publicationInfo.files);
   const mediaLinks: MediaLink[] = publicationInfo.files[
     publication.langwritten
   ][publication.fileformat].filter(
     (mediaLink) =>
       !publication.maxTrack || mediaLink.track < publication.maxTrack,
   );
-  console.log('mediaLinks', mediaLinks);
 
   const dir = getPublicationDirectory(publication, true);
   const filteredMediaItemLinks = [] as MediaLink[];
@@ -1155,8 +1178,6 @@ const downloadPubMediaFiles = async (publication: PublicationFetcher) => {
       if (bestItem) filteredMediaItemLinks.push(bestItem);
     }
   }
-  console.log('filteredMediaItemLinks', filteredMediaItemLinks);
-
   await addToDownloadsWithLimit(filteredMediaItemLinks, dir);
 };
 
@@ -1165,14 +1186,6 @@ const downloadBackgroundMusic = () => {
     useCurrentStateStore(),
   );
   if (!currentSongbook.value || !currentSettings.value?.lang) return;
-  console.log('Downloading background music', {
-    fileformat: currentSongbook.value.fileformat,
-    langwritten: currentSongbook.value.signLanguage
-      ? currentSettings.value.lang
-      : 'E',
-    maxTrack: MAX_SONGS,
-    pub: currentSongbook.value.pub,
-  });
   downloadPubMediaFiles({
     fileformat: currentSongbook.value.fileformat,
     langwritten: currentSongbook.value.signLanguage
@@ -1192,7 +1205,6 @@ async function addToDownloadsWithLimit(
   const results = [];
 
   for (const mediaLink of mediaLinks) {
-    console.log('mediaLink', mediaLink);
     const downloadPromise = downloadFileIfNeeded({
       dir,
       size: mediaLink.filesize,
@@ -1201,7 +1213,6 @@ async function addToDownloadsWithLimit(
     if (!(downloadPromise instanceof Promise)) continue;
 
     queue.push(downloadPromise);
-
     // When the queue is at the limit, wait for one to finish
     if (queue.length >= limit) {
       const finishedPromise: Promise<DownloadedFile> = Promise.race(
@@ -1212,7 +1223,6 @@ async function addToDownloadsWithLimit(
       queue.splice(queue.indexOf(finishedPromise), 1);
     }
   }
-
   // Wait for the remaining promises in the queue
   results.push(...(await Promise.all(queue)));
 
diff --git a/src/helpers/notifications.ts b/src/helpers/notifications.ts
index dffc592c..6d0f015e 100644
--- a/src/helpers/notifications.ts
+++ b/src/helpers/notifications.ts
@@ -1,70 +1,22 @@
-import { Notify, QNotifyCreateOptions, QNotifyUpdateOptions } from 'quasar';
+import { Notify, QNotifyCreateOptions } from 'quasar';
 
 const createTemporaryNotification = ({
   caption,
   group,
   icon,
   message,
+  timeout = 2000,
   type,
 }: QNotifyCreateOptions) => {
   return Notify.create({
     group: false,
     message,
-    timeout: 2000,
+    timeout,
     ...(caption && { caption }),
     ...(type && { type }),
     ...(icon && { icon }),
     ...(group && { group }),
   });
 };
-const createUpdatableNotification = ({
-  caption,
-  icon,
-  message,
-  onDismiss,
-  progress,
-  spinner,
-  type,
-}: QNotifyCreateOptions) => {
-  return Notify.create({
-    group: false,
-    timeout: 0, // we want to be in control when it gets dismissed
-    ...(caption !== undefined ? { caption } : {}),
-    ...(icon !== undefined ? { icon } : {}),
-    ...(message !== undefined ? { message } : {}),
-    ...(progress !== undefined ? { progress } : {}),
-    ...(spinner !== undefined ? { spinner } : {}),
-    ...(type !== undefined ? { type } : {}),
-    ...(onDismiss !== undefined ? { onDismiss } : {}),
-  }) as typeof Notify.create;
-};
 
-const updateNotification = (
-  // @ts-expect-error ddd
-  notification,
-  {
-    caption,
-    icon,
-    message,
-    progress,
-    spinner,
-    timeout,
-    type,
-  }: QNotifyUpdateOptions,
-) => {
-  notification({
-    ...(caption !== undefined ? { caption } : {}),
-    ...(icon !== undefined ? { icon } : {}),
-    ...(message !== undefined ? { message } : {}),
-    ...(progress !== undefined ? { progress } : {}),
-    ...(spinner !== undefined ? { spinner } : {}),
-    ...(timeout !== undefined ? { timeout } : {}),
-    ...(type !== undefined ? { type } : {}),
-  });
-};
-
-export {
-  createTemporaryNotification,
-  createUpdatableNotification,
-  updateNotification,
-};
+export { createTemporaryNotification };
diff --git a/src/helpers/obs.ts b/src/helpers/obs.ts
index 6479b862..5f5c5fbe 100644
--- a/src/helpers/obs.ts
+++ b/src/helpers/obs.ts
@@ -1,6 +1,6 @@
 import { OBSWebSocketError } from 'obs-websocket-js';
 import { storeToRefs } from 'pinia';
-import { obsNotification, obsWebSocket } from 'src/boot/obs';
+import { obsWebSocket } from 'src/boot/obs';
 import { JsonObject } from 'type-fest';
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
@@ -8,40 +8,20 @@ import { useRouter } from 'vue-router';
 import { useCurrentStateStore } from '../stores/current-state';
 import { useObsStateStore } from '../stores/obs-state';
 import { isImage } from './mediaPlayback';
-import {
-  createUpdatableNotification,
-  updateNotification,
-} from './notifications';
 
 const currentState = useCurrentStateStore();
 const { getSettingValue } = currentState;
 const { mediaPlayer } = storeToRefs(currentState);
 const obsState = useObsStateStore();
-const { currentScene, currentSceneUuid, obsConnected, scenes } =
-  storeToRefs(obsState);
+const {
+  currentScene,
+  currentSceneUuid,
+  obsConnectionState,
+  obsMessage,
+  scenes,
+} = storeToRefs(obsState);
 const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
 
-const notifyObsError = (errorMessage?: string) => {
-  if (getSettingValue('obsEnable')) {
-    const notificationOptions = {
-      caption: errorMessage || 'Please check your settings and try again',
-      icon: 'mdi-cctv-off',
-      message: 'Failed to connect to OBS Studio',
-      onDismiss: () => {
-        obsNotification.value = null;
-      },
-      spinner: false,
-      timeout: 15000,
-      type: 'negative',
-    };
-    if (obsNotification.value) {
-      updateNotification(obsNotification.value, notificationOptions);
-    } else {
-      obsNotification.value = createUpdatableNotification(notificationOptions);
-    }
-  }
-};
-
 obsWebSocket.removeAllListeners('Identified');
 obsWebSocket.removeAllListeners('ConnectionClosed');
 obsWebSocket.removeAllListeners('ConnectionError');
@@ -49,32 +29,20 @@ obsWebSocket.removeAllListeners('CurrentProgramSceneChanged');
 obsWebSocket.removeAllListeners('SceneListChanged');
 
 obsWebSocket.on('Identified', async () => {
-  obsConnected.value = true;
-  const notificationOptions = {
-    caption: '',
-    icon: 'mdi-cctv',
-    message: 'Connected to OBS Studio',
-    onDismiss: () => {
-      obsNotification.value = null;
-    },
-    spinner: false,
-    timeout: 2000,
-    type: 'positive',
-  };
-  if (obsNotification.value) {
-    updateNotification(obsNotification.value, notificationOptions);
-  } else {
-    obsNotification.value = createUpdatableNotification(notificationOptions);
+  obsConnectionState.value = 'connected';
+  obsMessage.value = 'obs.connected';
+  const sceneList = await obsWebSocket?.call('GetSceneList');
+  if (sceneList) {
+    scenes.value = sceneList.scenes.reverse();
+    currentSceneUuid.value = sceneList.currentProgramSceneUuid;
   }
 });
 
 const obsErrorHandler = (err: OBSWebSocketError) => {
-  obsConnected.value = false;
+  obsConnectionState.value = 'disconnected';
+  obsMessage.value = 'obs.error';
   obsWebSocket?.disconnect();
   console.error('Connection closed', err.message);
-  if (err.message) {
-    notifyObsError(err.message);
-  }
 };
 
 obsWebSocket.on('ConnectionClosed', obsErrorHandler);
@@ -89,69 +57,49 @@ obsWebSocket.on('SceneListChanged', (data: { scenes: JsonObject[] }) => {
 const currentRoute = computed(() => useRouter()?.currentRoute.value.fullPath);
 
 const obsConnect = async (setup?: boolean) => {
-  const obsPort = getSettingValue('obsPort') as string;
-  const obsPortDigits = obsPort?.toString().replace(/\D/g, '');
-  if (obsPortDigits?.length === 0) return;
   if (!getSettingValue('obsEnable')) {
     await obsWebSocket?.disconnect();
-    obsNotification.value = null;
+    obsMessage.value = 'obs.disconnected';
     return;
   }
+  obsConnectionState.value = 'connecting';
+  obsMessage.value = 'obs.connecting';
+  const obsPort = getSettingValue('obsPort') as string;
+  const obsPortDigits = obsPort?.toString().replace(/\D/g, '');
+  if (obsPortDigits?.length === 0) return;
   const obsPassword = (getSettingValue('obsPassword') as string) || '';
 
-  const notificationOptions = {
-    message: 'Connecting to OBS Studio...',
-    spinner: true,
-  };
-  if (!obsNotification.value) {
-    obsNotification.value = createUpdatableNotification(notificationOptions);
-  } else {
-    updateNotification(obsNotification.value, notificationOptions);
-  }
-
   let attempt = 0;
-  const maxAttempts = setup ? 1 : 6;
+  const maxAttempts = setup ? 1 : 12;
+  const timeBetweenAttempts = 5000; // 5 seconds
   const previousRoute = currentRoute.value;
   while (attempt < maxAttempts) {
     if (currentRoute.value !== previousRoute) {
-      if (obsNotification.value) {
-        updateNotification(obsNotification.value, {
-          timeout: 500,
-        });
-      }
       break;
     }
     try {
       const { negotiatedRpcVersion, obsWebSocketVersion } =
         await obsWebSocket?.connect('ws://127.0.0.1:' + obsPort, obsPassword);
       if (obsWebSocketVersion && negotiatedRpcVersion) {
-        const sceneList = await obsWebSocket?.call('GetSceneList');
-        if (sceneList) {
-          scenes.value = sceneList.scenes.reverse();
-          currentSceneUuid.value = sceneList.currentProgramSceneUuid;
-        }
         break;
       }
     } catch (error) {
-      console.error('Failed to connect to OBS', error);
-      notifyObsError(
-        setup
-          ? (error as string)
-          : `Attempt ${attempt + 1} of ${maxAttempts}: ${error}`,
+      console.error(
+        `Failed to connect to OBS (attempt ${attempt + 1}/${maxAttempts})`,
+        error,
       );
     } finally {
       attempt++;
       if (attempt < maxAttempts) {
-        await sleep(10000); // wait for 10 seconds before retrying
+        await sleep(timeBetweenAttempts);
       }
     }
   }
 };
 
 const setObsScene = async (scene: string) => {
-  if (!obsConnected.value) await obsConnect(false);
-  if (!obsConnected.value) {
-    notifyObsError();
+  if (obsConnectionState.value !== 'connected') await obsConnect(false);
+  if (obsConnectionState.value !== 'connected') {
     return;
   }
   const mediaScene = getSettingValue('obsMediaScene') as string;
@@ -169,7 +117,7 @@ const setObsScene = async (scene: string) => {
 };
 
 const setObsSceneByUuid = async (sceneUuid: string) => {
-  if (!obsConnected.value) await obsConnect(false);
+  if (obsConnectionState.value !== 'connected') await obsConnect(false);
   if (sceneUuid) {
     obsWebSocket?.call('SetCurrentProgramScene', { sceneUuid });
   }
diff --git a/src/i18n/en-US/index.json b/src/i18n/en-US/index.json
index 06b46ff7..1a5908d5 100644
--- a/src/i18n/en-US/index.json
+++ b/src/i18n/en-US/index.json
@@ -119,5 +119,15 @@
   "will-you-be-using-this-app-as-a-companion-to-jw-library": "Will you be using this app alongside JW Library?",
   "would-you-like-to-integrate-m-with-obs-studio": "Would you like to integrate M³ with OBS Studio?",
   "yes": "Yes",
-  "music.stopping": "Stopping..."
+  "music.stopping": "Stopping...",
+  "noName": "No name",
+  "to-add-files-from-your-computer-drag-and-drop-them-directly-into-this-window": "To add files from your computer, drag-and-drop them directly into this window.",
+  "pdfFilesNotSupported": "PDF files are not supported yet",
+  "jwpubNoMultimedia": "The JWPUB file does not contain any multimedia",
+  "filetypeNotSupported": "This file type is not yet supported",
+  "fileProcessError": "There was an error processing this file",
+  "errorDownloadingMeetingMedia": "Error downloading media for meeting",
+  "tryConfiguringFallbackLanguage": "Try configuring a fallback language in the settings",
+  "entireFile": "Play from start to finish",
+  "sureStopVideo": "Are you sure you want to stop the video?"
 }
diff --git a/src/i18n/fr-CA/index.json b/src/i18n/fr-CA/index.json
index 3b4246fe..d1f7922d 100644
--- a/src/i18n/fr-CA/index.json
+++ b/src/i18n/fr-CA/index.json
@@ -288,5 +288,11 @@
   "zoomStartMeeting": "Démarrer la réunion Zoom",
   "zoomStopMeeting": "Arrêter la réunion Zoom",
   "zoomToggleComponent": "Basculer la visibilité du composant Zoom",
-  "music.stopping": "Arrêt en cours..."
+  "music.stopping": "Arrêt en cours...",
+  "noName": "Sans nom",
+  "to-add-files-from-your-computer-drag-and-drop-them-directly-into-this-window": "Pour ajouter des fichiers depuis votre ordinateur, glissez-les glisser directement dans cette fenêtre.",
+  "errorDownloadingMeetingMedia": "Erreur lors du téléchargement des médias pour la réunion",
+  "tryConfiguringFallbackLanguage": "Essayez de configurer une langue secondaire dans les paramètres",
+  "entireFile": "Jouez du début à la fin",
+  "sureStopVideo": "Êtes-vous sûr de vouloir arrêter la vidéo ?"
 }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 5def16df..8bf96441 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -4,7 +4,7 @@
       <q-toolbar class="q-pl-none">
         <q-toolbar-title>
           <q-avatar class="q-px-sm q-mr-md">
-            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg" />
+            <img src="../assets/master-icon.png" />
           </q-avatar>
           {{ $t(route.meta.title as string) }}
         </q-toolbar-title>
@@ -143,6 +143,7 @@
     >
       <q-toolbar class="bg-blue-9 text-white" style="min-height: initial">
         <DownloadStatus />
+        <ObsStatus />
         <q-space />
         <ScenePicker />
         <MusicButton />
@@ -205,7 +206,9 @@
 
         <q-item-section>
           {{
-            (currentSettings && currentSettings.congregationName) ??
+            (!route.fullPath.includes('wizard') &&
+              currentSettings &&
+              currentSettings.congregationName) ||
             $t('titles.profileSelection')
           }}
         </q-item-section>
@@ -243,6 +246,7 @@ import { storeToRefs } from 'pinia';
 import { Dark, LocalStorage, date } from 'quasar';
 import DownloadStatus from 'src/components/media/DownloadStatus.vue';
 import MusicButton from 'src/components/media/MusicButton.vue';
+import ObsStatus from 'src/components/media/ObsStatus.vue';
 import ScenePicker from 'src/components/media/ScenePicker.vue';
 import SongPicker from 'src/components/media/SongPicker.vue';
 import { getLookupPeriod } from 'src/helpers/date';
@@ -262,11 +266,12 @@ const currentState = useCurrentStateStore();
 const { invalidSettings } = currentState;
 const {
   currentCongregation,
+  currentSettings,
   downloadProgress,
   lookupPeriod,
   mediaPlayer,
   mediaPlaying,
-  selectedDate,
+  selectedDate
 } = storeToRefs(currentState);
 
 const congregationSettings = useCongregationSettingsStore();
@@ -291,9 +296,8 @@ const mediaSortForDay = ref(true);
 const { toggleMediaWindow } = electronApi;
 
 const { locale } = useI18n({ useScope: 'global' });
-const drawer = ref(false);
+const drawer = ref(true);
 updateJwLanguages();
-const { currentSettings } = storeToRefs(currentState);
 
 const route = useRoute();
 const router = useRouter();
@@ -325,10 +329,16 @@ watch(currentCongregation, () => {
   downloadBackgroundMusic();
   downloadProgress.value = {};
 });
+watch(route, (newVal) => {
+  drawer.value = !(
+    newVal.fullPath.includes('wizard') &&
+    Object.keys(congregationSettings.congregations).length < 2
+  );
+});
 
 watch(
-  () => currentSettings.value,
-  (newVal) => {
+  currentSettings,
+  () => {
     applySettings();
     lookupPeriod.value = getLookupPeriod();
     if (
@@ -338,22 +348,10 @@ watch(
       router.push({ path: '/congregation-selector' });
       return;
     }
-    drawer.value = !(
-      route.fullPath.includes('wizard') &&
-      newVal !== undefined &&
-      !(
-        route.fullPath.includes('wizard') &&
-        Object.keys(congregationSettings.congregations).length > 1
-      )
-    );
   },
   { deep: true, immediate: true },
 );
 
-watch(route, (newVal) => {
-  drawer.value = !newVal.fullPath.includes('wizard');
-});
-
 // Computed and helper functions
 const dateOptions = (lookupDate: string) => {
   const dateArray: Date[] = lookupPeriod.value.map((day) => day.date);
diff --git a/src/pages/CongregationSelectorPage.vue b/src/pages/CongregationSelectorPage.vue
index 1a4b5ae4..d44fced9 100644
--- a/src/pages/CongregationSelectorPage.vue
+++ b/src/pages/CongregationSelectorPage.vue
@@ -9,7 +9,7 @@
       <!-- @vue-ignore-->
       <q-item :key="id" clickable v-for="(prefs, id) in congregations" v-ripple>
         <q-item-section @click="chooseCongregation(id)">
-          {{ getSettingValue('congregationName', id) || 'no name' }} - {{ id }}
+          {{ getSettingValue('congregationName', id) || $t('noName') }}
         </q-item-section>
         <q-item-section side>
           <q-btn
diff --git a/src/pages/MediaCalendarPage.vue b/src/pages/MediaCalendarPage.vue
index 6a6b063b..c4892db5 100644
--- a/src/pages/MediaCalendarPage.vue
+++ b/src/pages/MediaCalendarPage.vue
@@ -37,6 +37,7 @@
               :id="media.uniqueId"
               :ratio="16 / 9"
               :src="media.thumbnailUrl"
+              @error="imageLoadingError(media)"
               @load="media.isImage && initiatePanzoom(media.uniqueId)"
               class="rounded-borders"
               fit="contain"
@@ -194,7 +195,7 @@
                   <q-tooltip>Reset image zoom</q-tooltip>
                 </q-btn>
               </div> -->
-              <div class="col" v-if="obsConnected">
+              <div class="col" v-if="obsConnectionState === 'connected'">
                 <q-btn
                   @click="setObsScene('camera')"
                   color="negative"
@@ -269,13 +270,35 @@
                   />
                 </template>
                 <template v-else>
-                  <q-btn color="primary" label="Handles click" push>
+                  <q-btn
+                    :disable="
+                      mediaPlayer.url !== '' && isVideo(mediaPlayer.url)
+                    "
+                    color="primary"
+                    icon="mdi-play-box-multiple"
+                    push
+                    round
+                  >
                     <q-menu>
                       <q-list style="min-width: 100px">
                         <q-item
-                          :disable="
-                            mediaPlayer.url !== '' && isVideo(mediaPlayer.url)
+                          @click="
+                            customDurations[currentCongregation][selectedDate][
+                              media.uniqueId
+                            ] = {
+                              min: 0,
+                              max: media.duration,
+                            };
+                            mediaPlayer.action = 'play';
+                            mediaPlayer.url = media.fileUrl;
+                            mediaPlayer.uniqueId = media.uniqueId;
                           "
+                          clickable
+                        >
+                          <q-item-section>{{ $t('entireFile') }}</q-item-section>
+                        </q-item>
+                        <q-separator />
+                        <q-item
                           :key="marker.VideoMarkerId"
                           @click="
                             if (
@@ -311,30 +334,6 @@
                         </q-item>
                       </q-list>
                     </q-menu>
-                    <!-- <q-popup-proxy>
-                      <q-card>
-                        <q-card-section>
-                          <q-markup-table dense>
-                            <thead>
-                              <tr>
-                                <th class=" text-left">Start</th>
-                          <th class="text-left">End</th>
-                          <th class="text-left">Duration</th>
-                          </tr>
-                          </thead>
-                          <tbody>
-                            <tr v-for="marker in media.markers" :key="marker.DurationTicks">
-                              <td class="text-left">{{ formatTime(marker.StartTimeTicks / 10000 / 1000) }}</td>
-                              <td class="text-left">{{ formatTime((marker.StartTimeTicks + marker.DurationTicks) /
-                                10000 / 1000)
-                                }}</td>
-                              <td class="text-left">{{ formatTime(marker.DurationTicks / 10000 / 1000) }}</td>
-                            </tr>
-                          </tbody>
-                          </q-markup-table>
-                          </q-card-section>
-                          </q-card>
-                          </q-popup-proxy> -->
                   </q-btn>
                 </template>
               </div>
@@ -428,7 +427,7 @@
       <q-card>
         <q-card-section class="row items-center">
           <q-avatar color="negative" icon="mdi-alert" text-color="white" />
-          <span class="q-ml-sm">Are you sure you want to stop the video?</span>
+          <span class="q-ml-sm">{{ $t('sureStopVideo') }}</span>
         </q-card-section>
         <q-card-actions align="right" class="text-primary">
           <q-btn @click="mediaToStop = ''" flat label="Cancel" />
@@ -550,6 +549,7 @@ import { setObsScene } from 'src/helpers/obs';
 import { DynamicMediaObject } from 'src/types/media';
 import { DocumentItem, TableItem } from 'src/types/sqlite';
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 
 import { useCurrentStateStore } from '../stores/current-state';
 import { useJwStore } from '../stores/jw';
@@ -562,8 +562,10 @@ const jwpubImportLoading = ref(false);
 const jwpubImportDocuments = ref([] as DocumentItem[]);
 const canvas = ref();
 
+const { t } = useI18n();
+
 const obsState = useObsStateStore();
-const { currentScene, obsConnected } = storeToRefs(obsState);
+const { currentScene, obsConnectionState } = storeToRefs(obsState);
 const jwStore = useJwStore();
 const { addToAdditionMediaMap, removeFromAdditionMediaMap, updateJwSongs } =
   jwStore;
@@ -572,6 +574,7 @@ const { additionalMediaMaps, customDurations, mediaSort } =
 const currentState = useCurrentStateStore();
 const {
   currentCongregation,
+  currentSettings,
   getDatedAdditionalMediaDirectory,
   lookupPeriod,
   mediaPlayer,
@@ -594,6 +597,7 @@ const zoomReset = (elemId: string, forced = false) => {
 };
 
 function stopMedia(elemId: string) {
+  console.log('stopMedia', elemId);
   zoomReset(elemId, true);
   mediaPlayer.value.action = 'stop';
   mediaPlayer.value.url = '';
@@ -738,7 +742,7 @@ watch(mediaPlaying, (newValue) => {
   updateConfig(mediaList.value, { disabled: !!newValue });
 });
 
-onMounted(() => {
+onMounted(async () => {
   watch(selectedDate, (newVal) => {
     const congregation = currentCongregation.value;
     if (!congregation) return;
@@ -752,8 +756,22 @@ onMounted(() => {
       .map((day) => day.date)[0],
     'YYYY/MM/DD',
   );
-  fetchMedia();
   setObsScene('camera');
+  const fetchResult = await fetchMedia();
+  if (Object.keys(fetchResult).length > 0) {
+    for (const [date, error] of Object.entries(fetchResult)) {
+      if (error) {
+        createTemporaryNotification({
+          caption: !currentSettings.value?.langFallback
+            ? t('tryConfiguringFallbackLanguage')
+            : '',
+          message: date + ' | ' + t('errorDownloadingMeetingMedia'),
+          timeout: 10000,
+          type: 'negative',
+        });
+      }
+    }
+  }
 });
 
 onUnmounted(() => {
@@ -889,7 +907,7 @@ const addToFiles = async (
       } else if (isPdf(filepath)) {
         createTemporaryNotification({
           icon: 'mdi-file-pdf-box',
-          message: 'PDF files are not supported yet',
+          message: t('pdfFilesNotSupported'),
           type: 'warning',
         });
         // todo: eventually support PDF import
@@ -904,7 +922,7 @@ const addToFiles = async (
           createTemporaryNotification({
             caption: path.basename(filepath),
             icon: 'mdi-multimedia',
-            message: 'The JWPUB file does not contain any multimedia',
+            message: t('jwpubNoMultimedia'),
             type: 'warning',
           });
           jwpubImportDb.value = '';
@@ -951,7 +969,7 @@ const addToFiles = async (
         createTemporaryNotification({
           caption: path.basename(filepath),
           icon: 'mdi-file',
-          message: 'This file type is not yet supported',
+          message: t('filetypeNotSupported'),
           type: 'error',
         });
       }
@@ -959,7 +977,7 @@ const addToFiles = async (
       createTemporaryNotification({
         caption: path.basename(filepath),
         icon: 'mdi-file',
-        message: 'Failed to process this file',
+        message: t('fileProcessError'),
         type: 'error',
       });
     }
@@ -1034,6 +1052,12 @@ const resetMediaDuration = (media: DynamicMediaObject) => {
     min: 0,
   };
 };
+
+const imageLoadingError = (media: DynamicMediaObject) => {
+  const thumbnailUrl = media.thumbnailUrl;
+  media.thumbnailUrl = '';
+  media.thumbnailUrl = thumbnailUrl ?? getThumbnailUrl(media.fileUrl);
+};
 </script>
 
 <style scoped>
diff --git a/src/pages/MediaPlayerPage.vue b/src/pages/MediaPlayerPage.vue
index a4c2e966..581bf6c6 100644
--- a/src/pages/MediaPlayerPage.vue
+++ b/src/pages/MediaPlayerPage.vue
@@ -1,5 +1,5 @@
 <template>
-  <!-- {{ mediaPlayer }} -->
+  {{ mediaPlayer }}
   <q-page-container
     class="q-electron-drag vertical-middle overflow-hidden"
     padding
@@ -113,7 +113,7 @@ watch(
       }
     }
   },
-  { deep: true },
+  { deep: true, immediate: true },
 );
 
 const playMedia = () => {
@@ -129,6 +129,8 @@ const playMedia = () => {
     mediaPlayer.value.url = '';
     mediaPlayer.value.uniqueId = '';
   };
+
+  // todo: look into watching mediaElement.value.currentTime instead of mediaElement.value.ontimeupdate
   mediaElement.value.ontimeupdate = () => {
     mediaPlayer.value.currentPosition = mediaElement.value?.currentTime || 0;
     if (
diff --git a/src/pages/SetupWizard.vue b/src/pages/SetupWizard.vue
index 4b9dff64..6ca53a99 100644
--- a/src/pages/SetupWizard.vue
+++ b/src/pages/SetupWizard.vue
@@ -634,6 +634,12 @@ watch(companionToJwl, () => {
   enableExternalDisplayAndMusic();
 });
 
+watch (obsIntegrate, () => {
+  if (obsIntegrate.value && obsUsed.value) {
+    currentSettings.value.obsEnable = true;
+  }
+});
+
 async function enableExternalDisplayAndMusic() {
   await updateYeartext(currentSettings.value.lang as string);
   currentSettings.value.enableMediaDisplayButton = usingAtKh.value;
diff --git a/src/router/routes.ts b/src/router/routes.ts
index fb89a4a9..9972b628 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -9,7 +9,7 @@ const routes: RouteRecordRaw[] = [
       },
     ],
     component: () => import('layouts/MainLayout.vue'),
-    meta: { title: 'titles.congregationSelector' },
+    meta: { title: 'titles.profileSelection' },
     path: '/',
   },
 
@@ -21,7 +21,7 @@ const routes: RouteRecordRaw[] = [
       },
     ],
     component: () => import('layouts/MainLayout.vue'),
-    meta: { title: 'titles.congregationSelector' },
+    meta: { title: 'titles.profileSelection' },
     path: '/congregation-selector',
   },
 
diff --git a/src/stores/obs-state.ts b/src/stores/obs-state.ts
index e6c26b65..2bc17119 100644
--- a/src/stores/obs-state.ts
+++ b/src/stores/obs-state.ts
@@ -31,7 +31,8 @@ export const useObsStateStore = defineStore('obs-state', {
     return {
       currentScene: '',
       currentSceneUuid: '',
-      obsConnected: false,
+      obsConnectionState: 'notConnected',
+      obsMessage: '',
       scenes: [] as JsonObject[],
     };
   },
diff --git a/yarn.lock b/yarn.lock
index 49f74179..09108208 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3028,10 +3028,10 @@ escape-string-regexp@^4.0.0:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
-eslint-config-prettier@^8.1.0:
-  version "8.10.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz#3a06a662130807e2502fc3ff8b4143d8a0658e11"
-  integrity sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==
+eslint-config-prettier@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
+  integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
 
 eslint-plugin-perfectionist@^2.10.0:
   version "2.10.0"