feat: improve user experience of the meeting media page

CHANGELOG.md

@@ -522,7 +522,7 @@ Managing media is now **a breeze**! We've eliminated all those tricky steps like
 
 ### New or improved features
 
-- 🚀 New field which allows selecting the date of the next visit of the circuit overseer; when that week comes, the midweek meeting will change to Tuesday automatically and unnecessary media (concluding songs and CBS media) will be skipped as well
+- 🚀 New field which allows selecting the date of the next visit of the circuit overseer; when that week comes, the midweek meeting will change to Tuesday automatically and unnecessary media (closing songs and CBS media) will be skipped as well
 - Added a loading indicator while files are being renamed
 - Improved app icon for MacOS (thanks [@advenimus](https://github.com/advenimus)!)
 - Improved media prefixes for weekend meetings (reserve `01` for public talk opening song, and `02` for public talk images)

src/components/dialog/DialogRemoteVideo.vue

@@ -62,6 +62,7 @@
                       getBestImageUrl(video.images, 'md'),
                       false,
                       video.title,
+                      section,
                     );
                     open = false;
                   "
@@ -129,12 +130,13 @@ import {
 import { formatTime } from 'src/helpers/mediaPlayback';
 
 // Types
-import type { MediaItemsMediatorItem } from 'src/types';
+import type { MediaItemsMediatorItem, MediaSection } from 'src/types';
 
 // Props
 const props = defineProps<{
   remoteVideos: MediaItemsMediatorItem[];
   remoteVideosLoadingProgress: number;
+  section?: MediaSection;
 }>();
 
 const open = defineModel<boolean>({ default: false });

src/components/form-inputs/DateInput.vue

@@ -21,7 +21,9 @@
     >
       <q-date
         v-model="model"
-        :first-day-of-week="1"
+        :first-day-of-week="
+          friendlyDayToJsDay(currentSettings?.firstDayOfWeek || 7)
+        "
         :locale="dateLocale"
         :options="getDateOptions(options)"
         :rules="rules"
@@ -46,8 +48,14 @@
 <script setup lang="ts">
 import type { SettingsItemOption, SettingsItemRule } from 'src/types';
 
+import { storeToRefs } from 'pinia';
 import { useLocale } from 'src/composables/useLocale';
+import { friendlyDayToJsDay } from 'src/helpers/date';
 import { getDateOptions, getRules } from 'src/helpers/settings';
+import { useCurrentStateStore } from 'src/stores/current-state';
+
+const currentState = useCurrentStateStore();
+const { currentSettings } = storeToRefs(currentState);
 
 const { dateLocale } = useLocale();
 

src/components/header/HeaderCalendar.vue

@@ -1,5 +1,5 @@
 <template>
-  <SongPicker v-model="chooseSong" />
+  <SongPicker v-model="chooseSong" :section="section" />
   <PublicTalkMediaPicker v-model="publicTalkMediaPopup" />
   <q-btn
     :disable="mediaPlaying || !mediaSortForDay"
@@ -17,7 +17,12 @@
       {{ $t('reset-sort-order') }}
     </q-tooltip>
   </q-btn>
-  <q-btn v-if="selectedDate" color="white-transparent" unelevated>
+  <q-btn
+    v-if="selectedDate"
+    color="white-transparent"
+    unelevated
+    @click="section = undefined"
+  >
     <q-icon
       :class="{ 'q-mr-sm': $q.screen.gt.xs }"
       name="mmm-import-media"
@@ -81,7 +86,7 @@
           ]"
           :key="name"
         >
-          <q-item v-close-popup clickable @click="dragging">
+          <q-item v-close-popup clickable @click="openDragAndDropper">
             <q-item-section avatar>
               <q-icon :name="icon" color="primary" />
             </q-item-section>
@@ -170,7 +175,9 @@
         v-model="selectedDate"
         :event-color="getEventDayColor"
         :events="getEventDates()"
-        :first-day-of-week="1"
+        :first-day-of-week="
+          friendlyDayToJsDay(currentSettings?.firstDayOfWeek || 7)
+        "
         :locale="dateLocale"
         :navigation-max-year-month="maxDate()"
         :navigation-min-year-month="minDate()"
@@ -187,6 +194,7 @@
     v-model="remoteVideoPopup"
     :remote-videos="remoteVideos"
     :remote-videos-loading-progress="remoteVideosLoadingProgress"
+    :section="section"
   />
 </template>
 <script setup lang="ts">
@@ -206,15 +214,19 @@ import SongPicker from 'src/components/media/SongPicker.vue';
 
 // Helpers
 import { fetchJson } from 'src/helpers/api';
-import { getLocalDate } from 'src/helpers/date';
+import { friendlyDayToJsDay, getLocalDate } from 'src/helpers/date';
 import { errorCatcher } from 'src/helpers/error-catcher';
 
 // Stores
 import { useCurrentStateStore } from 'src/stores/current-state';
 import { useJwStore } from 'src/stores/jw';
 
 // Types
-import type { JwVideoCategory, MediaItemsMediatorItem } from 'src/types';
+import type {
+  JwVideoCategory,
+  MediaItemsMediatorItem,
+  MediaSection,
+} from 'src/types';
 
 const { formatDate, getDateDiff, getMaxDate, getMinDate } = date;
 
@@ -235,14 +247,19 @@ const {
   selectedDate,
 } = storeToRefs(currentState);
 
+const section = ref<MediaSection | undefined>();
 const publicTalkMediaPopup = ref(false);
 const datePickerActive = ref(false);
 const remoteVideoPopup = ref(false);
 const remoteVideosLoadingProgress = ref(0);
 const remoteVideos = ref<MediaItemsMediatorItem[]>([]);
 
-const dragging = () => {
-  window.dispatchEvent(new Event('draggingSomething'));
+const openDragAndDropper = () => {
+  window.dispatchEvent(
+    new CustomEvent('openDragAndDropper', {
+      detail: { section: section.value },
+    }),
+  );
 };
 
 const mediaSortForDay = computed(() => {
@@ -336,7 +353,8 @@ const maxDate = () => {
 };
 
 const importMenu = ref<QMenu | undefined>();
-const openImportMenu = () => {
+const openImportMenu = (newSection?: MediaSection) => {
+  section.value = newSection;
   importMenu.value?.show();
 };
 
@@ -448,10 +466,15 @@ const getEventDayColor = (eventDate: string) => {
 
 const chooseSong = ref(false);
 
-const openSongPicker = () => {
+const openSongPicker = (newSection?: MediaSection) => {
+  section.value = newSection;
   chooseSong.value = true;
 };
 
-useEventListener(window, 'openSongPicker', openSongPicker);
-useEventListener(window, 'openImportMenu', openImportMenu);
+useEventListener<CustomEvent>(window, 'openSongPicker', (e) =>
+  openSongPicker(e.detail?.section),
+);
+useEventListener<CustomEvent>(window, 'openImportMenu', (e) =>
+  openImportMenu(e.detail?.section),
+);
 </script>

src/components/media/DragAndDropper.vue

@@ -141,7 +141,7 @@
 </template>
 
 <script setup lang="ts">
-import type { DocumentItem } from 'src/types';
+import type { DocumentItem, MediaSection } from 'src/types';
 
 import { useScrollbar } from 'src/composables/useScrollbar';
 import {
@@ -161,6 +161,7 @@ const { barStyle, thumbStyle } = useScrollbar();
 const props = defineProps<{
   currentFile: number;
   jwpubDocuments: DocumentItem[];
+  section?: MediaSection;
   totalFiles: number;
 }>();
 
@@ -181,11 +182,14 @@ const getLocalFiles = async () => {
       if (result && result.filePaths.length > 0) {
         window.dispatchEvent(
           new CustomEvent('localFiles-browsed', {
-            detail: result.filePaths.map((path) => {
-              return {
-                path,
-              };
-            }),
+            detail: {
+              files: result.filePaths.map((path) => {
+                return {
+                  path,
+                };
+              }),
+              section: props.section,
+            },
           }),
         );
       }

src/components/media/PublicTalkMediaPicker.vue

@@ -79,7 +79,7 @@
 </template>
 
 <script setup lang="ts">
-import type { DocumentItem, PublicationInfo } from 'src/types';
+import type { DocumentItem, MediaSection, PublicationInfo } from 'src/types';
 
 import { storeToRefs } from 'pinia';
 import { useScrollbar } from 'src/composables/useScrollbar';
@@ -95,6 +95,10 @@ const { executeQuery, fs, openFileDialog, path } = window.electronApi;
 
 const { barStyle, thumbStyle } = useScrollbar();
 
+const props = defineProps<{
+  section?: MediaSection;
+}>();
+
 const open = defineModel<boolean>({ required: true });
 
 const currentState = useCurrentStateStore();
@@ -147,22 +151,25 @@ const { t } = useI18n();
 
 const addPublicTalkMedia = (publicTalkDocId: DocumentItem) => {
   if (!s34mpDb.value || !publicTalkDocId) return;
-  addJwpubDocumentMediaToFiles(s34mpDb.value, publicTalkDocId).then(
-    (errors) => {
-      if (errors?.length)
-        errors.forEach((e) =>
-          createTemporaryNotification({
-            caption: [e.pub, e.issue, e.track, e.langwritten, e.fileformat]
-              .filter(Boolean)
-              .join('_'),
-            icon: 'mmm-error',
-            message: t('file-not-available'),
-            timeout: 15000,
-            type: 'negative',
-          }),
-        );
-    },
-  );
+  addJwpubDocumentMediaToFiles(
+    s34mpDb.value,
+    publicTalkDocId,
+    props.section,
+  ).then((errors) => {
+    if (errors?.length) {
+      errors.forEach((e) =>
+        createTemporaryNotification({
+          caption: [e.pub, e.issue, e.track, e.langwritten, e.fileformat]
+            .filter(Boolean)
+            .join('_'),
+          icon: 'mmm-error',
+          message: t('file-not-available'),
+          timeout: 15000,
+          type: 'negative',
+        }),
+      );
+    }
+  });
   dismissPopup();
 };
 

src/components/media/SongPicker.vue

@@ -77,7 +77,7 @@
 </template>
 
 <script setup lang="ts">
-import type { MediaLink, PublicationFetcher } from 'src/types';
+import type { MediaLink, MediaSection, PublicationFetcher } from 'src/types';
 
 import { whenever } from '@vueuse/core';
 import { storeToRefs } from 'pinia';
@@ -92,6 +92,10 @@ import { useCurrentStateStore } from 'src/stores/current-state';
 import { useJwStore } from 'src/stores/jw';
 import { computed, ref } from 'vue';
 
+const props = defineProps<{
+  section?: MediaSection;
+}>();
+
 // Define model
 const open = defineModel<boolean>({ required: true });
 
@@ -140,6 +144,7 @@ const addSong = async (songTrack: number) => {
         thumbnail,
         songTrack,
         title.replace(/^\d+\.\s*/, ''),
+        props.section,
       );
     }
   } catch (error) {

src/constants/settings.ts

@@ -52,6 +52,11 @@ export const settingsDefinitions: SettingsItems = {
     rules: ['notEmpty'],
     type: 'list',
   },
+  firstDayOfWeek: {
+    group: 'app',
+    list: 'days',
+    type: 'list',
+  },
   autoStartAtLogin: {
     group: 'app',
     type: 'toggle',
@@ -301,6 +306,7 @@ export const defaultSettings: SettingsValues = {
   enableSubtitles: false,
   excludeFootnotes: false,
   excludeTh: true,
+  firstDayOfWeek: 0,
   hideMediaLogo: false,
   includePrinted: true,
   lang: 'E',

src/helpers/date.ts

@@ -265,9 +265,19 @@ const remainingTimeBeforeMeetingStart = () => {
   }
 };
 
+const friendlyDayToJsDay = (day: number) => {
+  try {
+    return day === 6 ? 0 : parseInt(day.toString()) + 1;
+  } catch (error) {
+    errorCatcher(error);
+    return 0;
+  }
+};
+
 export {
   dateFromString,
   datesAreSame,
+  friendlyDayToJsDay,
   getLocalDate,
   getSpecificWeekday,
   isCoWeek,