Skip to content

Commit

Permalink
update reponsiveness
Browse files Browse the repository at this point in the history
  • Loading branch information
@rithviknishad
rithviknishad committed Dec 6, 2023
1 parent a815eae commit 951330e
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 137 deletions.
8 changes: 4 additions & 4 deletions src/Components/CameraFeed/AssetBedSelect.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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}
Expand All @@ -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>
</>
)}
Expand Down
4 changes: 2 additions & 2 deletions src/Components/CameraFeed/CameraFeed.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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" : ""}>
Expand Down
2 changes: 1 addition & 1 deletion src/Components/CameraFeed/CameraFeedWithBedPresets.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/Components/CameraFeed/FeedButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
263 changes: 135 additions & 128 deletions src/Components/CameraFeed/FeedControls.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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>
);
}
2 changes: 1 addition & 1 deletion src/Components/CameraFeed/NoFeedAvailable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down

0 comments on commit 951330e

Please sign in to comment.