v0.7.0 pre pre release

- Added a lot of stuff
- Added client abilities
- Added settings
- Full changelog in release

AppExamples/discord/manifest.json

@@ -1,5 +1,5 @@
 {
-  "id": "developer-app",
+  "id": "discord",
   "isAudioSource": false,
   "isWebApp": true,
   "isLocalApp": false,

AppExamples/mediawin/index.js

@@ -27,7 +27,14 @@ async function onMessageFromMain(event, ...args) {
       case 'data':
 
         if (args[0]?.settings != null) {
-          mediawin.settings = args[0].settings
+          ['refresh_interval', 'output_device', 'change_source'].forEach(key => {
+            if (args[0].settings?.[key]) {
+              spotify.settings[key] = args[0].settings[key];
+            } else {
+              const settings = { settings: spotify.settings };
+              spotify.sendDataToMainFn('add', settings);
+            }
+          });
         } else {
           const settings = { settings: mediawin.settings }
           mediawin.sendDataToMainFn('add', settings)

AppExamples/mediawin/mediawin.js

@@ -23,7 +23,21 @@ class MediaWin {
             "label": "30 seconds"
           },
         ]
-      }
+      },
+      "change_source": {
+        "value": 'true',
+        "label": "Switch Output on Select",
+        "options": [
+          {
+            "value": "true",
+            "label": "Switch"
+          },
+          {
+            "value": "false",
+            "label": "Dont Switch"
+          }
+        ]
+      },
     };
 
     const manifestPath = path.join(__dirname, 'manifest.json');

AppExamples/spotify/builds/index.js

@@ -13606,6 +13606,20 @@ var require_spotify = __commonJS({
                 "label": "Default"
               }
             ]
+          },
+          "change_source": {
+            "value": "true",
+            "label": "Switch Output on Select",
+            "options": [
+              {
+                "value": "true",
+                "label": "Switch"
+              },
+              {
+                "value": "false",
+                "label": "Dont Switch"
+              }
+            ]
           }
         };
         const manifestPath = path.join(__dirname, "manifest.json");
@@ -13897,9 +13911,12 @@ var require_spotify = __commonJS({
               }
               delay *= 1.3;
               await new Promise((resolve) => setTimeout(resolve, delay));
-            } else {
+            } else if (currentPlayback.currently_playing_type === "show") {
               currentPlayback = await this.getCurrentEpisode();
               this.sendLog("Playing a podcast!");
+            } else {
+              this.sendError("No song is playing or detected!");
+              new_id = null;
             }
           } while (new_id === id && Date.now() - startTime < timeout && delay < 1e3);
           if (new_id === id) {
@@ -13944,7 +13961,7 @@ var require_spotify = __commonJS({
             const imageUrl = currentPlayback.item.album.images[0].url;
             songData.thumbnail = await getImageData(imageUrl);
             this.sendDataToMainFn("data", { app: "client", type: "song", data: songData });
-          } else {
+          } else if (currentPlayback.currently_playing_type === "show") {
             songData = {
               album: currentPlayback?.item.show.name,
               artist: currentPlayback?.item.show.publisher,
@@ -14054,7 +14071,7 @@ async function onMessageFromMain(event, ...args) {
           spotify.sendError("No refresh token found, logging in...");
           await spotify.login();
         }
-        ["refresh_interval", "output_device"].forEach((key) => {
+        ["refresh_interval", "output_device", "change_source"].forEach((key) => {
           if (args[0].settings?.[key]) {
             spotify.settings[key] = args[0].settings[key];
           } else {
@@ -14097,7 +14114,6 @@ var handleGet = async (...args) => {
   switch (args[0].toString()) {
     case "song":
       response = await spotify.returnSongData();
-      spotify.transfer();
       break;
     case "manifest":
       response = spotify.manifest;
@@ -14150,6 +14166,9 @@ var handleSet = async (...args) => {
     case "shuffle":
       response = await spotify.shuffle(args[1]);
       break;
+    case "transfer":
+      response = await spotify.transfer();
+      break;
     case "update_setting":
       if (args[1] != null) {
         const { setting, value } = args[1];

AppExamples/spotify/index.js

@@ -71,7 +71,7 @@ async function onMessageFromMain(event, ...args) {
           await spotify.login()
         }
 
-        ['refresh_interval', 'output_device'].forEach(key => {
+        ['refresh_interval', 'output_device', 'change_source'].forEach(key => {
           if (args[0].settings?.[key]) {
             spotify.settings[key] = args[0].settings[key];
           } else {
@@ -122,7 +122,6 @@ const handleGet = async (...args) => {
   switch (args[0].toString()) {
     case 'song':
       response = await spotify.returnSongData()
-      spotify.transfer()
       break
     case 'manifest':
       response = spotify.manifest
@@ -176,6 +175,9 @@ const handleSet = async (...args) => {
     case 'shuffle':
       response = await spotify.shuffle(args[1])
       break
+    case 'transfer':
+      response = await spotify.transfer()
+      break
     case 'update_setting':
       if (args[1] != null) {
         const { setting, value } = args[1];

AppExamples/spotify/spotify.js

@@ -45,6 +45,20 @@ class SpotifyHandler {
           }
         ]
       },
+      "change_source": {
+        "value": 'true',
+        "label": "Switch Output on Select",
+        "options": [
+          {
+            "value": "true",
+            "label": "Switch"
+          },
+          {
+            "value": "false",
+            "label": "Dont Switch"
+          }
+        ]
+      },
     };
 
     const manifestPath = path.join(__dirname, 'manifest.json');
@@ -382,9 +396,12 @@ class SpotifyHandler {
 
           delay *= 1.3 // how long to increase the delay between attempts
           await new Promise((resolve) => setTimeout(resolve, delay))
-        } else {
+        } else if (currentPlayback.currently_playing_type === 'show') {
           currentPlayback = await this.getCurrentEpisode()
           this.sendLog('Playing a podcast!')
+        } else {
+          this.sendError('No song is playing or detected!')
+          new_id = null
         }
       } while (new_id === id && Date.now() - startTime < timeout && delay < 1000)
 
@@ -438,7 +455,7 @@ class SpotifyHandler {
         songData.thumbnail = await getImageData(imageUrl)
 
         this.sendDataToMainFn('data', { app: 'client', type: 'song', data: songData })
-      } else {
+      } else if (currentPlayback.currently_playing_type === 'show') {
         songData = {
           album: currentPlayback?.item.show.name,
           artist: currentPlayback?.item.show.publisher,

DeskThing/src/Layout.tsx

@@ -1,10 +1,18 @@
+import { useEffect } from 'react';
 import './index.css';
+import { convertMouseToTouch } from './utils/simulateTouch';
 
 export default function RootLayout({
   children,
 }) {
+  useEffect(() => {
+    const element = document.getElementById('app');
+    if (element) {
+      convertMouseToTouch(element);
+    }
+  }, []);
   return (
-    <div className={`font-geist`}>
+    <div className={`font-geist`} id='app'>
       {children}
     </div>
   )

DeskThing/src/components/Footer/Footer.tsx

@@ -101,7 +101,7 @@ const Footer: React.FC = () => {
     return () => {
       document.removeEventListener('touchstart', handleTouchOutside);
     };
-  }, []);
+  }, [handleTouchOutside]);
 
   useEffect(() => {
 
@@ -124,7 +124,8 @@ const Footer: React.FC = () => {
   return (
     <div className={`fixed flex max-w-full bottom-0 transition-all ease-out duration-200 bg-zinc-900 ${visible ? 'h-36' : 'h-16'}`}
     ref={playerIslandRef}
-    onTouchStart={handleTouchInside}>
+    onTouchStart={handleTouchInside}
+    onMouseEnter={handleTouchInside}>
         <button className='max-w-40' onTouchStart={handleGetSongData} onClick={handleGetSongData}>
             {imageData && (
               <img

DeskThing/src/helpers/ColorExtractor.ts

@@ -40,7 +40,6 @@ const getBackgroundColor = (base64ImageContent: string): Promise<[number, number
     canvas.remove();
     const cmap = quantize(pixelArray, 5);
     const palette = cmap.palette();
-    console.log(palette)
     return palette[0];
   });
 } catch (e) {

DeskThing/src/helpers/WebSocketService.ts

@@ -166,7 +166,7 @@ export interface App {
 }
 
 export interface Settings {
-  app: {
+  [key: string]: {
     [setting: string]: {
       value: string | number;
       label: string;

DeskThing/src/store/manifestStore.ts

@@ -29,6 +29,11 @@ class ManifestStore {
 
   constructor() {
     this.loadManifest()
+    this.initializeListeners()
+  }
+
+  private async initializeListeners(): Promise<void> {
+
   }
 
   private loadManifest(): void {

DeskThing/src/utils/audioControlActions.ts

@@ -84,14 +84,14 @@ export const Swap = (index: number = 5) => {
 };
 export const VolUp = () => {
     const volume = controlHandler.getSongData().volume
-    if (volume <= 100) {
+    if (volume <= 95) {
         handleSendCommand(AUDIO_REQUESTS.VOLUME, volume + 5)
         controlHandler.updateSongData({ volume: volume + 5 })
     }
 }
 export const VolDown = () => {
     const volume = controlHandler.getSongData().volume
-    if (volume >= 0) {
+    if (volume >= 5) {
         handleSendCommand(AUDIO_REQUESTS.VOLUME, volume - 5)
         controlHandler.updateSongData({ volume: volume - 5 })
     }

DeskThing/src/utils/simulateTouch.ts

@@ -0,0 +1,39 @@
+export function convertMouseToTouch(element) {
+    const mouseToTouch = (type, originalEvent) => {
+      const touchEvent = new TouchEvent(type, {
+        touches: [new Touch({
+          identifier: Date.now(),
+          target: originalEvent.target,
+          clientX: originalEvent.clientX,
+          clientY: originalEvent.clientY,
+          screenX: originalEvent.screenX,
+          screenY: originalEvent.screenY,
+          pageX: originalEvent.pageX,
+          pageY: originalEvent.pageY,
+          radiusX: 1,
+          radiusY: 1,
+          rotationAngle: 0,
+          force: 1,
+        })],
+        targetTouches: [],
+        changedTouches: [],
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+      });
+      originalEvent.target.dispatchEvent(touchEvent);
+      originalEvent.preventDefault();
+    };
+
+    const handleMouseMove = (e) => mouseToTouch('touchmove', e);
+
+    element.addEventListener('mousedown', (e) => {
+      mouseToTouch('touchstart', e);
+      element.addEventListener('mousemove', handleMouseMove);
+    });
+
+    element.addEventListener('mouseup', (e) => {
+      mouseToTouch('touchend', e);
+      element.removeEventListener('mousemove', handleMouseMove);
+    });
+  }

DeskThing/src/views/local/index.tsx

@@ -3,6 +3,7 @@ import './styles.css';
 import React, { useEffect, useState } from 'react';
 import socket, { socketData, song_data } from '../../helpers/WebSocketService';
 import { IconAlbum } from '../../components/icons';
+import { AppStore } from '../../store';
 
 const Local: React.FC = () => {
   const [songData, setSongData] = useState<song_data>();
@@ -55,15 +56,48 @@ const Local: React.FC = () => {
   },);
 
   useEffect(() => {
+    const handleGetSongData = () => {
+      const settings = AppStore.getSettings()
+      const changeSource = settings.local?.change_source?.value == "true"
+      // set playback location
+      if (changeSource) {
+        sendSettingsUpdate('utility', 'playback_location', 'local')
+        if (socket.is_ready()) {
+          const data = { app: 'local', type: 'get', request: 'song' };
+          socket.post(data);
+        }
+      } else {
+        if (socket.is_ready()) {
+          const data = { app: 'utility', type: 'get', request: 'song' };
+          socket.post(data);
+        }
+      }
+      if (socket.is_ready()) {
+        const data = { app: 'utility', type: 'get', request: 'song' };
+        socket.post(data);
+      }
+    };
+
     handleGetSongData();
   }, [])
 
-  const handleGetSongData = () => {
+
+  const sendSettingsUpdate = (app: string, setting: string, value: string) => {
     if (socket.is_ready()) {
-      const data = { app: 'utility', type: 'get', request: 'song' };
+      const data = {
+        app: app,
+        type: 'set',
+        request: 'update_setting',
+        data: {
+          setting: setting,
+          value: value,
+        }
+      };
       socket.post(data);
     }
-  };
+  }
+
+
 
   return (
     <div className={'flex h-screen w-screen overflow-hidden'}>