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

72
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,37 +323,46 @@ 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">
<div <Tooltip title="Finish recording">
onClick={handleStop} <div
className="flex cursor-pointer flex-row items-center justify-center rounded pr-2 text-lg hover:bg-gray-200" onClick={handleStop}
> className="flex cursor-pointer flex-row items-center justify-center rounded pr-2 text-lg hover:bg-gray-200"
<StopIcon className="h-8 w-8 text-[#ff623f]" aria-hidden="true" /> >
<StopTime <StopIcon className="h-8 w-8 text-[#ff623f]" aria-hidden="true" />
running={!pause} <StopTime
duration={duration} running={!pause}
setDuration={setDuration} duration={duration}
/> setDuration={setDuration}
</div>
<div className="mx-2 h-6 w-px bg-[#E7E9EB]"></div>
<div
onClick={handlePause}
className="cursor-pointer rounded p-1 hover:bg-gray-200"
>
{pause ? (
<ResumeIcon
className="h-6 w-6 text-gray-400"
aria-hidden="true"
/> />
) : ( </div>
<PauseIcon className="h-6 w-6 text-gray-400" aria-hidden="true" /> </Tooltip>
)} <div className="mx-2 h-6 w-px bg-[#E7E9EB]"></div>
</div> <Tooltip title={pause ? "Resume" : "Pause"}>
<div <div
onClick={handleDelete} onClick={handlePause}
className="ml-1 cursor-pointer rounded p-1 hover:bg-gray-200" className="cursor-pointer rounded p-1 hover:bg-gray-200"
> >
<TrashIcon className="h-6 w-6 text-gray-400" aria-hidden="true" /> {pause ? (
</div> <ResumeIcon
className="h-6 w-6 text-gray-400"
aria-hidden="true"
/>
) : (
<PauseIcon
className="h-6 w-6 text-gray-400"
aria-hidden="true"
/>
)}
</div>
</Tooltip>
<Tooltip title="Cancel recording">
<div
onClick={handleDelete}
className="ml-1 cursor-pointer rounded p-1 hover:bg-gray-200"
>
<TrashIcon className="h-6 w-6 text-gray-400" aria-hidden="true" />
</div>
</Tooltip>
</div> </div>
) : null} ) : null}
{step === "post" ? ( {step === "post" ? (