diff --git a/.gitignore b/.gitignore
index 3b3d41f..6afeeda 100644
--- a/.gitignore
+++ b/.gitignore
@@ -38,4 +38,5 @@ tsconfig.tsbuildinfo
/AppExamples/weather/node_modules
/AppExamples/mediawincs
/AppExamples/mediawin/node_modules
-/AppExamples/mediawin/builds
\ No newline at end of file
+/AppExamples/mediawin/builds
+/AppExamples/spotify/builds
diff --git a/AppExamples/spotify/builds/index.js b/AppExamples/spotify/builds/index.js
index b436771..c987d4d 100644
--- 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 Spotify Developer Dashboard. 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 Spotify Developer Dashboard. 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
index fac841b..6ebbfe9 100644
--- 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 Spotify Developer Dashboard. 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 Spotify Developer Dashboard. 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
index ca84cf0..73bb5ff 100644
--- 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 Accuweather Developer Dashboard. 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 Accuweather API locations search. 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
index 21f0bf0..8709587 100644
--- 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 Accuweather Developer Dashboard. 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 Accuweather API locations search. 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
index 0d6babe..3675f6b 100644
--- 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
\ No newline at end of file
diff --git a/DeskThing/src/components/Footer/Footer.css b/DeskThing/src/components/Footer/Footer.css
index 97025eb..42f4a56 100644
--- a/DeskThing/src/components/Footer/Footer.css
+++ b/DeskThing/src/components/Footer/Footer.css
@@ -3,31 +3,6 @@
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;
@@ -35,25 +10,4 @@
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;
}
\ No newline at end of file
diff --git a/DeskThing/src/components/Footer/Footer.tsx b/DeskThing/src/components/Footer/Footer.tsx
index 94b67a3..973cd27 100644
--- 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)}
>
-
+ {songData?.can_skip ? : }