Merge branch 'main' into feature/dial-cast-poc

playlet-lib/src/components/Screens/SettingsScreen/NumberControl.bs

@@ -0,0 +1,71 @@
+import "pkg:/components/Navigation/Navigation.bs"
+import "pkg:/source/utils/FocusManagement.bs"
+import "pkg:/source/utils/MathUtils.bs"
+import "pkg:/source/utils/Types.bs"
+
+function Init()
+    m.top.focusable = true
+    m.top.itemSpacings = [10]
+
+    m.minusButton = m.top.findNode("MinusButton")
+    m.numberButton = m.top.findNode("NumberButton")
+    m.plusButton = m.top.findNode("PlusButton")
+
+    m.minusButton.observeFieldScoped("buttonSelected", FuncName(OnMinusSelected))
+    m.plusButton.observeFieldScoped("buttonSelected", FuncName(OnPlusSelected))
+
+    SetNavigation(m.minusButton, "right", m.numberButton)
+    SetNavigation(m.numberButton, "left", m.minusButton)
+    SetNavigation(m.numberButton, "right", m.plusButton)
+    SetNavigation(m.plusButton, "left", m.numberButton)
+end function
+
+function BindPreference(preferences as object, key as string)
+    if m.preferences <> invalid and m.key <> invalid
+        m.preferences.unobserveFieldScoped(m.key)
+    end if
+
+    m.preferences = preferences
+    m.key = key
+
+    if preferences <> invalid and key <> invalid
+        preferences.observeFieldScoped(key, FuncName(OnPreferenceChange))
+        OnPreferenceChange()
+    end if
+end function
+
+function OnPreferenceChange()
+    m.top.value = MathUtils.Max(MathUtils.Min(m.preferences[m.key], m.top.max), m.top.min)
+end function
+
+function OnValueChange() as void
+    m.numberButton.text = `${m.top.value}`
+    if m.preferences = invalid or m.key = invalid
+        return
+    end if
+
+    m.preferences[m.key] = m.top.value
+end function
+
+function OnFocusChange() as void
+    if not m.top.focus
+        return
+    end if
+
+    NodeSetFocus(m.numberButton, true)
+end function
+
+function OnkeyEvent(key as string, press as boolean) as boolean
+    if NavigationKeyHandler(key, press).handled
+        return true
+    end if
+    return false
+end function
+
+function OnMinusSelected()
+    m.top.value = MathUtils.Max(m.top.value - 1, m.top.min)
+end function
+
+function OnPlusSelected()
+    m.top.value = MathUtils.Min(m.top.value + 1, m.top.max)
+end function

playlet-lib/src/components/Screens/SettingsScreen/NumberControl.xml

@@ -0,0 +1,44 @@
+<component name="NumberControl" extends="LayoutGroup" includes="Focus">
+    <interface>
+        <field id="displayText" type="string" alias="DisplayTextLabel.text" />
+        <field id="description" type="string" alias="DescriptionLabel.text" />
+        <field id="min" type="integer" value="-999999" />
+        <field id="max" type="integer" value="999999" />
+        <field id="value" type="integer" onChange="OnValueChange" />
+        <function name="BindPreference" />
+    </interface>
+    <children>
+        <Label id="DisplayTextLabel" width="450" />
+        <Label id="DescriptionLabel"
+            width="450"
+            color="0xb4b4b4ff"
+            wrap="true">
+            <Font role="font" uri="font:SystemFontFile" size="18" />
+        </Label>
+        <LayoutGroup layoutDirection="horiz">
+            <Button
+                id="MinusButton"
+                iconUri=""
+                focusedIconUri=""
+                minWidth="64"
+                maxWidth="64"
+                showFocusFootprint="true"
+                text="-" />
+            <Button
+                id="NumberButton"
+                iconUri=""
+                focusedIconUri=""
+                minWidth="150"
+                showFocusFootprint="true"
+                text="0" />
+            <Button
+                id="PlusButton"
+                iconUri=""
+                focusedIconUri=""
+                minWidth="64"
+                maxWidth="64"
+                showFocusFootprint="true"
+                text="+" />
+        </LayoutGroup>
+    </children>
+</component>

playlet-lib/src/components/Screens/SettingsScreen/SettingCategory.xml

@@ -1,6 +1,6 @@
 <component name="SettingCategory" extends="Button">
     <interface>
-        <field id="padding" type="integer" value="10" onChange="Resize" />
+        <field id="padding" type="integer" value="15" onChange="Resize" />
         <field id="minimumWidth" type="integer" value="280" onChange="Resize" />
         <field id="displayText" type="string" alias="DisplayTextLabel.text" onChange="Resize" />
         <field id="description" type="string" alias="DescriptionLabel.text" onChange="Resize" />

playlet-lib/src/components/Screens/SettingsScreen/SettingsScreen.bs

@@ -1,6 +1,7 @@
 import "pkg:/components/Navigation/Navigation.bs"
 import "pkg:/components/Navigation/ScrollTo.bs"
 import "pkg:/source/utils/FocusManagement.bs"
+import "pkg:/source/utils/Types.bs"
 
 function Init()
     m.top.focusable = true
@@ -9,9 +10,9 @@ function Init()
     m.scrollAnimationInterpolator = m.scrollAnimation.findNode("scrollAnimationInterpolator")
     m.viewport = {
         x: 150
-        y: 96
+        y: 50
         width: 1920
-        height: 550
+        height: 620
     }
 end function
 
@@ -126,6 +127,8 @@ function CreateControl(item as object, container as object, startX as integer, s
         control = CreateRadioControl(item, container)
     else if item.type = "string"
         control = CreateStringControl(item, container)
+    else if item.type = "number"
+        control = CreateNumberComponent(item, container)
     else if item.rokuComponent <> invalid
         control = CreateRokuComponent(item, container)
     end if
@@ -169,6 +172,19 @@ function CreateStringControl(item as object, container as object) as object
     return node
 end function
 
+function CreateNumberComponent(item as object, container as object) as object
+    node = container.createChild("NumberControl")
+    node.displayText = item.displayText
+    node.description = item.description
+    if IsInt(item.min)
+        node.min = item.min
+    end if
+    if IsInt(item.max)
+        node.max = item.max
+    end if
+    return node
+end function
+
 function CreateRokuComponent(item as object, container as object) as object
     node = container.createChild(item.rokuComponent)
     if node.hasField("displayText")

playlet-lib/src/components/Services/Preferences/Preferences.bs

@@ -5,6 +5,7 @@ function Init()
     m.typeMapping = {
         "boolean": "boolean"
         "string": "string"
+        "number": "integer"
         "radio": "string"
         "array": "array"
     }

playlet-lib/src/components/Services/Preferences/Preferences.xml

@@ -1,5 +1,10 @@
 <component name="Preferences" extends="Node">
     <interface>
+        <!-- 
+            The version of the preferences model. This is used to determine if the
+            user prefs saved need to be migrated. If the version is less than the
+            current version, a migration is needed.
+         -->
         <field id="__version" type="integer" value="1" />
         <field id="prefsModel" type="array" />
         <field id="preferenceFields" type="assocarray" />

playlet-web/src/lib/Screens/Settings/SettingControls/NumberControl.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { PlayletApi } from "lib/Api/PlayletApi";
+  import { userPreferencesStore } from "lib/Stores";
+  const textSizes = ["text-2xl", "text-lg", "text-base", "text-sm", "text-xs"];
+  export let displayText: string = "";
+  export let key: string = "";
+  export let description: string = "";
+  export let level: number = 0;
+  export let min: number = -999999;
+  export let max: number = 999999;
+  let value;
+  userPreferencesStore.subscribe((userPreferences) => {
+    value = userPreferences[key];
+  });
+  async function handleChange() {
+    if (key !== "") {
+      await PlayletApi.saveUserPreference(key, value);
+    }
+  }
+</script>
+
+<div class="form-control m-5">
+  <label class="label p-0 cursor-pointer">
+    <div class="label-text {textSizes[level]}">{displayText}</div>
+    <div class="join mt-2 mb-2">
+      <button
+        class="join-item btn btn-sm btn-primary"
+        on:click={() => {
+          value = Math.max(min, value - 1);
+          handleChange();
+        }}
+      >
+        -
+      </button>
+      <input
+        class="join-item input input-bordered input-sm"
+        type="number"
+        name={key}
+        {min}
+        {max}
+        bind:value
+        on:change={handleChange}
+      />
+      <button
+        class="join-item btn btn-sm btn-primary"
+        on:click={() => {
+          value = Math.min(max, value + 1);
+          handleChange();
+        }}
+      >
+        +
+      </button>
+    </div>
+  </label>
+  <div class="text-xs text-gray-500">{@html description}</div>
+</div>

playlet-web/src/lib/Screens/Settings/SettingsNode.svelte

@@ -4,15 +4,19 @@
   import EditHomeScreenControl from "lib/Screens/Settings/SettingControls/EditHomeScreenControl.svelte";
   import RadioControl from "lib/Screens/Settings/SettingControls/RadioControl.svelte";
   import StringControl from "lib/Screens/Settings/SettingControls/StringControl.svelte";
+  import NumberControl from "./SettingControls/NumberControl.svelte";
 
   const textSizes = ["text-2xl", "text-lg", "text-base", "text-sm", "text-xs"];
 
   export let displayText: string = "";
   export let key: string = "";
   export let description: string = "";
-  export let type: "boolean" | "radio" | "string" | undefined = undefined;
+  export let type: "boolean" | "radio" | "string" | "number" | undefined =
+    undefined;
   export let svelteComponent: string | undefined = undefined;
   export let options: any[] | undefined = undefined;
+  export let min: number = -999999;
+  export let max: number = 999999;
   export let visibility: string | undefined = undefined;
   export let children: any[] | undefined = [];
   export let level: number = 0;
@@ -35,6 +39,8 @@
     <RadioControl {displayText} {key} {description} {level} {options} />
   {:else if type === "string"}
     <StringControl {displayText} {key} {description} {level} />
+  {:else if type === "number"}
+    <NumberControl {displayText} {key} {description} {level} {min} {max} />
   {:else if svelteComponent}
     <svelte:component
       this={customComponents[svelteComponent]}

playlet-web/src/lib/Screens/SettingsScreen.svelte

@@ -2,7 +2,6 @@
   import DevSettings from "lib/Screens/Settings/DevSettings.svelte";
   import SettingsNode from "lib/Screens/Settings/SettingsNode.svelte";
   import { preferencesModelStore } from "lib/Stores";
-  import { onMount } from "svelte";
 
   export let visibility: boolean;
 </script>