Scene ui improvements

graphql/documents/data/config.graphql

@@ -17,6 +17,7 @@ fragment ConfigInterfaceData on ConfigInterfaceResult {
   wallShowTitle
   maximumLoopDuration
   autostartVideo
+  showStudioAsText
   css
   cssEnabled
 }

graphql/schema/types/config.graphql

@@ -66,6 +66,8 @@ input ConfigInterfaceInput {
   maximumLoopDuration: Int
   """If true, video will autostart on load in the scene player"""
   autostartVideo: Boolean
+  """If true, studio overlays will be shown as text instead of logo images"""
+  showStudioAsText: Boolean
   """Custom CSS"""
   css: String
   cssEnabled: Boolean
@@ -80,6 +82,8 @@ type ConfigInterfaceResult {
   maximumLoopDuration: Int
   """If true, video will autostart on load in the scene player"""
   autostartVideo: Boolean
+   """If true, studio overlays will be shown as text instead of logo images"""
+  showStudioAsText: Boolean
   """Custom CSS"""
   css: String
   cssEnabled: Boolean

pkg/api/resolver_mutation_configure.go

@@ -98,6 +98,10 @@ func (r *mutationResolver) ConfigureInterface(ctx context.Context, input models.
 		config.Set(config.AutostartVideo, *input.AutostartVideo)
 	}
 
+	if input.ShowStudioAsText != nil {
+		config.Set(config.ShowStudioAsText, *input.ShowStudioAsText)
+	}
+
 	css := ""
 
 	if input.CSS != nil {

pkg/api/resolver_query_configuration.go

@@ -53,6 +53,7 @@ func makeConfigInterfaceResult() *models.ConfigInterfaceResult {
 	wallShowTitle := config.GetWallShowTitle()
 	maximumLoopDuration := config.GetMaximumLoopDuration()
 	autostartVideo := config.GetAutostartVideo()
+	showStudioAsText := config.GetShowStudioAsText()
 	css := config.GetCSS()
 	cssEnabled := config.GetCSSEnabled()
 
@@ -61,6 +62,7 @@ func makeConfigInterfaceResult() *models.ConfigInterfaceResult {
 		WallShowTitle:       &wallShowTitle,
 		MaximumLoopDuration: &maximumLoopDuration,
 		AutostartVideo:      &autostartVideo,
+		ShowStudioAsText:    &showStudioAsText,
 		CSS:                 &css,
 		CSSEnabled:          &cssEnabled,
 	}

pkg/manager/config/config.go

@@ -35,6 +35,7 @@ const SoundOnPreview = "sound_on_preview"
 const WallShowTitle = "wall_show_title"
 const MaximumLoopDuration = "maximum_loop_duration"
 const AutostartVideo = "autostart_video"
+const ShowStudioAsText = "show_studio_as_text"
 const CSSEnabled = "cssEnabled"
 
 // Logging options
@@ -191,6 +192,11 @@ func GetAutostartVideo() bool {
 	return viper.GetBool(AutostartVideo)
 }
 
+func GetShowStudioAsText() bool {
+	viper.SetDefault(ShowStudioAsText, false)
+	return viper.GetBool(ShowStudioAsText)
+}
+
 func GetCSSPath() string {
 	// use custom.css in the same directory as the config file
 	configFileUsed := viper.ConfigFileUsed()

ui/v2/src/components/Settings/SettingsInterfacePanel.tsx

@@ -22,6 +22,7 @@ export const SettingsInterfacePanel: FunctionComponent<IProps> = () => {
   const [wallShowTitle, setWallShowTitle] = useState<boolean>();
   const [maximumLoopDuration, setMaximumLoopDuration] = useState<number>(0);
   const [autostartVideo, setAutostartVideo] = useState<boolean>();
+  const [showStudioAsText, setShowStudioAsText] = useState<boolean>();
   const [css, setCSS] = useState<string>();
   const [cssEnabled, setCSSEnabled] = useState<boolean>();
 
@@ -30,6 +31,7 @@ export const SettingsInterfacePanel: FunctionComponent<IProps> = () => {
     wallShowTitle,
     maximumLoopDuration,
     autostartVideo,
+    showStudioAsText,
     css,
     cssEnabled
   });
@@ -42,6 +44,7 @@ export const SettingsInterfacePanel: FunctionComponent<IProps> = () => {
       setWallShowTitle(iCfg.wallShowTitle !== undefined ? iCfg.wallShowTitle : true);
       setMaximumLoopDuration(iCfg.maximumLoopDuration || 0);
       setAutostartVideo(iCfg.autostartVideo !== undefined ? iCfg.autostartVideo : false);
+      setShowStudioAsText(iCfg.showStudioAsText !== undefined ? iCfg.showStudioAsText : false);
       setCSS(config.data.configuration.interface.css || "");
       setCSSEnabled(config.data.configuration.interface.cssEnabled || false);
     }
@@ -78,6 +81,18 @@ export const SettingsInterfacePanel: FunctionComponent<IProps> = () => {
         />
       </FormGroup>
 
+      <FormGroup
+        label="Scene List"
+      >
+        <Checkbox
+          checked={showStudioAsText}
+          label="Show Studios as text"
+          onChange={() => {
+            setShowStudioAsText(!showStudioAsText)
+          }}
+        />
+      </FormGroup>
+
       <FormGroup
         label="Scene Player"
       >

ui/v2/src/components/list/AddFilter.tsx

@@ -5,6 +5,7 @@ import {
   FormGroup,
   HTMLSelect,
   InputGroup,
+  Tooltip,
 } from "@blueprintjs/core";
 import _ from "lodash";
 import React, { FunctionComponent, useEffect, useRef, useState } from "react";
@@ -188,7 +189,19 @@ export const AddFilter: FunctionComponent<IAddFilterProps> = (props: IAddFilterP
   const title = !props.editingCriterion ? "Add Filter" : "Update Filter";
   return (
     <>
-      <Button onClick={() => onToggle()} active={isOpen} large={true}>Filter</Button>
+      <Tooltip
+        hoverOpenDelay={200}
+        content="Filter"
+      >
+        <Button 
+          icon="filter"
+          onClick={() => onToggle()} 
+          active={isOpen} 
+          large={true}
+        >
+        </Button>
+      </Tooltip>
+
       <Dialog isOpen={isOpen} onClose={() => onToggle()} title={title}>
         <div className="dialog-content">
           {maybeRenderFilterSelect()}

ui/v2/src/components/list/ListFilter.tsx

@@ -9,6 +9,8 @@ import {
   MenuItem,
   Popover,
   Tag,
+  Tooltip,
+  Slider,
 } from "@blueprintjs/core";
 import { debounce } from "lodash";
 import React, { FunctionComponent, SyntheticEvent, useEffect, useRef, useState } from "react";
@@ -25,6 +27,8 @@ interface IListFilterProps {
   onChangeDisplayMode: (displayMode: DisplayMode) => void;
   onAddCriterion: (criterion: Criterion, oldId?: string) => void;
   onRemoveCriterion: (criterion: Criterion) => void;
+  zoomIndex?: number;
+  onChangeZoom?: (zoomIndex: number) => void;
   onSelectAll?: () => void;
   onSelectNone?: () => void;
   filter: ListFilterModel;
@@ -111,13 +115,14 @@ export const ListFilter: FunctionComponent<IListFilterProps> = (props: IListFilt
       }
     }
     return props.filter.displayModeOptions.map((option) => (
-      <Button
-        key={option}
-        active={props.filter.displayMode === option}
-        onClick={() => onChangeDisplayMode(option)}
-        icon={getIcon(option)}
-        text={getLabel(option)}
-      />
+      <Tooltip content={getLabel(option)} hoverOpenDelay={200}>
+        <Button
+          key={option}
+          active={props.filter.displayMode === option}
+          onClick={() => onChangeDisplayMode(option)}
+          icon={getIcon(option)}
+        />
+      </Tooltip>
     ));
   }
 
@@ -150,23 +155,63 @@ export const ListFilter: FunctionComponent<IListFilterProps> = (props: IListFilt
 
   function renderSelectAll() {
     if (props.onSelectAll) {
-      return <Button onClick={() => onSelectAll()} text="Select All"/>;
+      return <MenuItem onClick={() => onSelectAll()} text="Select All" />;
     }
   }
 
   function renderSelectNone() {
     if (props.onSelectNone) {
-      return <Button onClick={() => onSelectNone()} text="Select None"/>;
+      return <MenuItem onClick={() => onSelectNone()} text="Select None" />;
     }
   }
 
-  function renderSelectAllNone() {
-    return (
-      <>
-      {renderSelectAll()}
-      {renderSelectNone()}
-      </>
-    );
+  function renderMore() {
+    let options = [];
+    options.push(renderSelectAll());
+    options.push(renderSelectNone());
+    options = options.filter((o) => !!o);
+
+    let menuItems = options as JSX.Element[];
+
+    function renderMoreOptions() {
+      return (
+        <>
+        {menuItems}
+        </>
+      )
+    }
+
+    if (menuItems.length > 0) {
+      return (
+        <Popover position="bottom">
+          <Button icon="more"/>
+          <Menu>{renderMoreOptions()}</Menu>
+        </Popover>
+      );
+    }
+  }
+
+  function onChangeZoom(v : number) {
+    if (props.onChangeZoom) {
+      props.onChangeZoom(v);
+    }
+  } 
+
+  function maybeRenderZoom() {
+    if (props.onChangeZoom) {
+      return (
+        <span className="zoom-slider">
+          <Slider 
+            min={0}
+            value={props.zoomIndex}
+            initialValue={props.zoomIndex}
+            max={3}
+            labelRenderer={false}
+            onChange={(v) => onChangeZoom(v)}
+          />
+      </span>
+      );
+    }
   }
 
   function render() {
@@ -188,18 +233,23 @@ export const ListFilter: FunctionComponent<IListFilterProps> = (props: IListFilt
             value={props.filter.itemsPerPage}
             className="filter-item"
           />
-          <ControlGroup className="filter-item">
-            <AnchorButton
-              rightIcon={props.filter.sortDirection === "asc" ? "caret-up" : "caret-down"}
-              onClick={onChangeSortDirection}
-            >
-              {props.filter.sortDirection === "asc" ? "Ascending" : "Descending"}
-            </AnchorButton>
+          <ButtonGroup className="filter-item">
             <Popover position="bottom">
               <Button large={true}>{props.filter.sortBy}</Button>
               <Menu>{renderSortByOptions()}</Menu>
             </Popover>
-          </ControlGroup>
+
+            <Tooltip 
+              content={props.filter.sortDirection === "asc" ? "Ascending" : "Descending"}
+              hoverOpenDelay={200}
+            >
+              <Button
+                rightIcon={props.filter.sortDirection === "asc" ? "caret-up" : "caret-down"}
+                onClick={onChangeSortDirection}
+              />
+            </Tooltip>
+
+          </ButtonGroup>
 
           <AddFilter
             filter={props.filter}
@@ -212,8 +262,10 @@ export const ListFilter: FunctionComponent<IListFilterProps> = (props: IListFilt
             {renderDisplayModeOptions()}
           </ButtonGroup>
 
+          {maybeRenderZoom()}
+
           <ButtonGroup className="filter-item">
-            {renderSelectAllNone()}
+            {renderMore()}
           </ButtonGroup>
         </div>
         <div style={{display: "flex", justifyContent: "center", margin: "10px auto"}}>