chore: add OBS Status icon, i18n notifications

.editorconfig

@@ -7,3 +7,4 @@ indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
+max_line_length = 80

.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',
   },
 };

.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"
+  }
 }

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",

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;
 };

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 };

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 };

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 };

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>

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']);

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<{

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>