fix: fixed SVG conversion, and moved some functions around

.vscode/settings.json

@@ -14,6 +14,7 @@
     "flac",
     "fontawesome",
     "formkit",
+    "guids",
     "icns",
     "intlify",
     "ionicons",
@@ -32,6 +33,7 @@
     "myapp",
     "nodir",
     "nsis",
+    "objt",
     "overscan",
     "panzoom",
     "Panzoom",

src/components/media/MediaDisplayButton.vue

@@ -126,26 +126,20 @@
 <script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { electronApi } from 'src/helpers/electron-api';
+import { showMediaWindow } from 'src/helpers/mediaPlayback';
 import { useAppSettingsStore } from 'src/stores/app-settings';
 import { useCurrentStateStore } from 'src/stores/current-state';
 import { onMounted, onUnmounted, ref, watch } from 'vue';
 
-const { getAllScreens, moveMediaWindow, toggleMediaWindow } = electronApi;
+const { getAllScreens, moveMediaWindow } = electronApi;
 
 defineProps<{
   disabled?: boolean;
 }>();
 
 const currentState = useCurrentStateStore();
 const { currentSettings, mediaPlayer } = storeToRefs(currentState);
-
-const mediaDisplayPopup = ref();
-
-const showMediaWindow = (state: boolean) => {
-  mediaPlayer.value.windowVisible = state;
-  toggleMediaWindow(state ? 'show' : 'hide');
-};
-
+const mediaDisplayPopup = ref()
 const appSettings = useAppSettingsStore();
 const { screenPreferences } = storeToRefs(appSettings);
 const screenList = ref(getAllScreens());

src/helpers/jw-media.ts

@@ -21,11 +21,13 @@ import {
   getThumbnailUrl,
 } from 'src/helpers/fs';
 import {
+  convertSvgToJpg,
   decompressJwpub,
   findDb,
   isAudio,
   isImage,
   isSong,
+  isSvg,
   isVideo,
 } from 'src/helpers/mediaPlayback';
 import { useCurrentStateStore } from 'src/stores/current-state';
@@ -172,6 +174,14 @@ const fetchMedia = async () => {
 
 const getDbFromJWPUB = async (publication: PublicationFetcher) => {
   try {
+    if (
+      publication.pub === 'w' &&
+      publication.issue &&
+      parseInt(publication.issue.toString()) >= 20080101 &&
+      publication.issue.toString().slice(-2) === '01'
+    ) {
+      publication.pub = 'wp';
+    }
     const jwpub = await downloadJwpub(publication);
     if (jwpub.error) throw new Error('JWPUB download error: ' + publication);
     const publicationDirectory = getPublicationDirectory(publication);
@@ -534,6 +544,7 @@ const dynamicMediaMapper = async (
   const mediaPromises = allMedia
     .filter((m) => m.FilePath)
     .map(async (m) => {
+      if (isSvg(m.FilePath)) m.FilePath = await convertSvgToJpg(m.FilePath);
       const mediaIsSong = isSong(m);
       const thumbnailUrl = await getThumbnailUrl(
         m.ThumbnailFilePath || m.FilePath,
@@ -1243,7 +1254,12 @@ const downloadBackgroundMusic = () => {
   const { currentSettings, currentSongbook } = storeToRefs(
     useCurrentStateStore(),
   );
-  if (!currentSongbook.value || !currentSettings.value?.lang) return;
+  if (
+    !currentSongbook.value ||
+    !currentSettings.value?.lang ||
+    !currentSettings.value.enableMusicButton
+  )
+    return;
   downloadPubMediaFiles({
     fileformat: currentSongbook.value.fileformat,
     langwritten: currentSongbook.value.signLanguage

src/helpers/mediaPlayback.ts

@@ -14,9 +14,9 @@ import {
   MultimediaItem,
   PlaylistTagItem,
 } from 'src/types/sqlite';
-import { Ref } from 'vue';
 
-const { convert, decompress, executeQuery, fs, path } = electronApi;
+const { convert, decompress, executeQuery, fs, path, toggleMediaWindow } =
+  electronApi;
 const { pad } = format;
 
 const formatTime = (time: number) => {
@@ -239,39 +239,37 @@ const convertHeicToJpg = async (filepath: string) => {
   return newPath;
 };
 
-const convertSvgToJpg = async (
-  filepath: string,
-  canvas: Ref<HTMLCanvasElement>,
-): Promise<string> => {
-  if (!isSvg(filepath) || !canvas.value) return filepath;
+const convertSvgToJpg = async (filepath: string): Promise<string> => {
+  if (!isSvg(filepath)) return filepath;
 
-  canvas.value.width = FULL_HD.width * 2;
-  canvas.value.height = FULL_HD.height * 2;
-  const ctx = canvas.value.getContext('2d');
+  const canvas = document.createElement('canvas');
+  canvas.width = FULL_HD.width * 2;
+  canvas.height = FULL_HD.height * 2;
+  const ctx = canvas.getContext('2d');
   if (!ctx) return filepath;
 
   const img = new Image();
   img.src = getFileUrl(filepath);
 
   return new Promise((resolve, reject) => {
     img.onload = function () {
-      const canvasW = canvas.value.width,
-        canvasH = canvas.value.height;
+      const canvasW = canvas.width,
+        canvasH = canvas.height;
       const imgW = img.naturalWidth || canvasW,
         imgH = img.naturalHeight || canvasH;
       const wRatio = canvasW / imgW,
         hRatio = canvasH / imgH;
       if (wRatio < hRatio) {
-        canvas.value.height = canvasW * (imgH / imgW);
+        canvas.height = canvasW * (imgH / imgW);
       } else {
-        canvas.value.width = canvasH * (imgW / imgH);
+        canvas.width = canvasH * (imgW / imgH);
       }
       const ratio = Math.min(wRatio, hRatio);
       ctx.drawImage(img, 0, 0, imgW * ratio, imgH * ratio);
       ctx.globalCompositeOperation = 'destination-over';
       ctx.fillStyle = 'white';
-      ctx.fillRect(0, 0, canvas.value.width, canvas.value.height);
-      const outputImg = canvas.value.toDataURL('image/png');
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      const outputImg = canvas.toDataURL('image/png');
       const existingPath = path.parse(filepath);
       const newPath = `${existingPath.dir}/${existingPath.name}.jpg`;
       try {
@@ -291,6 +289,13 @@ const convertSvgToJpg = async (
   });
 };
 
+const showMediaWindow = (state: boolean) => {
+  const currentState = useCurrentStateStore();
+  const { mediaPlayer } = storeToRefs(currentState);
+  mediaPlayer.value.windowVisible = state;
+  toggleMediaWindow(state ? 'show' : 'hide');
+};
+
 export {
   convertHeicToJpg,
   convertSvgToJpg,
@@ -310,4 +315,5 @@ export {
   isSong,
   isSvg,
   isVideo,
+  showMediaWindow,
 };

src/pages/MediaCalendarPage.vue

@@ -1,6 +1,5 @@
 <template>
   <q-page @dragenter="dropActive" @dragover="dropActive" padding>
-    <canvas ref="canvas" style="display: none"></canvas>
     <q-banner
       class="bg-orange-9 text-white"
       inline-actions
@@ -692,7 +691,6 @@ const jwpubImportDb = ref('');
 const jwpubImportInProgress = computed(() => !!jwpubImportDb.value);
 const jwpubImportLoading = ref(false);
 const jwpubImportDocuments = ref([] as DocumentItem[]);
-const canvas = ref();
 
 const { t } = useI18n();
 
@@ -1096,7 +1094,7 @@ const addToFiles = async (
       if (isHeic(filepath)) {
         filepath = await convertHeicToJpg(filepath);
       } else if (isSvg(filepath)) {
-        filepath = await convertSvgToJpg(filepath, canvas);
+        filepath = await convertSvgToJpg(filepath);
       }
 
       if (isImage(filepath) || isVideo(filepath) || isAudio(filepath)) {

src/pages/MediaPlayerPage.vue

@@ -74,8 +74,7 @@
 import Panzoom, { PanzoomObject } from '@panzoom/panzoom';
 import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
-import { electronApi } from 'src/helpers/electron-api';
-import { isAudio, isImage, isVideo } from 'src/helpers/mediaPlayback';
+import { isAudio, isImage, isVideo, showMediaWindow } from 'src/helpers/mediaPlayback';
 import { useCurrentStateStore } from 'src/stores/current-state';
 import { useJwStore } from 'src/stores/jw';
 import { Ref, ref, watch } from 'vue';
@@ -87,8 +86,6 @@ const { currentCongregation, currentSettings, mediaPlayer, selectedDate } =
 const jwStore = useJwStore();
 const { customDurations, yeartexts } = storeToRefs(jwStore);
 
-const { toggleMediaWindow } = electronApi;
-
 const panzoom: Ref<PanzoomObject | undefined> = ref();
 
 const initiatePanzoom = () => {
@@ -106,14 +103,14 @@ watch(
   () => mediaPlayer.value?.url,
   (newUrl) => {
     if (currentSettings.value?.jwlCompanionMode)
-      toggleMediaWindow(newUrl ? 'show' : 'hide');
+    showMediaWindow(!!newUrl);
   },
 );
 
 watch(
   () => currentCongregation.value,
   (newCongregation) => {
-    if (!newCongregation) toggleMediaWindow('hide');
+    if (!newCongregation) showMediaWindow(false);
   },)
 
 watch(