implement NewVideoMenu to select recording or uploading
This commit is contained in:
MarconLP
parent
adaeec0ed0
commit
c1fb9da74e
4 changed files with 187 additions and 140 deletions
65
src/components/NewVideoMenu.tsx
Normal file
65
src/components/NewVideoMenu.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import { Menu, Transition } from "@headlessui/react";
|
||||
import { Fragment, useState } from "react";
|
||||
import VideoRecordModal from "~/components/VideoRecordModal";
|
||||
import VideoUploadModal from "~/components/VideoUploadModal";
|
||||
|
||||
export default function NewVideoMenu() {
|
||||
const [recordOpen, setRecordOpen] = useState<boolean>(false);
|
||||
const [uploadOpen, setUploadOpen] = useState<boolean>(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<VideoRecordModal open={recordOpen} setOpen={setRecordOpen} />
|
||||
<VideoUploadModal open={uploadOpen} setOpen={setUploadOpen} />
|
||||
<Menu as="div" className="relative inline-block text-left">
|
||||
<Menu.Button>
|
||||
<span className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]">
|
||||
New video
|
||||
</span>
|
||||
</Menu.Button>
|
||||
<Transition
|
||||
as={Fragment}
|
||||
enter="transition ease-out duration-100"
|
||||
enterFrom="transform opacity-0 scale-95"
|
||||
enterTo="transform opacity-100 scale-100"
|
||||
leave="transition ease-in duration-75"
|
||||
leaveFrom="transform opacity-100 scale-100"
|
||||
leaveTo="transform opacity-0 scale-95"
|
||||
>
|
||||
<Menu.Items className="absolute right-0 z-10 mt-2 origin-top-right divide-y divide-gray-100 rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
|
||||
<div className="px-1 py-1 ">
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<div
|
||||
onClick={() => setRecordOpen(true)}
|
||||
className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${
|
||||
active ? "bg-gray-100" : ""
|
||||
}`}
|
||||
>
|
||||
<p className="leading-2 text-sm leading-4">
|
||||
Record a video
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Menu.Item>
|
||||
<Menu.Item>
|
||||
{({ active }) => (
|
||||
<div
|
||||
onClick={() => setUploadOpen(true)}
|
||||
className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${
|
||||
active ? "bg-gray-100" : ""
|
||||
}`}
|
||||
>
|
||||
<p className="leading-2 text-sm leading-4">
|
||||
Upload a video
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</Menu.Item>
|
||||
</div>
|
||||
</Menu.Items>
|
||||
</Transition>
|
||||
</Menu>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -3,16 +3,16 @@ import { Dialog, Transition } from "@headlessui/react";
|
|||
const Recorder = dynamic(() => import("~/components/Recorder"), { ssr: false });
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
export default function VideoRecordModal() {
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||||
interface Props {
|
||||
open: boolean;
|
||||
setOpen: (value: boolean) => void;
|
||||
}
|
||||
|
||||
export default function VideoRecordModal({ open, setOpen }: Props) {
|
||||
const [step, setStep] = useState<"pre" | "in" | "post">("pre");
|
||||
|
||||
function closeModal() {
|
||||
setIsOpen(false);
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
setIsOpen(true);
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
|
|
@ -20,39 +20,30 @@ export default function VideoRecordModal() {
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<span
|
||||
onClick={openModal}
|
||||
className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]"
|
||||
>
|
||||
New video
|
||||
</span>
|
||||
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={handleClose}>
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="w-fit transform rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<Recorder
|
||||
closeModal={closeModal}
|
||||
step={step}
|
||||
setStep={setStep}
|
||||
/>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
<Transition appear show={open} as={Fragment}>
|
||||
<Dialog as="div" className="relative z-10" onClose={handleClose}>
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="w-fit transform rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<Recorder
|
||||
closeModal={closeModal}
|
||||
step={step}
|
||||
setStep={setStep}
|
||||
/>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,13 @@ import { api } from "~/utils/api";
|
|||
import axios from "axios";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
export default function VideoUploadModal() {
|
||||
interface Props {
|
||||
open: boolean;
|
||||
setOpen: (value: boolean) => void;
|
||||
}
|
||||
|
||||
export default function VideoUploadModal({ open, setOpen }: Props) {
|
||||
const router = useRouter();
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||||
const [submitting, setSubmitting] = useState<boolean>(false);
|
||||
const [file, setFile] = useState<File>();
|
||||
const getSignedUrl = api.video.getUploadUrl.useMutation();
|
||||
|
|
@ -19,11 +23,7 @@ export default function VideoUploadModal() {
|
|||
};
|
||||
|
||||
function closeModal() {
|
||||
setIsOpen(false);
|
||||
}
|
||||
|
||||
function openModal() {
|
||||
setIsOpen(true);
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
const handleSubmit = async (): Promise<void> => {
|
||||
|
|
@ -47,108 +47,99 @@ export default function VideoUploadModal() {
|
|||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<span
|
||||
onClick={openModal}
|
||||
className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]"
|
||||
<Transition appear show={open} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-10"
|
||||
onClose={() => void closeModal()}
|
||||
>
|
||||
New video
|
||||
</span>
|
||||
|
||||
<Transition appear show={isOpen} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="relative z-10"
|
||||
onClose={() => void closeModal}
|
||||
>
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="w-fit transform rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<label className="flex h-32 w-full min-w-[300px] cursor-pointer appearance-none justify-center rounded-md border-2 border-dashed border-gray-300 px-4 transition hover:border-gray-400 focus:outline-none">
|
||||
<span className="flex items-center space-x-2 text-[#292D34]">
|
||||
{file ? (
|
||||
<span className="font-medium">{file.name}</span>
|
||||
) : (
|
||||
<>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
||||
/>
|
||||
</svg>
|
||||
<span className="font-medium">
|
||||
{"Drop files to Attach, or browse"}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
<input
|
||||
accept="video/mp4,video/webm"
|
||||
onChange={handleFileChange}
|
||||
type="file"
|
||||
name="file_upload"
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-4 inline-flex items-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"
|
||||
disabled={submitting}
|
||||
onClick={() => void handleSubmit()}
|
||||
>
|
||||
{submitting ? (
|
||||
<div className="fixed inset-0 overflow-y-auto">
|
||||
<div className="flex min-h-full items-center justify-center p-4 text-center">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-out duration-300"
|
||||
enterFrom="opacity-0 scale-95"
|
||||
enterTo="opacity-100 scale-100"
|
||||
leave="ease-in duration-200"
|
||||
leaveFrom="opacity-100 scale-100"
|
||||
leaveTo="opacity-0 scale-95"
|
||||
>
|
||||
<Dialog.Panel className="w-fit transform rounded-lg bg-white p-6 text-left align-middle shadow-xl transition-all">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<label className="flex h-32 w-full min-w-[300px] cursor-pointer appearance-none justify-center rounded-md border-2 border-dashed border-gray-300 px-4 transition hover:border-gray-400 focus:outline-none">
|
||||
<span className="flex items-center space-x-2 text-[#292D34]">
|
||||
{file ? (
|
||||
<span className="font-medium">{file.name}</span>
|
||||
) : (
|
||||
<>
|
||||
<svg
|
||||
className="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="h-6 w-6"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
|
||||
/>
|
||||
</svg>
|
||||
Uploading...
|
||||
<span className="font-medium">
|
||||
{"Drop files to Attach, or browse"}
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>Upload</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</span>
|
||||
<input
|
||||
accept="video/mp4,video/webm"
|
||||
onChange={handleFileChange}
|
||||
type="file"
|
||||
name="file_upload"
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
type="button"
|
||||
className="mt-4 inline-flex items-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"
|
||||
disabled={submitting}
|
||||
onClick={() => void handleSubmit()}
|
||||
>
|
||||
{submitting ? (
|
||||
<>
|
||||
<svg
|
||||
className="-ml-1 mr-3 h-5 w-5 animate-spin text-white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
cy="12"
|
||||
r="10"
|
||||
stroke="currentColor"
|
||||
strokeWidth="4"
|
||||
></circle>
|
||||
<path
|
||||
className="opacity-75"
|
||||
fill="currentColor"
|
||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||
></path>
|
||||
</svg>
|
||||
Uploading...
|
||||
</>
|
||||
) : (
|
||||
<>Upload</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Transition.Child>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
</>
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import Image from "next/image";
|
|||
import { getTime } from "~/utils/getTime";
|
||||
import Checkout from "~/components/Checkout";
|
||||
import ProfileMenu from "~/components/ProfileMenu";
|
||||
import VideoRecordModal from "~/components/VideoRecordModal";
|
||||
import NewVideoMenu from "~/components/NewVideoMenu";
|
||||
|
||||
const VideoList: NextPage = () => {
|
||||
const router = useRouter();
|
||||
|
|
@ -34,7 +34,7 @@ const VideoList: NextPage = () => {
|
|||
{["active", "past_due"].includes(
|
||||
session?.user.stripeSubscriptionStatus ?? ""
|
||||
) ? (
|
||||
<VideoRecordModal />
|
||||
<NewVideoMenu />
|
||||
) : null}
|
||||
{status === "authenticated" && (
|
||||
<div className="ml-4 flex items-center justify-center">
|
||||
|
|
|
|||
Loading…
Reference in a new issue