chore: implement remote video download

sircharlo · Jun 20, 2024 · 5edd891 · 5edd891
1 parent dc3f6f1
commit 5edd891
Show file tree

Hide file tree

Showing 6 changed files with 207 additions and 136 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -2,6 +2,7 @@
   "cSpell.words": [
     "akamaihd",
     "alllangs",
+    "axios",
     "ayfm",
     "AYFM",
     "cctv",

diff --git a/src-electron/electron-preload.ts b/src-electron/electron-preload.ts
@@ -87,13 +87,17 @@ const moveMediaWindow = ({
   const mediaWindow = getMediaWindow();
   if (!mediaWindow || !mainWindow) return;
   if (targetScreen === undefined || windowedMode === undefined) {
-    const screenPreferences = JSON.parse(
-      localStorage.getItem('screenPreferences') ?? '{}',
-    ) as ScreenPreferences;
-    // todo: fix this, not reading right values
-    console.log('screenPreferences', screenPreferences);
-    targetScreen = screenPreferences.preferredScreenNumber;
-    windowedMode = screenPreferences.preferWindowed;
+    try {
+      const screenPreferences = JSON.parse(
+        localStorage.getItem('screenPreferences') ?? '{}',
+      ) as ScreenPreferences;
+      // todo: fix this, not reading right values
+      console.log('screenPreferences', screenPreferences);
+      targetScreen = screenPreferences.preferredScreenNumber;
+      windowedMode = screenPreferences.preferWindowed;
+    } catch (err) {
+      console.error(err);
+    }
   }
   const getWindowScreen = (window: Electron.BrowserWindow) => {
     const windowDisplay = screen.getDisplayMatching(window.getBounds());

diff --git a/src/components/media/MediaDisplayButton.vue b/src/components/media/MediaDisplayButton.vue
@@ -55,8 +55,8 @@
                 screen.mainWindow
                   ? 'mdi-monitor-dashboard'
                   : screenPreferences.preferredScreenNumber === index
-                  ? 'mdi-monitor-shimmer'
-                  : 'mdi-monitor'
+                    ? 'mdi-monitor-shimmer'
+                    : 'mdi-monitor'
               "
               :text-color="
                 screenList.length < 2 ||
@@ -130,8 +130,7 @@ 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, toggleMediaWindow } = electronApi;
 
 defineProps<{
   disabled?: boolean;
@@ -178,13 +177,21 @@ watch(
 );
 
 const targetScreenListener = (event: CustomEventInit) => {
-  console.log('targetScreen-update', event.detail);
-  screenPreferences.value.preferredScreenNumber = event.detail;
+  try {
+    console.log('targetScreen-update', event.detail);
+    screenPreferences.value.preferredScreenNumber = event.detail;
+  } catch (error) {
+    console.error(error);
+  }
 };
 
 const windowedModeListener = (event: CustomEventInit) => {
-  console.log('windowedMode-update', event.detail);
-  screenPreferences.value.preferWindowed = event.detail;
+  try {
+    console.log('windowedMode-update', event.detail);
+    screenPreferences.value.preferWindowed = event.detail;
+  } catch (error) {
+    console.error(error);
+  }
 };
 
 onMounted(() => {

diff --git a/src/helpers/jw-media.ts b/src/helpers/jw-media.ts
@@ -1017,7 +1017,7 @@ const getPubMediaLinks = async (publication: PublicationFetcher) => {
 };
 
 export function findBestResolution(
-  mediaLinks: (MediaItemsMediatorFile | MediaLink)[],
+  mediaLinks: MediaItemsMediatorFile[] | MediaLink[],
 ) {
   const currentState = useCurrentStateStore();
   const { getSettingValue } = currentState;
@@ -1033,7 +1033,9 @@ export function findBestResolution(
       mediaLink.frameHeight <= maxRes &&
       mediaLink.frameHeight >= bestHeight
     ) {
-      bestItem = mediaLink;
+      bestItem = Object.hasOwn(mediaLink, 'progressiveDownloadURL')
+        ? (mediaLink as MediaItemsMediatorFile)
+        : (mediaLink as MediaLink);
       bestHeight = mediaLink.frameHeight;
     }
   }
@@ -1114,6 +1116,32 @@ const downloadMissingMedia = async (publication: PublicationFetcher) => {
   return downloadedFile?.path;
 };
 
+const downloadAdditionalRemoteVideo = async (
+  mediaItemLinks: MediaItemsMediatorFile[],
+) => {
+  window.dispatchEvent(
+    new CustomEvent('remoteVideo-loading', {
+      detail: true,
+    }),
+  );
+  const currentState = useCurrentStateStore();
+  const { getDatedAdditionalMediaDirectory } = storeToRefs(currentState);
+  const bestItem = findBestResolution(mediaItemLinks) as MediaItemsMediatorFile;
+  let downloadedFile: DownloadedFile = { path: '' };
+  if (bestItem) {
+    downloadedFile = (await downloadFileIfNeeded({
+      dir: getDatedAdditionalMediaDirectory.value,
+      size: bestItem.filesize,
+      url: bestItem.progressiveDownloadURL,
+    })) as DownloadedFile;
+  }
+  window.dispatchEvent(
+    new CustomEvent('remoteVideo-loaded', {
+      detail: downloadedFile,
+    }),
+  );
+};
+
 function getBestImageUrl(images: ImageTypeSizes, size?: keyof ImageSizes) {
   const preferredOrder: (keyof ImageTypeSizes)[] = ['wss', 'lsr', 'sqr', 'pnr'];
   for (const key of preferredOrder) {
@@ -1287,6 +1315,7 @@ const downloadJwpub = async (
 
 export {
   addFullFilePathToMultimediaItem,
+  downloadAdditionalRemoteVideo,
   downloadBackgroundMusic,
   downloadFileIfNeeded,
   downloadPubMediaFiles,

diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
@@ -169,17 +169,20 @@
                     text-color="white"
                   />
                 </q-avatar>
-
                 <q-toolbar-title>{{ $t('add-media-files') }}</q-toolbar-title>
-
                 <q-btn dense flat icon="close" round v-close-popup />
               </q-toolbar>
-
-              <!-- <q-card-section horizontal> -->
-              <!-- <q-card-section> </q-card-section> -->
+              <q-linear-progress
+                :value="remoteVideosLoadingProgress"
+                class="q-mt-md"
+              />
               <div class="row q-px-sm">
                 <div class="col-grow">
-                  <q-input :label="$t('filter')" dense v-model="remoteVideoFilter" />
+                  <q-input
+                    :label="$t('filter')"
+                    dense
+                    v-model="remoteVideoFilter"
+                  />
                 </div>
                 <q-toggle
                   :label="$t('include-audio-description')"
@@ -196,7 +199,7 @@
                   >
                     <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                       <q-card
-                        @click="console.log(video)"
+                        @click="downloadAdditionalRemoteVideo(video.files); remoteVideoPopup = false"
                         class="text-white cursor-pointer"
                         style="
                           background-color: rgb(91, 60, 136);
@@ -227,16 +230,6 @@
                   </template>
                 </div>
               </q-card-section>
-              <!-- </q-card-section> -->
-              <q-card-actions align="right">
-                <q-btn
-                  :label="$t('browse')"
-                  @click="getLocalFiles()"
-                  color="primary"
-                  flat
-                />
-                <q-btn :label="$t('got-it')" color="primary" v-close-popup />
-              </q-card-actions>
             </q-card>
           </q-dialog>
         </template>
@@ -375,7 +368,11 @@ import SongPicker from 'src/components/media/SongPicker.vue';
 import SubtitlesButton from 'src/components/media/SubtitlesButton.vue';
 import { getLookupPeriod } from 'src/helpers/date';
 import { electronApi } from 'src/helpers/electron-api';
-import { downloadBackgroundMusic, getBestImageUrl } from 'src/helpers/jw-media';
+import {
+  downloadAdditionalRemoteVideo,
+  downloadBackgroundMusic,
+  getBestImageUrl,
+} from 'src/helpers/jw-media';
 import { createTemporaryNotification } from 'src/helpers/notifications';
 import { useAppSettingsStore } from 'src/stores/app-settings';
 import { useCongregationSettingsStore } from 'src/stores/congregation-settings';
@@ -548,6 +545,7 @@ const localUploadPopup = ref(false);
 const importMediaMenuActive = ref(false);
 const datePickerActive = ref(false);
 const remoteVideoPopup = ref(false);
+const remoteVideosLoadingProgress = ref(0);
 const remoteVideos: Ref<MediaItemsMediatorItem[]> = ref([]);
 // const remoteVideosByCategory: Ref<{
 //   [key: string]: MediaItemsMediatorItem[];
@@ -586,81 +584,85 @@ const getLocalFiles = async () => {
 };
 
 const getJwVideos = async () => {
-  const currentState = useCurrentStateStore();
-  const { getSettingValue } = currentState;
-  const getSubcategories = async (category: string) => {
-    return (await get(
-      `https://b.jw-cdn.org/apis/mediator/v1/categories/${
-        getSettingValue('lang') as string
-      }/${category}?detailed=1&mediaLimit=0&clientType=www`,
-    )) as JwVideoCategory;
-  };
-  const subcategories: {
-    key: string;
-    parentCategory: string;
-  }[] = [{ key: 'LatestVideos', parentCategory: '' }];
-  const subcategoriesRequest = await getSubcategories('VideoOnDemand');
-  console.log('subcategoriesRequest', subcategoriesRequest);
-  const subcategoriesFirstLevel =
-    subcategoriesRequest.category.subcategories.map((s) => s.key);
-  for (const subcategoryFirstLevel of subcategoriesFirstLevel) {
-    subcategories.push(
-      ...(
-        await getSubcategories(subcategoryFirstLevel)
-      ).category.subcategories.map((s) => {
-        return { key: s.key, parentCategory: subcategoryFirstLevel };
-      }),
-    );
-  }
-  console.log('subcategories', subcategories);
-  for (const category of subcategories) {
-    const request = (await get(
-      `https://b.jw-cdn.org/apis/mediator/v1/categories/${
-        getSettingValue('lang') as string
-      }/${category.key}?detailed=0&clientType=www`,
-    )) as JwVideoCategory;
-    // remoteVideosByCategory.value[category.parentCategory ?? category.key] =
-    //   request.category.media;
-    remoteVideos.value = remoteVideos.value
-      .concat(request.category.media)
-      .reduce((accumulator: MediaItemsMediatorItem[], current) => {
-        const guids = new Set(accumulator.map((item) => item.guid));
-        if (!guids.has(current.guid)) {
-          accumulator.push(current);
-        }
-        return accumulator;
-      }, [])
-      .sort((a, b) => {
-        return (
-          new Date(b.firstPublished).getTime() -
-          new Date(a.firstPublished).getTime()
+  try {
+    if (remoteVideosLoadingProgress.value < 1) {
+      const currentState = useCurrentStateStore();
+      const { getSettingValue } = currentState;
+      const getSubcategories = async (category: string) => {
+        return (await get(
+          `https://b.jw-cdn.org/apis/mediator/v1/categories/${
+            getSettingValue('lang') as string
+          }/${category}?detailed=1&mediaLimit=0&clientType=www`,
+        )) as JwVideoCategory;
+      };
+      const subcategories: {
+        key: string;
+        parentCategory: string;
+      }[] = [{ key: 'LatestVideos', parentCategory: '' }];
+      const subcategoriesRequest = await getSubcategories('VideoOnDemand');
+      console.log('subcategoriesRequest', subcategoriesRequest);
+      const subcategoriesFirstLevel =
+        subcategoriesRequest.category.subcategories.map((s) => s.key);
+      for (const subcategoryFirstLevel of subcategoriesFirstLevel) {
+        subcategories.push(
+          ...(
+            await getSubcategories(subcategoryFirstLevel)
+          ).category.subcategories.map((s) => {
+            return { key: s.key, parentCategory: subcategoryFirstLevel };
+          }),
         );
-      });
+      }
+      console.log('subcategories', subcategories);
+      let index = 0;
+      for (const category of subcategories) {
+        const request = (await get(
+          `https://b.jw-cdn.org/apis/mediator/v1/categories/${
+            getSettingValue('lang') as string
+          }/${category.key}?detailed=0&clientType=www`,
+        )) as JwVideoCategory;
+        // remoteVideosByCategory.value[category.parentCategory ?? category.key] =
+        //   request.category.media;
+        remoteVideos.value = remoteVideos.value
+          .concat(request.category.media)
+          .reduce((accumulator: MediaItemsMediatorItem[], current) => {
+            const guids = new Set(accumulator.map((item) => item.guid));
+            if (!guids.has(current.guid)) {
+              accumulator.push(current);
+            }
+            return accumulator;
+          }, [])
+          .sort((a, b) => {
+            return (
+              new Date(b.firstPublished).getTime() -
+              new Date(a.firstPublished).getTime()
+            );
+          });
+        index++;
+        remoteVideosLoadingProgress.value = index / subcategories.length;
+      }
+    }
+  } catch (error) {
+    console.error(error);
   }
-  // make sure values are unique, based on guid
 };
 
 const remoteVideosFiltered = computed(() => {
-  return (
-    remoteVideoFilter.value?.length > 2
-      ? remoteVideos.value.filter((video) =>
-          video.title
-            .toLowerCase()
-            .includes(remoteVideoFilter.value.toLowerCase()),
-        )
-      : remoteVideos.value
-  )
-    .filter(
+  const useableVideos = ref(
+    remoteVideos.value.filter(
       (v) =>
         remoteVideosIncludeAudioDescription.value ||
         !v.primaryCategory.endsWith('AD'),
-    )
-    .slice(0, 100);
+    ),
+  );
+  if (remoteVideoFilter.value?.length > 2)
+    useableVideos.value = useableVideos.value.filter((video) =>
+      video.title.toLowerCase().includes(remoteVideoFilter.value.toLowerCase()),
+    );
+  return useableVideos.value.slice(0, 50);
 });
 
 onMounted(() => {
   document.title = 'Meeting Media Manager';
-  console.log(currentSettings.value);
   if (!currentSettings.value) navigateToCongregationSelector();
 });
 </script>