Add audio player and update media types

Author: n9lsjr

src/backend/electron.cjs

@@ -27,6 +27,7 @@ const dev = !app.isPackaged
 const { loadHugin, loadWallet } = require('./wallet.cjs')
 const { Hugin } = require('./account.cjs')
 const { Storage } = require('./storage.cjs')
+const { check_if_media } = require('./utils.cjs')
 
 let mainWindow
 
@@ -61,9 +62,9 @@ function createWindow() {
         minWidth: 1100,
         transparent: true,
         webPreferences: {
-            enableRemoteModule: true,
+            enableRemoteModule: false,
             contextIsolation: true,
-            nodeIntegration: true,
+            nodeIntegration: false,
             spellcheck: false,
             devTools: dev,
             preload: path.join(__dirname, 'preload.cjs'),
@@ -303,7 +304,12 @@ const startCheck = async () => {
 }
 
 ipcMain.handle('load-stored-file', async (e, hash, topic) => {
-    return await Storage.load(hash, topic)
+   const file = await Storage.load(hash, topic)
+   const info = Hugin.get_files().find(a => a.hash === hash)
+   if (!info) return
+   const [media ,type] = check_if_media(info.fileName, info.size, true)
+   return [file, type]
+
 })
 
 async function shareScreen(start, conference) {

src/backend/storage.cjs

@@ -3,8 +3,24 @@ const Corestore = require('corestore')
 const Hyperdrive = require('hyperdrive')
 const fs = require('fs');
 const { app } = require('electron');
-const MEDIA_TYPES = ['.png','.jpg','.gif', '.jpeg', '.jfif', '.mp4', '.webm', '.avi', '.webp', '.mov','.wmv', '.mkv', '.mpeg']
-const { hash } = require('hyperdht');
+const MEDIA_TYPES = [
+  { file: '.png', type: 'image' },
+  { file: '.jpg', type: 'image' },
+  { file: '.gif', type: 'image' },
+  { file: '.jfif', type: 'image' },
+  { file: '.jpeg', type: 'image' },
+  { file: '.mp4', type: 'video' },
+  { file: '.webm', type: 'video' },
+  { file: '.avi', type: 'video' },
+  { file: '.webp', type: 'video' },
+  { file: '.mov', type: 'video' },
+  { file: '.wmv', type: 'video' },
+  { file: '.mkv', type: 'video' },
+  { file: '.mpeg', type: 'video' },
+  { file: '.m4a', type: 'audio' },
+  { file: '.mp3', type: 'audio' },
+  { file: '.wav', type: 'audio' },
+];
 const { get_new_peer_keys } = require('./crypto.cjs');
 const userDataDir = app.getPath('userData')
 const Huginbeam = require("huginbeam");
@@ -83,7 +99,8 @@ async save(topic, address, name ,hash, size, time, fileName, path, signature, in
   console.log("****Save file to drive****")
   if (this.saved > this.limit) return
   if (downloaded) {
-    if (!this.check(size, downloaded, fileName)) return
+    const [media, type] = this.check(size, downloaded, fileName)
+    if (!media) return
   }
   this.saved = this.saved + size
   console.log("Saved thus far:", this.saved)
@@ -93,7 +110,6 @@ async save(topic, address, name ,hash, size, time, fileName, path, signature, in
     if (!downloaded) {
      buf = await this.read(path) 
     } else buf = downloaded
-    
     if (!buf) return
     await drive.put(hash, buf, {metadata: {name ,topic, time, size, hash, fileName, address, signature, info, type}})
     Hugin.file_info({fileName, time, size, path, hash, topic})
@@ -113,15 +129,16 @@ async read(path) {
   });
 }
 
+
 check(size, buf, name) {
-  if (buf.length > size) return false
-  if (size > this.limit) return false
+  if (buf.length > size) return false;
+  if (size > this.limit) return false;
   for (const a of MEDIA_TYPES) {
-      if (name.toLowerCase().endsWith(a)) {
-          return true
-      }
+    if (name.toLowerCase().endsWith(a.file)) {
+      return [true, a.type];
+    }
   }
-  return false
+  return [false];
 }
 
 async start_beam(upload, key, file, topic, room) {

src/backend/swarm.cjs

@@ -1,6 +1,6 @@
 const HyperSwarm = require("hyperswarm-hugin");
 
-const {sleep, sanitize_join_swarm_data, sanitize_voice_status_data, sanitize_file_message, sanitize_group_message, check_hash, toHex, randomKey, check_if_image_or_video} = require('./utils.cjs');
+const {sleep, sanitize_join_swarm_data, sanitize_voice_status_data, sanitize_file_message, sanitize_group_message, check_hash, toHex, randomKey, check_if_media} = require('./utils.cjs');
 const {saveGroupMsg, getChannels, loadRoomKeys, removeRoom, printGroup, groupMessageExists, getLatestRoomHashes, roomMessageExists, getGroupReply} = require("./database.cjs")
 const { app,
     ipcMain
@@ -927,8 +927,8 @@ const check_file_message = async (data, topic, address, con) => {
     const active = get_active_topic(topic)
     if (!active) return
     if (data.info === 'file-shared') {
-
-    if (check_if_image_or_video(data.fileName, data.size, true) && Hugin.syncImages.some(a => a === topic)) {
+    const [media, type] = check_if_media(data.fileName, data.size, true)
+    if (media && Hugin.syncImages.some(a => a === topic)) {
         //A file is shared and we have auto sync images on.
         //Request to download the file
         const file = {

src/backend/utils.cjs

@@ -4,7 +4,24 @@ const { Crypto, Keys } = require('kryptokrona-utils')
 const {ipcMain, dialog} = require('electron')
 const crypto = new Crypto()
 const {createReadStream} = require("fs");
-const MEDIA_TYPES = ['.png','.jpg','.gif', '.jpeg', '.jfif', '.mp4', '.webm', '.avi', '.webp', '.mov','.wmv', '.mkv', '.mpeg']
+const MEDIA_TYPES = [
+    { file: '.png', type: 'image' },
+    { file: '.jpg', type: 'image' },
+    { file: '.gif', type: 'image' },
+    { file: '.jfif', type: 'image' },
+    { file: '.jpeg', type: 'image' },
+    { file: '.mp4', type: 'video' },
+    { file: '.webm', type: 'video' },
+    { file: '.avi', type: 'video' },
+    { file: '.webp', type: 'video' },
+    { file: '.mov', type: 'video' },
+    { file: '.wmv', type: 'video' },
+    { file: '.mkv', type: 'video' },
+    { file: '.mpeg', type: 'video' },
+    { file: '.m4a', type: 'audio' },
+    { file: '.mp3', type: 'audio' },
+    { file: '.wav', type: 'audio' },
+  ];
 
 ipcMain.handle('load-file', async (e, path, size) => {
     return await load_file(path, size)
@@ -20,21 +37,21 @@ ipcMain.handle('select-directory', () => {
 
 
 //Check if it is an image or video with allowed type
-function check_if_image_or_video(path, size, check = false) {
+function check_if_media(path, size, check = false) {
     if (path === undefined && !check) return false
-    if (size >= 50000000) return false
-    const types = MEDIA_TYPES
-    for (a in types) {
-        if (path.toLowerCase().endsWith(types[a])) {
-            return true
+    if (size >= 10000000) return false
+        for (const a of MEDIA_TYPES) {
+          if (path.toLowerCase().endsWith(a.file)) {
+            return [true, a.type];
+          }
         }
-    }
-    return false
+        return [false];
 }
 
 async function load_file(path, size) {
     let imgArray = []
-    if (check_if_image_or_video(path, size)) {
+    const [media, type] = check_if_media(path, size)
+    if (media) {
         //Read the file as an image
         return new Promise((resolve, reject) => {
             try {
@@ -44,18 +61,18 @@ async function load_file(path, size) {
                     imgArray.push(data)
                 })
                 stream.on('error', (data) => {
-                    return "File not found"
+                    return ["File not found"]
                 })
 
                 stream.on('end', () => {
-                    resolve(Buffer.concat(imgArray))
+                    resolve([Buffer.concat(imgArray), type])
                 })
             } catch {
-                return "File not found"
+                return ["File not found"]
             }
         })
     } else {
-        return "File"
+        return ["File"]
     }    
 }
 
@@ -398,4 +415,4 @@ const sanitize_join_swarm_data = (data) => {
 
 
 
-module.exports = {sleep, check_hash, trimExtra, fromHex, nonceFromTimestamp, randomKey, hexToUint, toHex, parse_call, sanitize_join_swarm_data, sanitize_voice_status_data, hash, sanitize_pm_message, sanitize_file_message, sanitize_group_message, check_if_image_or_video, MEDIA_TYPES}
+module.exports = {sleep, check_hash, trimExtra, fromHex, nonceFromTimestamp, randomKey, hexToUint, toHex, parse_call, sanitize_join_swarm_data, sanitize_voice_status_data, hash, sanitize_pm_message, sanitize_file_message, sanitize_group_message, check_if_media, MEDIA_TYPES}

src/lib/components/chat/AudioPlayer.svelte

@@ -0,0 +1,13 @@
+  
+  <script>
+  export let src
+  
+  </script>
+  
+  <div>
+      <audio
+      {src}
+        controls>
+          <track />
+      </audio>
+  </div>

src/lib/components/chat/DownloadFile.svelte

@@ -7,25 +7,29 @@
     import { groups, user } from '$lib/stores/user.js'
     import Progress from "$lib/components/chat/Progress.svelte"
     import { sleep } from "$lib/utils/utils"
+import AudioPlayer from "./AudioPlayer.svelte"
 
     export let file
     export let group = false
     export let rtc = false
+
     
-    let video = false
-    let videoTypes = ['.mp4', '.webm', '.avi', '.mov','.wmv', '.mkv', '.mpeg']
     let downloadDone = false
     let downloading = false
-    let thisFile
     let clicked = false
     let downloaders = []
-    onMount(() => {
-        if (group) return
-        if (videoTypes.some(a => file.fileName.endsWith(a) && file.size < 50000000))
-        {
-            video = true
-            return
-        }
+    
+    let video = false
+    let audio = false
+    let image = false
+    let data
+
+    const NOT_FOUND = "File not found"
+    const OTHER = "File"
+
+
+    onMount(async () => {
+        await loadFile(file)
     })
 
    $: {
@@ -35,16 +39,26 @@
    
 
     $: if (downloadDone) {
-         if (!video) awaitLoad(file)
+        awaitLoad(file)
     }
 
     async function awaitLoad(file) {
-        await sleep(200)
-        loadFile(file)
+        await sleep(100)
+        await loadFile(file)
     }
 
     $: if (file?.saved) {
-         if (!video) loadFile(file)
+        awaitLoad(file)   
+    }
+
+    const checkType = (type) => {
+        switch (type){
+            case 'audio': audio = true
+            break;
+            case 'video': video = true
+            break;
+            case 'image': image = true
+        }
     }
     
     const focusImage = (image) => {
@@ -56,14 +70,18 @@
     }
 
     async function loadFile(file) {
-        let arr
+        let load = []
         if (file.path === "storage") {
-            arr = await window.api.loadStoredFile(file.hash, file.topic)
-        } else arr = await window.api.loadFile(file.path, file.size)
-        if (arr === "File" || arr === "File not found") return arr
+            load = await window.api.loadStoredFile(file.hash, file.topic)
+        } else {
+            load = await window.api.loadFile(file.path, file.size)
+        }
+        if (load[0] === OTHER || load[0] === NOT_FOUND) return false
+        const [arr, type] = load
         let blob = new Blob( [ arr ]);
-        let imageUrl = URL.createObjectURL( blob );
-        thisFile = imageUrl
+        data = URL.createObjectURL( blob );
+        console.log("Load ", data)
+        checkType(type)
     }
     
     const downloadFile = (file) => {
@@ -92,29 +110,27 @@
         <div in:fade>
             <Progress file={file} send={false}/>
         </div>
-    <!-- {:else if downloadDone && group}
-        <div style="cursor: pointer" in:fade on:click={() => window.api.openFolder()}>
-            <Progress file={file} send={false}/>
-        </div>
-        <p class="message done">File downloaded!</p> -->
         
     {:else if downloadDone || file?.saved}
         {#if !video}
-                {#if thisFile === "File" && !file?.saved}
+                {#if data === OTHER && !file?.saved}
                 <div in:fade>
                     <Progress file={file} send={false}/>
                 </div>
                 <p class="message done">File downloaded!</p>
-                {:else if thisFile === "File not found"}
-                <p class="message error">File not found</p>
-                {:else}
+                <p>{file.fileName}</p>
+                {:else if data === NOT_FOUND}
+                <p class="message error">{NOT_FOUND}</p>
+                {:else if image}
                 <div style="-webkit-user-drag: none;" on:click={focusImage}>
                     <img
                         in:fade="{{ duration: 150 }}"
-                        src="{thisFile}"
+                        src="{data}"
                         alt=""
                     />
                 </div>
+                {:else if audio}
+                 <AudioPlayer src={data} />
                 {/if}
         {:else if video}
             <VideoPlayer src={file} />