From 951330eac436d3cbebd574cd3817f028d6cb30fb Mon Sep 17 00:00:00 2001
From: rithviknishad <mail@rithviknishad.dev>
Date: Wed, 6 Dec 2023 16:18:11 +0530
Subject: [PATCH] update reponsiveness

---
 src/Components/CameraFeed/AssetBedSelect.tsx  |   8 +-
 src/Components/CameraFeed/CameraFeed.tsx      |   4 +-
 .../CameraFeed/CameraFeedWithBedPresets.tsx   |   2 +-
 src/Components/CameraFeed/FeedButton.tsx      |   2 +-
 src/Components/CameraFeed/FeedControls.tsx    | 263 +++++++++---------
 src/Components/CameraFeed/NoFeedAvailable.tsx |   2 +-
 6 files changed, 144 insertions(+), 137 deletions(-)

diff --git a/src/Components/CameraFeed/AssetBedSelect.tsx b/src/Components/CameraFeed/AssetBedSelect.tsx
index 8715b480642..17701dccbde 100644
--- a/src/Components/CameraFeed/AssetBedSelect.tsx
+++ b/src/Components/CameraFeed/AssetBedSelect.tsx
@@ -31,7 +31,7 @@ export default function AssetBedSelect(props: Props) {
   return (
     <Listbox value={selected} onChange={props.onChange} disabled={loading}>
       <div className="relative">
-        <Listbox.Button className="relative w-full cursor-default pr-6 text-left text-zinc-400 focus:outline-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-zinc-700 sm:text-sm">
+        <Listbox.Button className="relative w-full cursor-default pr-6 text-right text-xs text-zinc-400 focus:outline-none disabled:cursor-not-allowed disabled:bg-transparent disabled:text-zinc-700 sm:text-sm">
           <span className="block truncate">
             {selected?.bed_object.name ?? "No Preset"}
           </span>
@@ -45,7 +45,7 @@ export default function AssetBedSelect(props: Props) {
           leaveFrom="opacity-100"
           leaveTo="opacity-0"
         >
-          <Listbox.Options className="absolute z-20 mt-1 max-h-60 w-full overflow-auto rounded-b-lg bg-zinc-900/75 py-1 text-base shadow-lg ring-1 ring-white/5 backdrop-blur-sm focus:outline-none sm:text-sm">
+          <Listbox.Options className="absolute z-20 mt-1 max-h-48 w-full overflow-auto rounded-b-lg bg-zinc-900/75 py-1 text-base shadow-lg ring-1 ring-white/5 backdrop-blur-sm focus:outline-none sm:text-sm md:max-h-60">
             {data?.results.map((obj) => (
               <Listbox.Option
                 key={obj.id}
@@ -59,11 +59,11 @@ export default function AssetBedSelect(props: Props) {
                 {({ selected }) => (
                   <>
                     <span
-                      className={`block truncate ${
+                      className={`block truncate text-xs md:text-sm ${
                         selected ? "font-bold text-white" : "font-normal"
                       }`}
                     >
-                      {obj.bed_object.name}
+                      {obj.bed_object.name}: {obj.meta.preset_name}
                     </span>
                   </>
                 )}
diff --git a/src/Components/CameraFeed/CameraFeed.tsx b/src/Components/CameraFeed/CameraFeed.tsx
index fe3a11bf8e0..4ec039e4e70 100644
--- a/src/Components/CameraFeed/CameraFeed.tsx
+++ b/src/Components/CameraFeed/CameraFeed.tsx
@@ -96,8 +96,8 @@ export default function CameraFeed(props: Props) {
         )}
       >
         <div className="flex items-center justify-between bg-zinc-900 px-4 py-0.5">
-          <div className="flex items-center gap-2">
-            <span className="text-sm font-semibold text-white">
+          <div className="flex items-center gap-1 md:gap-2">
+            <span className="text-xs font-semibold text-white md:text-sm">
               {props.asset.name}
             </span>
             <div className={state === "loading" ? "animate-pulse" : ""}>
diff --git a/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx b/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx
index 5c5d6452a47..b52071a8597 100644
--- a/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx
+++ b/src/Components/CameraFeed/CameraFeedWithBedPresets.tsx
@@ -19,7 +19,7 @@ export default function LocationFeedTile(props: Props) {
       preset={preset?.meta.position}
       shortcutsDisabled
     >
-      <div className="w-32">
+      <div className="w-64">
         <AssetBedSelect
           asset={props.asset}
           value={preset}
diff --git a/src/Components/CameraFeed/FeedButton.tsx b/src/Components/CameraFeed/FeedButton.tsx
index b1ad05f92e2..033ffcc11ed 100644
--- a/src/Components/CameraFeed/FeedButton.tsx
+++ b/src/Components/CameraFeed/FeedButton.tsx
@@ -15,7 +15,7 @@ export default function FeedButton(props: Props) {
   const child = (
     <button
       className={classNames(
-        "flex h-10 w-10 items-center justify-center rounded-lg border border-zinc-700/50 bg-zinc-800/40 shadow-none backdrop-blur-md transition hover:bg-zinc-50 hover:text-zinc-800 hover:shadow hover:backdrop-blur-xl active:shadow-2xl",
+        "flex h-10 w-10 items-center justify-center rounded-lg border border-zinc-700/50 bg-zinc-800/40 shadow-none transition hover:bg-zinc-50 hover:text-zinc-800 hover:shadow hover:backdrop-blur-xl active:shadow-2xl md:backdrop-blur-md",
         props.className
       )}
       type="button"
diff --git a/src/Components/CameraFeed/FeedControls.tsx b/src/Components/CameraFeed/FeedControls.tsx
index fa64459ced0..3a5afb76209 100644
--- a/src/Components/CameraFeed/FeedControls.tsx
+++ b/src/Components/CameraFeed/FeedControls.tsx
@@ -58,124 +58,135 @@ const payload = (action: number, precision: number) => {
 
 interface Props {
   shortcutsDisabled?: boolean;
-  onMove?: (payload: PTZPayload) => void;
+  onMove: (payload: PTZPayload) => void;
   isFullscreen: boolean;
   setFullscreen: (state: boolean) => void;
   onReset: () => void;
 }
 
-export default function FeedControls({
-  shortcutsDisabled,
-  onMove,
-  ...props
-}: Props) {
+export default function FeedControls({ shortcutsDisabled, ...props }: Props) {
   const [precision, setPrecision] = useState(1);
   const togglePrecision = () => setPrecision((p) => (p === 16 ? 1 : p << 1));
 
-  const move =
-    onMove &&
-    ((direction: number) => () => onMove(payload(direction, precision)));
+  const move = (direction: number) => () => {
+    props.onMove(payload(direction, precision));
+  };
 
   return (
     <div className="text-white opacity-0 transition-all delay-100 duration-200 ease-in-out group-hover:opacity-100 group-hover:delay-0">
-      {/* Move Controls */}
-      {move && (
-        <>
-          <div className="absolute bottom-0 left-8 transition-all delay-100 duration-200 ease-in-out group-hover:bottom-5 group-hover:delay-0">
-            <div className="grid grid-cols-3 gap-1">
-              <FeedButton onTrigger={move(Actions.UP | Actions.LEFT)}>
-                <CareIcon icon="l-triangle" className="-rotate-45" />
-              </FeedButton>
-              <FeedButton
-                onTrigger={move(Actions.UP)}
-                helpText="Up"
-                shortcut={Shortcuts.MoveUp}
-                shortcutsDisabled={shortcutsDisabled}
-              >
-                <CareIcon icon="l-triangle" className="rotate-0" />
-              </FeedButton>
-              <FeedButton onTrigger={move(Actions.UP | Actions.RIGHT)}>
-                <CareIcon icon="l-triangle" className="rotate-45" />
-              </FeedButton>
-              <FeedButton
-                onTrigger={move(Actions.LEFT)}
-                helpText="Left"
-                shortcut={Shortcuts.MoveLeft}
-                shortcutsDisabled={shortcutsDisabled}
-              >
-                <CareIcon icon="l-triangle" className="-rotate-90" />
-              </FeedButton>
-
-              <FeedButton
-                onTrigger={togglePrecision}
-                helpText="Toggle Precision"
-                shortcut={Shortcuts.TogglePrecision}
-                className="font-bold"
-                shortcutsDisabled={shortcutsDisabled}
-              >
-                {precision}x
-              </FeedButton>
-
-              <FeedButton
-                onTrigger={move(Actions.RIGHT)}
-                helpText="Right"
-                shortcut={Shortcuts.MoveRight}
-                shortcutsDisabled={shortcutsDisabled}
-              >
-                <CareIcon icon="l-triangle" className="rotate-90" />
-              </FeedButton>
-
-              <FeedButton onTrigger={move(Actions.DOWN | Actions.LEFT)}>
-                <CareIcon icon="l-triangle" className="rotate-[-135deg]" />
-              </FeedButton>
-
-              <FeedButton
-                onTrigger={move(Actions.DOWN)}
-                helpText="Down"
-                shortcut={Shortcuts.MoveDown}
-                shortcutsDisabled={shortcutsDisabled}
-                tooltipClassName="tooltip-top"
-              >
-                <CareIcon icon="l-triangle" className="rotate-180" />
-              </FeedButton>
-
-              <FeedButton onTrigger={move(Actions.DOWN | Actions.RIGHT)}>
-                <CareIcon icon="l-triangle" className="rotate-[135deg]" />
-              </FeedButton>
-            </div>
-          </div>
-
-          <div className="absolute bottom-5 right-0 transition-all delay-100 duration-200 ease-in-out group-hover:right-8 group-hover:delay-0">
-            <div className="flex flex-col items-center justify-center gap-1">
-              <FeedButton
-                shortcut={Shortcuts.ZoomIn}
-                tooltipClassName="tooltip-left translate-y-2 translate-x-1"
-                helpText="Zoom In"
-                onTrigger={move(Actions.ZOOM_IN)}
-                shortcutsDisabled={shortcutsDisabled}
-              >
-                <CareIcon icon="l-search-plus" />
-              </FeedButton>
-              <FeedButton
-                shortcut={Shortcuts.ZoomOut}
-                tooltipClassName="tooltip-left translate-y-2 translate-x-1"
-                helpText="Zoom Out"
-                onTrigger={move(Actions.ZOOM_OUT)}
-                shortcutsDisabled={shortcutsDisabled}
-              >
-                <CareIcon icon="l-search-minus" />
-              </FeedButton>
-              <FeedButton
-                shortcut={Shortcuts.Reset}
-                tooltipClassName="tooltip-left translate-y-2 translate-x-1"
-                helpText="Reset"
-                onTrigger={props.onReset}
-                shortcutsDisabled={shortcutsDisabled}
-              >
-                <CareIcon icon="l-redo" />
-              </FeedButton>
-              {/* TODO: implement this when this is used in where presets can be saved. */}
-              {/* <FeedButton
+      <div className="absolute bottom-0 right-6 transition-all delay-100 duration-200 ease-in-out group-hover:bottom-1.5 group-hover:delay-0 md:left-8 md:right-auto md:group-hover:bottom-5">
+        <ul className="grid scale-75 grid-cols-5 gap-2.5 md:scale-100 md:grid-cols-3 md:gap-1">
+          <li className="order-none hidden md:order-1 md:block">
+            <FeedButton onTrigger={move(Actions.UP | Actions.LEFT)}>
+              <CareIcon icon="l-triangle" className="-rotate-45" />
+            </FeedButton>
+          </li>
+          <li className="order-1 md:order-2">
+            <FeedButton
+              onTrigger={move(Actions.UP)}
+              helpText="Up"
+              shortcut={Shortcuts.MoveUp}
+              shortcutsDisabled={shortcutsDisabled}
+            >
+              <CareIcon icon="l-triangle" className="rotate-0" />
+            </FeedButton>
+          </li>
+          <li className="order-none hidden md:order-3 md:block">
+            <FeedButton onTrigger={move(Actions.UP | Actions.RIGHT)}>
+              <CareIcon icon="l-triangle" className="rotate-45" />
+            </FeedButton>
+          </li>
+          <li className="order-3 md:order-4">
+            <FeedButton
+              onTrigger={move(Actions.LEFT)}
+              helpText="Left"
+              shortcut={Shortcuts.MoveLeft}
+              shortcutsDisabled={shortcutsDisabled}
+            >
+              <CareIcon icon="l-triangle" className="-rotate-90" />
+            </FeedButton>
+          </li>
+
+          <li className="order-last md:order-5">
+            <FeedButton
+              onTrigger={togglePrecision}
+              helpText="Toggle Precision"
+              shortcut={Shortcuts.TogglePrecision}
+              className="font-bold"
+              shortcutsDisabled={shortcutsDisabled}
+            >
+              {precision}x
+            </FeedButton>
+          </li>
+
+          <li className="order-4 md:order-6">
+            <FeedButton
+              onTrigger={move(Actions.RIGHT)}
+              helpText="Right"
+              shortcut={Shortcuts.MoveRight}
+              shortcutsDisabled={shortcutsDisabled}
+            >
+              <CareIcon icon="l-triangle" className="rotate-90" />
+            </FeedButton>
+          </li>
+
+          <li className="order-none hidden md:order-7 md:block">
+            <FeedButton onTrigger={move(Actions.DOWN | Actions.LEFT)}>
+              <CareIcon icon="l-triangle" className="rotate-[-135deg]" />
+            </FeedButton>
+          </li>
+
+          <li className="order-2 md:order-8">
+            <FeedButton
+              onTrigger={move(Actions.DOWN)}
+              helpText="Down"
+              shortcut={Shortcuts.MoveDown}
+              shortcutsDisabled={shortcutsDisabled}
+              tooltipClassName="tooltip-top"
+            >
+              <CareIcon icon="l-triangle" className="rotate-180" />
+            </FeedButton>
+          </li>
+
+          <li className="order-none hidden md:order-9 md:block">
+            <FeedButton onTrigger={move(Actions.DOWN | Actions.RIGHT)}>
+              <CareIcon icon="l-triangle" className="rotate-[135deg]" />
+            </FeedButton>
+          </li>
+        </ul>
+      </div>
+
+      <div className="absolute -bottom-3 right-0 scale-75 transition-all delay-100 duration-200 ease-in-out group-hover:right-2 group-hover:delay-0 md:bottom-5 md:scale-100 md:group-hover:right-8">
+        <div className="flex flex-col items-center justify-center gap-2.5 md:gap-1">
+          <FeedButton
+            shortcut={Shortcuts.ZoomIn}
+            tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+            helpText="Zoom In"
+            onTrigger={move(Actions.ZOOM_IN)}
+            shortcutsDisabled={shortcutsDisabled}
+          >
+            <CareIcon icon="l-search-plus" />
+          </FeedButton>
+          <FeedButton
+            shortcut={Shortcuts.ZoomOut}
+            tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+            helpText="Zoom Out"
+            onTrigger={move(Actions.ZOOM_OUT)}
+            shortcutsDisabled={shortcutsDisabled}
+          >
+            <CareIcon icon="l-search-minus" />
+          </FeedButton>
+          <FeedButton
+            shortcut={Shortcuts.Reset}
+            tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+            helpText="Reset"
+            onTrigger={props.onReset}
+            shortcutsDisabled={shortcutsDisabled}
+          >
+            <CareIcon icon="l-redo" />
+          </FeedButton>
+          {/* TODO: implement this when this is used in where presets can be saved. */}
+          {/* <FeedButton
                 shortcut={Shortcuts.SavePreset}
                 tooltipClassName="tooltip-left translate-y-2 translate-x-1"
                 helpText="Save current view to preset"
@@ -184,27 +195,23 @@ export default function FeedControls({
               >
                 <CareIcon icon="l-save" />
               </FeedButton> */}
-              <FeedButton
-                shortcut={Shortcuts.Fullscreen}
-                tooltipClassName="tooltip-left translate-y-2 translate-x-1"
-                helpText={
-                  props.isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"
-                }
-                onTrigger={() => props.setFullscreen(!props.isFullscreen)}
-                shortcutsDisabled={shortcutsDisabled}
-              >
-                <CareIcon
-                  icon={
-                    props.isFullscreen
-                      ? "l-compress-arrows"
-                      : "l-expand-arrows-alt"
-                  }
-                />
-              </FeedButton>
-            </div>
-          </div>
-        </>
-      )}
+          <FeedButton
+            shortcut={Shortcuts.Fullscreen}
+            tooltipClassName="tooltip-left translate-y-2 translate-x-1"
+            helpText={
+              props.isFullscreen ? "Exit Fullscreen" : "Enter Fullscreen"
+            }
+            onTrigger={() => props.setFullscreen(!props.isFullscreen)}
+            shortcutsDisabled={shortcutsDisabled}
+          >
+            <CareIcon
+              icon={
+                props.isFullscreen ? "l-compress-arrows" : "l-expand-arrows-alt"
+              }
+            />
+          </FeedButton>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/Components/CameraFeed/NoFeedAvailable.tsx b/src/Components/CameraFeed/NoFeedAvailable.tsx
index 31af0083556..9056ed11bfc 100644
--- a/src/Components/CameraFeed/NoFeedAvailable.tsx
+++ b/src/Components/CameraFeed/NoFeedAvailable.tsx
@@ -28,7 +28,7 @@ export default function NoFeedAvailable(props: Props) {
     >
       <CareIcon icon={props.icon} className="text-2xl" />
       <span className="text-xs font-bold">{props.message}</span>
-      <span className="px-10 font-mono text-[10px] text-gray-500">
+      <span className="hidden px-10 font-mono text-[10px] text-gray-500 md:block">
         {redactedURL}
       </span>
       <div className="mt-4 flex items-center gap-2">