admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

add tooltips to recorder

Browse source
This commit is contained in:
MarconLP 2023-07-10 18:28:53 +02:00
parent 96498270e2
commit 76483757f9
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
1 changed files with 41 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Recorder.tsx
View file

@ -16,6 +16,7 @@ import { useAtom } from "jotai/index";
import paywallAtom from "~/atoms/paywallAtom"; import paywallAtom from "~/atoms/paywallAtom";
import recordVideoModalOpen from "~/atoms/recordVideoModalOpen"; import recordVideoModalOpen from "~/atoms/recordVideoModalOpen";
import { usePostHog } from "posthog-js/react"; import { usePostHog } from "posthog-js/react";
import Tooltip from "~/components/Tooltip";
interface Props { interface Props {
closeModal: () => void; closeModal: () => void;
@ -313,7 +314,7 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
</Listbox> </Listbox>
<button <button
type="button" type="button"
className="mt-4 flex inline-flex w-full items-center items-center justify-center rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold leading-6 text-white shadow transition duration-150 ease-in-out hover:bg-indigo-400 disabled:cursor-not-allowed" className="mt-4 inline-flex w-full items-center justify-center rounded-md bg-indigo-500 px-4 py-2 text-sm font-semibold leading-6 text-white shadow transition duration-150 ease-in-out hover:bg-indigo-400 disabled:cursor-not-allowed"
onClick={() => void handleRecording()} onClick={() => void handleRecording()}
> >
<span>Start recording</span> <span>Start recording</span>
@ -322,6 +323,7 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
) : null} ) : null}
{step === "in" ? ( {step === "in" ? (
<div className="flex flex-row items-center justify-center"> <div className="flex flex-row items-center justify-center">
<Tooltip title="Finish recording">
<div <div
onClick={handleStop} onClick={handleStop}
className="flex cursor-pointer flex-row items-center justify-center rounded pr-2 text-lg hover:bg-gray-200" className="flex cursor-pointer flex-row items-center justify-center rounded pr-2 text-lg hover:bg-gray-200"
@ -333,7 +335,9 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
setDuration={setDuration} setDuration={setDuration}
/> />
</div> </div>
</Tooltip>
<div className="mx-2 h-6 w-px bg-[#E7E9EB]"></div> <div className="mx-2 h-6 w-px bg-[#E7E9EB]"></div>
<Tooltip title={pause ? "Resume" : "Pause"}>
<div <div
onClick={handlePause} onClick={handlePause}
className="cursor-pointer rounded p-1 hover:bg-gray-200" className="cursor-pointer rounded p-1 hover:bg-gray-200"
@ -344,15 +348,21 @@ export default function Recorder({ closeModal, step, setStep }: Props) {
aria-hidden="true" aria-hidden="true"
/> />
) : ( ) : (
<PauseIcon className="h-6 w-6 text-gray-400" aria-hidden="true" /> <PauseIcon
className="h-6 w-6 text-gray-400"
aria-hidden="true"
/>
)} )}
</div> </div>
</Tooltip>
<Tooltip title="Cancel recording">
<div <div
onClick={handleDelete} onClick={handleDelete}
className="ml-1 cursor-pointer rounded p-1 hover:bg-gray-200" className="ml-1 cursor-pointer rounded p-1 hover:bg-gray-200"
> >
<TrashIcon className="h-6 w-6 text-gray-400" aria-hidden="true" /> <TrashIcon className="h-6 w-6 text-gray-400" aria-hidden="true" />
</div> </div>
</Tooltip>
</div> </div>
) : null} ) : null}
{step === "post" ? ( {step === "post" ? (