🐛 Fix subscriptions import

.gitignore

@@ -47,6 +47,7 @@ tests/cypress/downloads
 Dockerfile.nodejs-mongodb
 .vscode/.ropeproject/
 server/config.json
+server/data
 **/predist
 client/buildMetadata.json
 ~

client/components/buttons/SubscribeButton.vue

@@ -96,6 +96,11 @@ export default defineComponent({
           .then(response => {
             if (response.isSubscribed) {
               isSubscribed.value = true;
+              messagesStore.createMessage({
+                type: 'success',
+                title: 'Subscribed',
+                message: `Successfully subscribed. Fetching new videos can take some time.`
+              });
             }
             disabled.value = false;
             if (props.small) {
@@ -176,7 +181,9 @@ export default defineComponent({
     cursor: pointer;
     user-select: none;
     opacity: 0.8;
-    transition: transform 300ms $overshoot-easing, background-color 300ms $intro-easing;
+    transition:
+      transform 300ms $overshoot-easing,
+      background-color 300ms $intro-easing;
     border: solid 2px transparent;
     box-sizing: border-box;
 
@@ -233,7 +240,9 @@ export default defineComponent({
       cursor: pointer;
       line-height: 12px;
       opacity: 1;
-      transition: opacity 300ms $intro-easing, transform 300ms $intro-easing;
+      transition:
+        opacity 300ms $intro-easing,
+        transform 300ms $intro-easing;
 
       &:focus {
         transform: scale(0.9);

client/components/form/FileButton.vue

@@ -1,21 +1,24 @@
 <template>
-  <label class="button">
+  <label class="button-container">
+    <slot />
     <div v-ripple class="label">{{ label }}</div>
-    <input type="file" class="file-button" multiple="false" @change="$emit('change', $event)" />
+    <input type="file" class="file-button" multiple="false" @change.stop="$emit('change', $event)" :accept="accept" />
   </label>
 </template>
 
 <script lang="ts">
 export default defineComponent({
   name: 'FileButton',
   props: {
-    label: String
-  }
+    label: String,
+    accept: String
+  },
+  emits: {'change': null}
 });
 </script>
 
 <style lang="scss" scoped>
-.label {
+.button-container {
   font-size: 1rem;
   border-style: none;
   width: calc(100% - 40px);
@@ -30,14 +33,19 @@ export default defineComponent({
   color: var(--title-color);
   box-shadow: $low-shadow;
   transition: box-shadow 300ms $intro-easing;
-  display: inline-block;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  justify-items: center;
+  gap: 10px;
 
   &:hover {
     box-shadow: $max-shadow;
   }
 }
 
-.button > input[type='file'] {
+.button-container > input[type='file'] {
   display: none;
 }
 </style>

client/components/popup/SubscriptionImport.vue → client/components/popup/SubscriptionIO.vue

@@ -13,25 +13,9 @@
       </h1>
       <div class="pages-container" :class="{ 'page-2': page2 }">
         <div class="page-container page-1-container">
-          <h2><VTIcon name="mdi:youtube" />Import from Youtube</h2>
-          <ol>
-            <li class="links">
-              Go to
-              <a target="_blank" rel="noreferrer noopener" :href="youtubeSubscriptionUrl">{{
-                youtubeSubscriptionUrl
-              }}</a
-              >.
-            </li>
-            <li>You may be asked to sign in.</li>
-            <li>
-              Request a takeout for youtube data (you can customize the options to limit only to
-              subscriptions)
-            </li>
-            <li>Upload the file "subscriptions.csv" here.</li>
-          </ol>
-          <FileButton :label="'Upload CSV'" @change="onYTTakeoutFileChange" />
-          <h2><VTIcon name="mdi:xml" />Import from Invidious / OPML</h2>
-          <FileButton :label="'Upload OPML'" @change="onOPMLFileChange" />
+          <FileButton :label="'Import'" @change="onImportFileChange">
+            <VTIcon name="mdi:import" />
+          </FileButton>
         </div>
         <div
           v-if="subscriptionsToImport && subscriptionsToImport.length > 0"
@@ -75,8 +59,9 @@
           <h3 v-if="successfulMergedImports.length > 0">
             {{ successfulMergedImports.length }} successful import{{
               successfulMergedImports.length !== 1 ? 's' : ''
-            }}
+            }}.
           </h3>
+          <p>New videos will be available after the next sync.</p>
           <div v-if="successfulMergedImports.length > 0" class="import-area">
             <div class="import-list">
               <p v-for="subscription in successfulMergedImports" :key="subscription.authorId">
@@ -118,6 +103,21 @@
           <p class="loading-text">This can take a while</p>
         </div>
       </div>
+      <h1 v-if="!subscriptionsToImport">
+        {{ loading ? 'Exporting subscriptions' : 'Export subscriptions' }}
+      </h1>
+      <div v-if="!subscriptionsToImport" class="pages-container" :class="{ 'page-2': page2 }">
+        <div class="export-buttons">
+          <BadgeButton @change="exportVT"> <VTIcon name="mdi:play" /> ViewTube </BadgeButton>
+          <BadgeButton @change="exportOPML"
+            ><VTIcon name="mdi:xml" /> Invidious / OPML
+          </BadgeButton>
+          <BadgeButton @change="exportPiped"> <VTIcon name="mdi:pipe" /> Piped </BadgeButton>
+          <BadgeButton @change="exportNewPipe"
+            ><VTIcon name="mdi:pipe-valve" /> NewPipe</BadgeButton
+          >
+        </div>
+      </div>
     </div>
     <div class="settings-overlay popup-overlay" @click.stop="onTryClosePopup" />
   </div>
@@ -145,6 +145,7 @@ export default defineComponent({
     FileButton,
     Spinner
   },
+  emits: ['done', 'close'],
   setup(_, { emit }) {
     const messagesStore = useMessagesStore();
     const { apiUrl } = useApiUrl();
@@ -213,11 +214,59 @@ export default defineComponent({
       }
     };
 
+    const onImportFileChange = (e: any) => {
+      const extension = e.target.files[0].name.split('.').pop();
+      switch (extension) {
+        case 'csv':
+          onYTTakeoutFileChange(e);
+          break;
+        case 'json':
+          onJSONPipedFileChange(e);
+          break;
+        case 'opml':
+        case 'xml':
+        default:
+          onOPMLFileChange(e);
+          break;
+      }
+    };
+
+    const onJSONPipedFileChange = (e: any) => {
+      const fileReader = new FileReader();
+      fileReader.onload = () => {
+        if (e.target.files[0].name.includes('.json')) {
+          subscriptionsToImport.value = convertJSONPipedToInternal(fileReader.result as string);
+        }
+        if (subscriptionsToImport.value === undefined) {
+          messagesStore.createMessage({
+            type: 'error',
+            title: 'Invalid or Empty JSON',
+            message: 'Please check your file'
+          });
+        } else {
+          subscriptionsToImport.value
+            .sort((a: { author: string }, b: { author: string }) =>
+              a.author.localeCompare(b.author)
+            )
+            .map(({ author, authorId }) => ({
+              author,
+              authorId,
+              selected: true
+            }));
+
+          page2.value = true;
+        }
+        loading.value = false;
+      };
+      loading.value = true;
+      fileReader.readAsText(e.target.files[0]);
+    };
+
     const onYTTakeoutFileChange = (e: any) => {
       const fileReader = new FileReader();
       fileReader.onload = () => {
         if (e.target.files[0].name.includes('.csv')) {
-          // subscriptionsToImport.value = convertFromCSVToJson(fileReader.result as string);
+          subscriptionsToImport.value = convertFromCSVToJson(fileReader.result as string);
         }
         if (subscriptionsToImport.value === undefined) {
           messagesStore.createMessage({
@@ -238,7 +287,9 @@ export default defineComponent({
 
           page2.value = true;
         }
+        loading.value = false;
       };
+      loading.value = true;
       fileReader.readAsText(e.target.files[0]);
     };
 
@@ -269,7 +320,13 @@ export default defineComponent({
       fileReader.readAsText(e.target.files[0]);
     };
 
+    const exportVT = () => {};
+    const exportOPML = () => {};
+    const exportPiped = () => {};
+    const exportNewPipe = () => {};
+
     const channelCheckBoxChanged = (newValue: any, channelId: any) => {
+      console.log(subscriptionsToImport.value);
       subscriptionsToImport.value.find(
         (e: { authorId: string }) => e.authorId === channelId
       ).selected = newValue;
@@ -290,7 +347,12 @@ export default defineComponent({
     const importSelected = () => {
       loading.value = true;
       const subscriptions = selectedChannels.value;
-      const subscriptionIds = subscriptions.map(e => e.authorId);
+      const subscriptionIds = subscriptions.map(e => {
+        return {
+          channelId: e.authorId,
+          name: e.author
+        };
+      });
       vtFetch(`${apiUrl.value}user/subscriptions/multiple`, {
         method: 'POST',
         body: {
@@ -318,7 +380,12 @@ export default defineComponent({
       successfulMergedImports,
       existingMergedImports,
       failedMergedImports,
+      exportVT,
+      exportOPML,
+      exportPiped,
+      exportNewPipe,
       onTryClosePopup,
+      onImportFileChange,
       onYTTakeoutFileChange,
       onOPMLFileChange,
       channelCheckBoxChanged,
@@ -333,6 +400,15 @@ export default defineComponent({
 <style lang="scss">
 .subscriptions-import {
   .subscriptions-import-container {
+    .export-buttons {
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      a {
+        margin-left: 10px;
+        margin-right: 10px;
+      }
+    }
     .pages-container {
       left: 0;
       top: 0;
@@ -391,7 +467,9 @@ export default defineComponent({
         user-select: none;
         opacity: 0;
         transform: translateX(10px);
-        transition: transform 300ms $overshoot-easing, opacity 300ms $intro-easing;
+        transition:
+          transform 300ms $overshoot-easing,
+          opacity 300ms $intro-easing;
 
         .list-actions {
           display: flex;

client/pages/subscriptions/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import SubscriptionImport from '@/components/popup/SubscriptionImport.vue';
 import VideoEntry from '@/components/list/VideoEntry.vue';
 import Spinner from '@/components/Spinner.vue';
 import SectionTitle from '@/components/SectionTitle.vue';
@@ -21,7 +20,6 @@ const vapidKey = config.public.vapidKey;
 const notificationsEnabled = ref(false);
 const notificationsBtnDisabled = ref(false);
 const notificationsSupported = ref(true);
-const subscriptionImportOpen = ref(false);
 
 const currentPage = computed(() => {
   if (route.query.page) {
@@ -80,12 +78,6 @@ const getOrderedVideoSections = (): Array<any> => {
   return orderedArray;
 };
 
-const closeSubscriptionImport = () => {
-  subscriptionImportOpen.value = false;
-};
-const onSubscriptionImportDone = () => {
-  refresh();
-};
 const subscribeToNotifications = (val: any) => {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.getRegistrations().then(registrations => {
@@ -180,6 +172,10 @@ watch(
     refresh();
   }
 );
+
+const nextRefresh = computed(() => {
+  return 60 - Math.round((Date.now() % 3.6e6) / 6e4);
+});
 </script>
 
 <template>
@@ -193,18 +189,11 @@ watch(
           <p v-if="lastRefreshTime">
             Last refresh: {{ new Date(lastRefreshTime).toLocaleString('en-US') }}
           </p>
+          <p>Next refresh in {{ nextRefresh }} minute{{ nextRefresh === 1 ? '' : 's' }}</p>
         </div>
         <div class="actions">
-          <BadgeButton
-            class="import-subscriptions-btn"
-            :click="() => (subscriptionImportOpen = true)"
-          >
-            <VTIcon name="mdi:import" />
-            <p>Import subscriptions</p>
-          </BadgeButton>
           <BadgeButton
             class="manage-subscriptions-btn"
-            :disabled="hasNoSubscriptions"
             :href="'/subscriptions/manage'"
             :internal-link="true"
           >
@@ -222,9 +211,12 @@ watch(
         </div>
       </div>
     </div>
-    <div v-if="hasNoSubscriptions && !pending" class="no-subscriptions">
+    <div v-if="hasNoSubscriptions && !pending" class="no-subscriptions links">
       <VTIcon name="mdi:youtube-subscription" />
-      <p>No subscriptions yet. Subscribe to a channel to see their latest uploads.</p>
+      <p>
+        No subscriptions yet. Subscribe to a channel to see their latest uploads or import existing
+        ones on the <nuxt-link to="/subscriptions/manage">manage</nuxt-link> page.
+      </p>
     </div>
     <div class="subscription-videos-container">
       <div
@@ -249,16 +241,6 @@ watch(
     >
       <Pagination :current-page="currentPage" :page-count="pageCount" />
     </div>
-
-    <Teleport to="body">
-      <transition name="fade-down">
-        <SubscriptionImport
-          v-if="subscriptionImportOpen"
-          @close="closeSubscriptionImport"
-          @done="onSubscriptionImportDone"
-        />
-      </transition>
-    </Teleport>
   </div>
 </template>