show active scene

FrameOS · Nov 4, 2024 · c041feb · c041feb
1 parent 46bfcd4
commit c041feb
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 15 deletions.
diff --git a/frontend/src/scenes/frame/panels/Control/controlLogic.tsx b/frontend/src/scenes/frame/panels/Control/controlLogic.tsx
@@ -3,7 +3,7 @@ import { actions, afterMount, connect, kea, key, listeners, path, props, reducer
 import { frameLogic } from '../../frameLogic'
 
 import { forms } from 'kea-forms'
-import { FrameScene } from '../../../../types'
+import { FrameScene, FrameStateRecord } from '../../../../types'
 
 import { loaders } from 'kea-loaders'
 
@@ -14,11 +14,6 @@ export interface ControlLogicProps {
   frameId: number
 }
 
-export interface StateRecord {
-  sceneId: string
-  state: Record<string, any>
-}
-
 export const controlLogic = kea<controlLogicType>([
   path(['src', 'scenes', 'frame', 'panels', 'Scenes', 'controlLogic']),
   props({} as ControlLogicProps),
@@ -34,7 +29,7 @@ export const controlLogic = kea<controlLogicType>([
   }),
   loaders(({ props, values }) => ({
     stateRecord: [
-      {} as StateRecord,
+      {} as FrameStateRecord,
       {
         sync: async (_, breakpoint) => {
           await breakpoint(100)
@@ -54,7 +49,7 @@ export const controlLogic = kea<controlLogicType>([
   })),
   reducers({
     stateRecord: [
-      {} as StateRecord,
+      {} as FrameStateRecord,
       {
         currentSceneChanged: (state, { sceneId }) => ({ ...state, sceneId }),
       },

diff --git a/frontend/src/scenes/frame/panels/Scenes/Scenes.tsx b/frontend/src/scenes/frame/panels/Scenes/Scenes.tsx
@@ -23,11 +23,14 @@ import { SceneSettings } from './SceneSettings'
 import React from 'react'
 import { SceneDropDown } from './SceneDropDown'
 import { showAsFps } from '../../../../decorators/refreshInterval'
+import clsx from 'clsx'
 
 export function Scenes() {
   const { frameId, frameForm } = useValues(frameLogic)
   const { editScene, openTemplates } = useActions(panelsLogic)
-  const { scenes, showNewSceneForm, isNewSceneSubmitting, showingSettings } = useValues(scenesLogic({ frameId }))
+  const { scenes, showNewSceneForm, isNewSceneSubmitting, showingSettings, activeSceneId } = useValues(
+    scenesLogic({ frameId })
+  )
   const { toggleSettings, submitNewScene, toggleNewScene, createNewScene, closeNewScene } = useActions(
     scenesLogic({ frameId })
   )
@@ -86,7 +89,16 @@ export function Scenes() {
         ) : null}
         {scenes.map((scene) => (
           <React.Fragment key={scene.id}>
-            <Box className="p-2 pl-4 pr-3 space-y-2 bg-gray-900 flex items-start justify-between gap-1">
+            <div
+              className={clsx(
+                'border rounded-lg shadow bg-gray-900 break-inside-avoid',
+                'p-2 pl-4 pr-3 space-y-2 flex items-start justify-between gap-1',
+                activeSceneId === scene.id
+                  ? 'border border-[#4a4b8c] shadow-[0_0_3px_3px_rgba(128,0,255,0.5)]'
+                  : 'border-gray-700'
+              )}
+              onClick={() => editScene(scene.id)}
+            >
               <div>
                 <H6>
                   <span className="cursor-pointer" onClick={() => editScene(scene.id)}>
@@ -106,6 +118,11 @@ export function Scenes() {
                       {showAsFps(scene.settings.refreshInterval)}
                     </Tag>
                   ) : null}
+                  {activeSceneId === scene.id ? (
+                    <Tag className="ml-2" color="primary">
+                      active
+                    </Tag>
+                  ) : null}
                 </H6>
                 <div className="text-xs text-gray-400">id: {scene.id}</div>
               </div>
@@ -115,7 +132,7 @@ export function Scenes() {
                 </Button>
                 <SceneDropDown context="scenes" sceneId={scene.id} />
               </div>
-            </Box>
+            </div>
             {showingSettings[scene.id] ? (
               <Box className="p-2 pl-4 pr-3 space-y-2 bg-gray-900 flex items-start justify-between gap-1 ml-4">
                 <SceneSettings sceneId={scene.id} onClose={() => toggleSettings(scene.id)} />

diff --git a/frontend/src/scenes/frame/panels/Scenes/scenesLogic.tsx b/frontend/src/scenes/frame/panels/Scenes/scenesLogic.tsx
@@ -1,14 +1,14 @@
-import { actions, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
+import { actions, afterMount, connect, kea, key, listeners, path, props, reducers, selectors } from 'kea'
 import type { scenesLogicType } from './scenesLogicType'
 import { FrameScene, Panel } from '../../../../types'
 import { frameLogic, sanitizeScene } from '../../frameLogic'
 import { appsModel } from '../../../../models/appsModel'
 import { forms } from 'kea-forms'
 import { v4 as uuidv4 } from 'uuid'
 import { panelsLogic } from '../panelsLogic'
-import { Option } from '../../../../components/Select'
 
 import _sceneTemplates from '../../../../../schema/templates.json'
+import { controlLogic } from '../Control/controlLogic'
 const sceneTemplates: Record<string, Record<string, any>> = _sceneTemplates
 
 export interface ScenesLogicProps {
@@ -20,8 +20,22 @@ export const scenesLogic = kea<scenesLogicType>([
   props({} as ScenesLogicProps),
   key((props) => props.frameId),
   connect(({ frameId }: ScenesLogicProps) => ({
-    values: [frameLogic({ frameId }), ['frame', 'frameForm'], appsModel, ['apps']],
-    actions: [frameLogic({ frameId }), ['applyTemplate'], panelsLogic({ frameId }), ['editScene', 'closePanel']],
+    values: [
+      frameLogic({ frameId }),
+      ['frame', 'frameForm'],
+      appsModel,
+      ['apps'],
+      controlLogic({ frameId }),
+      ['sceneId as activeSceneId'],
+    ],
+    actions: [
+      frameLogic({ frameId }),
+      ['applyTemplate'],
+      panelsLogic({ frameId }),
+      ['editScene', 'closePanel'],
+      controlLogic({ frameId }),
+      ['sync as syncActiveScene'],
+    ],
   })),
   actions({
     toggleSettings: (sceneId: string) => ({ sceneId }),
@@ -33,6 +47,7 @@ export const scenesLogic = kea<scenesLogicType>([
     toggleNewScene: true,
     closeNewScene: true,
     createNewScene: true,
+    sync: true,
   }),
   forms(({ actions, values, props }) => ({
     newScene: {
@@ -182,4 +197,7 @@ export const scenesLogic = kea<scenesLogicType>([
       },
     ],
   }),
+  afterMount(({ actions }) => {
+    actions.syncActiveScene()
+  }),
 ])
diff --git a/frontend/src/types.tsx b/frontend/src/types.tsx
@@ -422,3 +422,8 @@ export interface FrameOSSettings {
     accessKey?: string
   }
 }
+
+export interface FrameStateRecord {
+  sceneId: string
+  state: Record<string, any>
+}