Release 2.0.99

.github/workflows/release.yml

@@ -97,17 +97,17 @@ jobs:
           token: ${{ secrets.FRONTEND_TOKEN }}
           inputs: '{ "fversion": "${{ steps.get-id.outputs.id}}", "release": "${{ startsWith(github.event.head_commit.message, ''Beta'') && ''No'' || ''Yes'' }}" }'
 
-      - name: 📂 Sync files
-        continue-on-error: true
-        uses: SamKirkland/[email protected]
-        env:
-          FTP_SERVER: ${{ secrets.FTP_SERVER }}
-          FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
-          FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
-          PORT: 22
-          METHOD: sftp
-          LOCAL_DIR: ./ledfx_frontend_v2/
-          REMOTE_DIR: ./preview.ledfx.app/
+      # - name: 📂 Sync files
+      #   continue-on-error: true
+      #   uses: SamKirkland/[email protected]
+      #   env:
+      #     FTP_SERVER: ${{ secrets.FTP_SERVER }}
+      #     FTP_USERNAME: ${{ secrets.FTP_USERNAME }}
+      #     FTP_PASSWORD: ${{ secrets.FTP_PASSWORD }}
+      #     PORT: 22
+      #     METHOD: sftp
+      #     LOCAL_DIR: ./ledfx_frontend_v2/
+      #     REMOTE_DIR: ./preview.ledfx.app/
 
       - name: Build project Hass
         env:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ledfx",
-  "version": "2.0.94",
+  "version": "2.0.99",
   "description": "LedFx v2 - BladeMOD",
   "author": "YeonV aka Blade",
   "private": true,
@@ -26,6 +26,7 @@
     "base32-encode": "1",
     "chart.js": "4.4.2",
     "color": "^4.2.3",
+    "compare-versions": "^6.1.0",
     "conf": "^12.0.0",
     "crypto": "^1.0.1",
     "deep-object-diff": "^1.1.9",
@@ -36,6 +37,7 @@
     "eslint-config-react-app": "7.0.1",
     "immer": "10.0.4",
     "is-electron": "^2.2.2",
+    "jwt-decode": "^4.0.0",
     "notistack": "^3.0.1",
     "oauth-pkce": "0.0.6",
     "prop-types": "^15.8.1",

public/app/handlers.js

@@ -9,14 +9,21 @@ const handlers = async (wind, subprocesses, event, parameters) => {
 
   try {
     switch (parameters.command) {
-      case 'verify_otp':
-        handleVerifyOTP(wind, event, parameters)
-        break
+      case 'close-others':
+        BrowserWindow.getAllWindows().forEach(win => {
+          if (win !== wind) {
+            win.close();
+          }
+        });
+        break;
       case 'get-all-windows':
         const allWIndows = BrowserWindow.getAllWindows()
         console.log('allWIndows', allWIndows)
         wind.webContents.send('fromMain', ['all-windows', allWIndows])
         break
+      case 'verify_otp':
+        handleVerifyOTP(wind, event, parameters)
+        break
       case 'generate-mfa-qr':
         generateMfaQr(event, parameters)
         break

public/electron.js

@@ -41,7 +41,7 @@ const ready = () =>
 
     wind.webContents.setWindowOpenHandler(({ url }) => {
       if (url.includes(' https://accounts.spotify.com/authorize') 
-      // || url.includes('https://strapi.yeonv.com/connect/github?callback')
+      // || url.includes(`${backendUrl}/connect/github?callback`)
       ) {
         shell.openExternal(url)
         // return { action: 'deny' }

src/App.tsx

@@ -80,6 +80,7 @@ export default function App() {
     if (isElectron()) {
       ;(window as any)?.api?.send('toMain', { command: 'get-platform' })
       ;(window as any)?.api?.send('toMain', { command: 'get-core-params' })
+      ;(window as any)?.api?.send('toMain', { command: 'close-others' })
     }
   }, [])
   ;(window as any).api?.receive('fromMain', (parameters: any) => {
@@ -111,7 +112,7 @@ export default function App() {
     if (parameters === 'clear-frontend') {
       deleteFrontendConfig()
     }
-    if (parameters === 'all-windows') {
+    if (parameters[0] === 'all-windows') {
       // console.log('all-windows', parameters[1])
     }
   })

src/components/Bars/BarTop.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
 import { useState, useEffect } from 'react'
 import { useLocation, useNavigate } from 'react-router-dom'
+import { compareVersions } from 'compare-versions'
 import {
   Menu as MenuIcon,
   MoreVert,
@@ -41,6 +42,7 @@ import GlobalActionBar from '../GlobalActionBar'
 import pkg from '../../../package.json'
 import { Ledfx } from '../../api/ledfx'
 import TourHome from '../Tours/TourHome'
+import { backendUrl } from '../../pages/Device/Cloud/CloudComponents'
 
 export const StyledBadge = styled(Badge)(() => ({
   '& .MuiBadge-badge': {
@@ -63,6 +65,7 @@ const LeftButtons = (
 
   if (
     (pathname.split('/').length === 3 && pathname.split('/')[1] === 'device') ||
+    (pathname.split('/').length === 3 && pathname.split('/')[1] === 'graph') ||
     pathname === '/Settings'
   ) {
     if (ios) {
@@ -121,11 +124,13 @@ const Title = (
   updateAvailable: boolean,
   virtuals: any
 ) => {
+  const newVerOnline =
+    compareVersions(latestTag.replace('v', ''), pkg.version) === 1
   if (pathname === '/') {
     return (
       <>
         {`LedFx v${pkg.version}`}
-        {!process.env.MS_STORE && latestTag !== `v${pkg.version}` ? (
+        {!process.env.MS_STORE && newVerOnline ? (
           <Button
             color="error"
             variant="contained"
@@ -270,7 +275,7 @@ const TopBar = () => {
       ) {
         setUpdateAvailable(true)
         if (
-          latestTag !== `v${pkg.version}` &&
+          compareVersions(latestTag.replace('v', ''), pkg.version) === 1 &&
           Date.now() -
             parseInt(
               window.localStorage.getItem('last-update-notification') || '0',
@@ -515,16 +520,16 @@ const TopBar = () => {
                       } else if (
                         window.location.pathname.includes('hassio_ingress')
                       ) {
-                        window.location.href = `https://strapi.yeonv.com/connect/github?callback=${window.location.origin}`
+                        window.location.href = `${backendUrl}/connect/github?callback=${window.location.origin}`
                       } else if (isElectron()) {
                         window.open(
-                          'https://strapi.yeonv.com/connect/github?callback=ledfx://auth/github/',
+                          `${backendUrl}/connect/github?callback=ledfx://auth/github/`,
                           '_blank',
                           'noopener,noreferrer'
                         )
                       } else {
                         window.open(
-                          `https://strapi.yeonv.com/connect/github?callback=${window.location.origin}`,
+                          `${backendUrl}/connect/github?callback=${window.location.origin}`,
                           '_blank',
                           'noopener,noreferrer'
                         )

src/components/Dialogs/SceneDialogs/EditSceneDialog.tsx

@@ -216,13 +216,9 @@ const EditSceneDialog = () => {
   }
 
   useEffect(() => {
-    if (open) {
-      getFullConfig()
-      getLedFxPresets().then(setLedFxPresets)
-      getUserPresets().then(setUserPresets)
-    }
-  }, [open])
-  useEffect(() => {
+    getFullConfig()
+    getLedFxPresets().then(setLedFxPresets)
+    getUserPresets().then(setUserPresets)
     if (open) activateScene(data.name?.toLowerCase().replaceAll(' ', '-'))
   }, [open])
 

src/components/PixelGraph.tsx

@@ -4,7 +4,6 @@
 /* eslint-disable prettier/prettier */
 /* eslint-disable react/require-default-props */
 import { useEffect, useState } from 'react';
-import { Box } from '@mui/material'
 import useStore from '../store/useStore';
 
 const PixelGraph = ({
@@ -14,13 +13,15 @@ const PixelGraph = ({
   active = false,
   intGraphs = false,
   showMatrix = false,
+  fullScreen = false,
 }: {
   virtId: string;
   dummy?: boolean;
   className?: string;
   active?: boolean;
   intGraphs?: boolean;
   showMatrix?: boolean;
+  fullScreen?: boolean;
 }) => {
   const [pixels, setPixels] = useState<any>([]);
 
@@ -75,7 +76,8 @@ const PixelGraph = ({
   return (dummy || tooLessPixels) ? (
     <div
       style={{
-        maxWidth: '520px',
+        maxWidth: fullScreen ? '100vw' : '520px',
+        maxHeight: fullScreen ? 'calc(100vh - 200px)' : 'unset',
         display: 'flex',
         width: '100%',
         borderRadius: '10px',
@@ -96,20 +98,23 @@ const PixelGraph = ({
     </div>
   ) : (pixels.length || decodedPixels.length) && rows > 1 && showMatrix ? <div
     style={{
-      maxWidth: '520px',
+      maxWidth: fullScreen ? '100vw' : '520px',
+      maxHeight: fullScreen ? 'calc(100vh - 200px)' : 'unset',
       display: 'flex',
       flexDirection: virtuals[virtId].id==='launchpad-x' || virtuals[virtId].id === 'launchpad-x-matrix' ? 'column-reverse' : 'column',
       width: '100%',
       borderRadius: '10px',
       overflow: 'hidden',
-      margin: '0.5rem 0 0 0',
+      margin: '0.5rem 0 0 0'
     }}
     className={`${className}  ${active ? 'active' : ''}`}
-  >{Array.from(Array(rows).keys()).map((row) => (
+  >
+    {Array.from(Array(rows).keys()).map((row) => (
       <div
         key={`row-${row}`}
         style={{
-          maxWidth: '520px',
+          maxWidth: fullScreen ? '100vw' : '520px',
+          maxHeight: fullScreen ? 'calc(100vh - 200px)' : 'unset',
           display: 'flex',
           width: '100%',
           borderRadius: '0',
@@ -126,7 +131,7 @@ const PixelGraph = ({
               key={i}
               style={{
                 flex: 1,
-                border: '1px solid black',
+                // border: '1px solid black',
                 margin: `${((config.transmission_mode === 'compressed' && decodedPixels.length > 0 ? decodedPixels.length : pixels[0].length ) > 100) && rows > 7 ? 1 : 2}px`,
                 borderRadius: ((config.transmission_mode === 'compressed' && decodedPixels.length > 0 ? decodedPixels.length : pixels[0].length ) > 100) && rows > 7 ? '50%' : '5px',
                 position: 'relative',
@@ -151,7 +156,8 @@ const PixelGraph = ({
     }</div> : (pixels[0] || decodedPixels).length ? (
     <div
       style={{
-        maxWidth: '520px',
+        maxWidth: fullScreen ? '100vw' : '520px',
+        maxHeight: fullScreen ? 'calc(100vh - 200px)' : 'unset',
         display: 'flex',
         width: '100%',
         borderRadius: '10px',
@@ -180,7 +186,8 @@ const PixelGraph = ({
   ) : (
     <div
       style={{
-        maxWidth: '520px',
+        maxWidth: fullScreen ? '100vw' : '520px',
+        maxHeight: fullScreen ? 'calc(100vh - 200px)' : 'unset',
         display: 'flex',
         width: '100%',
         borderRadius: '10px',

src/components/SchemaForm/components/Gif/GifFrame.tsx

@@ -0,0 +1,45 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import type { FC } from 'react'
+import { useTheme } from '@mui/material'
+
+interface GifFrameProps {
+  onClick?: () => void | undefined
+  image: string
+  selected?: boolean | undefined
+}
+
+const GifFrame: FC<GifFrameProps> = ({
+  onClick,
+  image,
+  selected
+}: GifFrameProps) => {
+  const theme = useTheme()
+
+  return (
+    <div
+      style={{
+        height: onClick === undefined ? 292 : 300,
+        width: `min(100% - 32px, ${onClick === undefined ? 292 : 300}px)`,
+        minWidth: onClick === undefined ? 292 : 300,
+        maxWidth: onClick === undefined ? 292 : 300,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        backgroundImage: `url("data:image/png;base64,${image}")`,
+        border: onClick === undefined ? 0 : '4px solid',
+        cursor: onClick === undefined ? 'default' : 'pointer',
+        borderColor: selected ? theme.palette.primary.main : '#9999',
+        opacity: onClick === undefined ? 0.5 : 1
+      }}
+      onClick={onClick}
+    />
+  )
+}
+
+GifFrame.defaultProps = {
+  onClick: undefined,
+  selected: undefined
+}
+
+export default GifFrame