🚀🍞v0.5.3-alpha release

ItsRiprod · Jul 9, 2024 · 9fdc252 · 9fdc252
1 parent 5b83168
commit 9fdc252
Show file tree

Hide file tree

Showing 86 changed files with 1,100 additions and 679 deletions.
diff --git a/.gitignore b/.gitignore
@@ -38,4 +38,5 @@ tsconfig.tsbuildinfo
 /AppExamples/weather/node_modules
 /AppExamples/mediawincs
 /AppExamples/mediawin/node_modules
-/AppExamples/mediawin/builds
+/AppExamples/mediawin/builds
+/AppExamples/spotify/builds
diff --git a/AppExamples/spotify/builds/index.js b/AppExamples/spotify/builds/index.js
@@ -13928,17 +13928,32 @@ async function stop() {
   spotify = null;
 }
 async function onMessageFromMain(event, ...args) {
-  spotify.sendLog(`SPOTIFY: Received event ${event}`);
+  spotify.sendLog(`Received event ${event}`);
   try {
     switch (event) {
       case "message":
         break;
       case "data":
         if (args[0] == null || !args[0].Spotify_API_Id) {
-          spotify.sendDataToMainFn("get", "auth", [
-            "Spotify_API_Id",
-            "Spotify_Client_Secret"
-          ]);
+          spotify.sendDataToMainFn(
+            "get",
+            "auth",
+            {
+              "Spotify_API_Id": {
+                "value": "",
+                "label": "Spotify Client ID",
+                "instructions": 'You can get your Spotify Client ID from the <a href="https://developer.spotify.com/dashboard" target="_blank" style="color: lightblue;">Spotify Developer Dashboard</a>. You must create a new application and then under "Client ID" Copy and paste that into this field.'
+              },
+              "Spotify_Client_Secret": {
+                "value": "",
+                "label": "Spotify Client Secret",
+                "instructions": 'You can get your Spotify Client Secret from the <a href="https://developer.spotify.com/dashboard" target="_blank" style="color: lightblue;">Spotify Developer Dashboard</a>. You must create a new application and then under "View Client Secret", Copy and paste that into this field.'
+              },
+              "Spotify_Redirect_URI": {
+                "instructions": 'Set the Spotify Redirect URI to http://localhost:8888/callback/spotify and then click "Save".\n This ensures you can authenticate your account to this application'
+              }
+            }
+          );
         } else if (args[0].Spotify_Refresh_Token) {
           spotify.sendLog("Refreshing token...");
           spotify.refresh_token = args[0].Spotify_Refresh_Token;

diff --git a/AppExamples/spotify/index.js b/AppExamples/spotify/index.js
@@ -9,9 +9,9 @@ async function start({ sendDataToMain }) {
   spotify.sendLog('Successfully Started!')
 }
 async function stop() {
-  
+
   spotify.sendLog('Successfully Stopped!')
-  
+
   spotify = null
 }
 
@@ -28,10 +28,22 @@ async function onMessageFromMain(event, ...args) {
         // Check if there is data
         if (args[0] == null || !args[0].Spotify_API_Id) {
           // If there is no environment data, request the environment data
-          spotify.sendDataToMainFn('get', 'auth', [
-            'Spotify_API_Id',
-            'Spotify_Client_Secret'
-          ])
+          spotify.sendDataToMainFn('get', 'auth', {
+            'Spotify_API_Id': {
+              'value': '',
+              'label': 'Spotify Client ID',
+              'instructions': 'You can get your Spotify Client ID from the <a href="https://developer.spotify.com/dashboard" target="_blank" style="color: lightblue;">Spotify Developer Dashboard</a>. You must create a new application and then under "Client ID" Copy and paste that into this field.',
+            },
+            'Spotify_Client_Secret': {
+              'value': '',
+              'label': 'Spotify Client Secret',
+              'instructions': 'You can get your Spotify Client Secret from the <a href="https://developer.spotify.com/dashboard" target="_blank" style="color: lightblue;">Spotify Developer Dashboard</a>. You must create a new application and then under "View Client Secret", Copy and paste that into this field.',
+            },
+            'Spotify_Redirect_URI': {
+              'instructions': 'Set the Spotify Redirect URI to http://localhost:8888/callback/spotify and then click "Save".\n This ensures you can authenticate your account to this application',
+            }
+          }
+          )
         } else if (args[0].Spotify_Refresh_Token) {
           spotify.sendLog('Refreshing token...')
           spotify.refresh_token = args[0].Spotify_Refresh_Token
@@ -161,19 +173,19 @@ const handleSet = async (...args) => {
     case 'shuffle':
       response = await spotify.shuffle(args[1])
       break
-      case 'update_setting':
-        if (args[1] != null) {
-          const {setting, value} = args[1];
-          spotify.settings[setting].value = value
-  
-          spotify.sendLog('New Settings:' + spotify.settings)
-          response = { settings: spotify.settings }
-          spotify.sendDataToMainFn('add', response)
-        } else {
-          spotify.sendLog('No args provided', args[1])
-          response = 'No args provided'
-        }
-        break
+    case 'update_setting':
+      if (args[1] != null) {
+        const { setting, value } = args[1];
+        spotify.settings[setting].value = value
+
+        spotify.sendLog('New Settings:' + spotify.settings)
+        response = { settings: spotify.settings }
+        spotify.sendDataToMainFn('add', response)
+      } else {
+        spotify.sendLog('No args provided', args[1])
+        response = 'No args provided'
+      }
+      break
   }
   spotify.sendDataToMainFn('data', response)
 }

diff --git a/AppExamples/weather/builds/index.js b/AppExamples/weather/builds/index.js
@@ -13649,6 +13649,23 @@ async function onMessageFromMain(event, ...args) {
       case "data":
         if (args[0] == null) {
           sendDataToMainFn("set", storedData);
+          sendDataToMainFn("get", "auth", ["weather_key", "location_key"]);
+          spotify.sendDataToMainFn(
+            "get",
+            "auth",
+            {
+              "weather_key": {
+                "value": "",
+                "label": "API KEY",
+                "instructions": 'You can get your Weather Key from the <a href="https://developer.accuweather.com/user/me/apps" target="_blank" style="color: lightblue;">Accuweather Developer Dashboard</a>. You must create a new application and then under "API Key" Copy and paste that into this field.'
+              },
+              "location_key": {
+                "value": "",
+                "label": "LOCATION KEY",
+                "instructions": 'Go to <a href="https://developer.accuweather.com/accuweather-locations-api/apis/get/locations/v1/search" target="_blank" style="color: lightblue;">Accuweather API locations search</a>. Input the API Key into "apikey" and the location you want to get the weather for into "q". Then click "Send this request". Copy the "Key" from the response and paste it into this field.'
+              }
+            }
+          );
         } else if (args[0].weather_key != null) {
           storedData.weather_key = args[0].weather_key, storedData.location_key = args[0].location_key;
           storedData.forecast_data = args[0].forecast_data || null;
@@ -13657,7 +13674,7 @@ async function onMessageFromMain(event, ...args) {
         } else {
           sendDataToMainFn("get", "auth", ["weather_key", "location_key"]);
         }
-        if (args[0].settings) {
+        if (args[0]?.settings) {
           storedData = args[0];
         } else {
           const settings2 = { settings: storedData.settings };

diff --git a/AppExamples/weather/index.js b/AppExamples/weather/index.js
@@ -102,6 +102,19 @@ async function onMessageFromMain(event, ...args) {
         if (args[0] == null) {
           sendDataToMainFn('set', storedData)
           sendDataToMainFn('get', 'auth', ['weather_key', 'location_key'])
+          spotify.sendDataToMainFn('get', 'auth', {
+            'weather_key': {
+              'value': '',
+              'label': 'API KEY',
+              'instructions': 'You can get your Weather Key from the <a href="https://developer.accuweather.com/user/me/apps" target="_blank" style="color: lightblue;">Accuweather Developer Dashboard</a>. You must create a new application and then under "API Key" Copy and paste that into this field.',
+            },
+            'location_key': {
+              'value': '',
+              'label': 'LOCATION KEY',
+              'instructions': 'Go to <a href="https://developer.accuweather.com/accuweather-locations-api/apis/get/locations/v1/search" target="_blank" style="color: lightblue;">Accuweather API locations search</a>. Input the API Key into \"apikey\" and the location you want to get the weather for into \"q\". Then click \"Send this request\". Copy the \"Key\" from the response and paste it into this field.',
+            }
+          }
+          )
         } else if (args[0].weather_key != null) {
 
           storedData.weather_key = args[0].weather_key,
@@ -115,7 +128,7 @@ async function onMessageFromMain(event, ...args) {
           sendDataToMainFn('get', 'auth', ['weather_key', 'location_key'])
         }
 
-        if (args[0].settings) {
+        if (args[0]?.settings) {
           storedData = args[0]
 
         } else {

diff --git a/DeskThing/README.md b/DeskThing/README.md
@@ -1,30 +1,12 @@
-# React + TypeScript + Vite
+# DeskThing Client Server
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
+To build:
+```sh
+npm run build
+```
+To develop:
+```sh
+npm run dev
 ```
 
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+Using Tailwindcss, React, Typescript, and Vite
diff --git a/DeskThing/src/components/Footer/Footer.css b/DeskThing/src/components/Footer/Footer.css
@@ -3,57 +3,11 @@
     background: conic-gradient(from 0turn at 10% -5%,var(--bg-tinted-highlight) 26%, var(--color-albumColor) 50%);
     background-color: var(--bg-highlight);
   }
-
-  .getSongInfo {
-    height: 100%;
-    max-width: 163px;
-    min-width: 163px;
-    display: flex;
-    padding: 0px;
-    margin: 0px;
-    margin-top: -3px;
-  }
-
-  .getSongInfo .albumArt {
-    height: 100%;
-    overflow: hidden;
-    border-radius: 0px 15px 15px 0px;
-  }
-
-  /*
-  
-  ----------------------- Song Information
-  
-  */
-  .songInformation {
-    padding-top: 5px;
-  } 
   .songTitle {
     font-size: 35px;
     overflow: hidden;
     max-height: 50px;
     max-width:640px;
     text-wrap: nowrap;
     margin: auto;
-  }
-  .progressBar_container {
-    margin:auto;
-    width: 90%;
-    height: 30px;
-    background-color: var(--bg-tinted-highlight);
-    overflow:hidden;
-    border-radius: 15px;
-  }
-  .progressBar_progress {
-    position:static;
-    bottom: 0;
-    height: 30px;
-    background-color: var(--text-brightAccent);
-  }
-  .progressBar_timer {
-    padding: 0;
-    margin: 0;
-    color: var(--text-base);
-    transform: translate(0px, -30px);
-    font-weight:bolder;
   }
diff --git a/DeskThing/src/components/Footer/Footer.tsx b/DeskThing/src/components/Footer/Footer.tsx
@@ -10,8 +10,10 @@ import {
   IconShuffle,
   IconRepeat,
   IconRepeatOne,
-} from '../todothingUIcomponents';
-import { IconAlbum } from '../todothingUIcomponents';
+  IconAlbum,
+  IconSkipForward15,
+  IconSkipBack15,
+} from '../icons';
 import getBackgroundColor, { findContrastColor } from '../../helpers/ColorExtractor';
 
 
@@ -202,13 +204,13 @@ const Footer: React.FC = () => {
               className="text-green-500"
               onClick={() => handleSendSet(AUDIO_REQUESTS.PREVIOUS, songData.id)}
             >
-              <IconSkipBack />
+              {songData?.can_skip ? <IconSkipBack iconSize={48} /> : <IconSkipBack15 iconSize={48} />}
             </button>
             <button className="text-green-500" onClick={handlePlayPause}>
-              {!play ? <IconPlay /> : <IconPause />}
+              {!play ? <IconPlay iconSize={48} /> : <IconPause iconSize={48} />}
             </button>
             <button className="text-green-500" onClick={() => handleSendSet(AUDIO_REQUESTS.NEXT, songData.id)}>
-              {songData?.can_skip ? <IconSkipForward /> : <IconSkipForward />}
+              {songData?.can_skip ? <IconSkipForward iconSize={48} /> : <IconSkipForward15 iconSize={48} />}
             </button>
             <button
               className=""

diff --git a/DeskThing/src/components/Header/Header.css b/DeskThing/src/components/Header/Header.css