feat: stream video upload progress (#210)

* working on the streaming progress

* connected video upload progress from frontend to server to bucket

* cleanup

* cleanup

* added the progress bar

* finished the supabase upload-progress using supabse realtime

* use only progress bar

* updating the helpertext

* Merge branch 'upload-progress' of https://github.com/rotimi-best/classroomio into upload-progress

* updated the supabase import

* Update LocalVideo.svelte

* update lock file

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/backend/src/routes/uploadVideo.js

@@ -13,7 +13,8 @@ const {
   // GetObjectCommand,
 } = require('@aws-sdk/client-s3');
 
-// const { getSupabase } = require('../utils/supabase');
+const { getSupabase } = require('../utils/supabase');
+
 const genUniqueId = require('../utils/genUniqueId');
 const upload = require('../utils/upload');
 
@@ -36,7 +37,7 @@ const S3 = new S3Client({
   }
 });
 
-// const supabase = getSupabase();
+const supabase = getSupabase();
 
 // const museUploadQueue = new Queue('video', process.env.REDIS_API_KEY, {
 //   redis: { tls: { rejectUnauthorized: false } },
@@ -96,7 +97,18 @@ router.post('/', upload.single('videoFile'), async (req, res) => {
     });
 
     parallelUploads3.on('httpUploadProgress', (progress) => {
-      console.log(progress);
+      const uploadProgress = Math.round(((progress.loaded / progress.total) * 100) / 2);
+      console.log({ uploadProgress });
+      const channel = supabase.channel('upload-progress');
+      channel.subscribe((status) => {
+        if (status === 'SUBSCRIBED') {
+          channel.send({
+            type: 'broadcast',
+            event: lessonId,
+            payload: uploadProgress
+          });
+        }
+      });
     });
 
     await parallelUploads3.done();

apps/backend/src/utils/supabase.js

@@ -9,22 +9,19 @@ const getSupabase = (config) => {
 
   config = {
     supabaseConfig: {
-      bucketPath:
-        'https://koxqonvbkeakwvmdegcf.supabase.in/storage/v1/object/sign/',
+      bucketPath: 'https://koxqonvbkeakwvmdegcf.supabase.in/storage/v1/object/sign/',
       url: PUBLIC_SUPABASE_URL || '',
-      anonKey: PUBLIC_SUPABASE_ANON_KEY || '',
-    },
+      anonKey: PUBLIC_SUPABASE_ANON_KEY || ''
+    }
   };
 
-  supabase = createClient(
-    config.supabaseConfig.url,
-    config.supabaseConfig.anonKey,
-    { auth: { persistSession: false } }
-  );
+  supabase = createClient(config.supabaseConfig.url, config.supabaseConfig.anonKey, {
+    auth: { persistSession: false }
+  });
 
   return supabase;
 };
 
 module.exports = {
-  getSupabase,
+  getSupabase
 };