Skip to content

Commit

Permalink
[ShootingPage][Todo] feat: 촬영 페이지 녹화 기능 추가
Browse files Browse the repository at this point in the history 
- template 로딩이 됬다는 가정하에 로직 시작하게 변경 (추후에 layout으로 처리)
- mediaExtension: 모든 mediaelement시 tainted canvas를 방지하기 위해 anonymous 속성 추가
- audio context userinteraction 시 동작하게 구현
  • Loading branch information
@hyeongjun3
hyeongjun3 committed Apr 28, 2024
1 parent fd72b70 commit b06f276
Show file tree
Hide file tree
Showing 7 changed files with 381 additions and 235 deletions.
14 changes: 7 additions & 7 deletions src/main.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";

ReactDOM.createRoot(document.getElementById('root')!).render(
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>,
)
</React.StrictMode>
);
201 changes: 4 additions & 197 deletions src/pages/shooting/Shooting.page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,12 @@
import useLateTemplate from "@Hooks/useLateTemplate";
import ShootingManager from "@Utils/shootingManager";
import { mergeClassName } from "@Utils/styleExtension";
import { ComponentProps, useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import ShootingSubPage from "@Pages/shooting/Shooting.subPage";
import { useParams } from "react-router-dom";

// HJ TODO: loading state 제거 및 ref useEffect로 넣어서 cleanup 실행
export default function ShootingPage() {
const navigate = useNavigate();

const { templateId } = useParams();
const templateQuery = useLateTemplate();

const [shootingManager] = useState(new ShootingManager());

const goBack = () => navigate(-1);

const start = async () => {
shootingManager.shooting();
};

useEffect(() => {
return () => {
shootingManager.pause();
};
}, []);

if (templateQuery.status === "pending") return <div>loading</div>;
if (templateQuery.status === "error") return <div>error</div>;

Expand All @@ -33,181 +16,5 @@ export default function ShootingPage() {

if (!template || template.state !== "ready") return <div>error</div>;

return (
<div className="flex h-full flex-col justify-between">
<div className="flex h-full relative">
<canvas
ref={(ref) => {
ref && shootingManager.setUp(ref);
}}
className="absolute w-full aspect-[9/16]"
/>
<button
className="absolute bottom-[32px] left-0 right-0 m-auto w-fit z-10"
onClick={start}
>
<IconStart />
</button>
<div
className="absolute top-[24px] left-[14px] flex flex-row items-center gap-[8px]"
onClick={goBack}
>
<IconBack />
<p className="font-yClover text-white font-bold">뒤로가기</p>
</div>
<div className="absolute top-[24px] right-[14px] flex flex-row justify-center gap-[16px]">
<IconButton className="bg-[rgba(255,255,255,0.25)]">
<IconStick />
</IconButton>
<IconButton
className="bg-[rgba(255,255,255,0.25)]"
onClick={() => shootingManager.flipCamera()}
>
<IconCamera />
</IconButton>
</div>
</div>
</div>
);
}

function IconButton({ className, ...props }: ComponentProps<"button">) {
return (
<button
className={mergeClassName(
"flex justify-center items-center gap-[4px] p-[8px] rounded-[8px]",
className
)}
{...props}
/>
);
}

function IconBack() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M12 9.05887V6.49987C11.9997 6.30224 11.9409 6.10914 11.831 5.94488C11.7211 5.78063 11.565 5.65258 11.3825 5.57687C11.2 5.50115 10.9991 5.48117 10.8052 5.51943C10.6113 5.55769 10.4331 5.65248 10.293 5.79187L4 11.9999L10.293 18.2069C10.3857 18.3001 10.4958 18.374 10.6171 18.4245C10.7385 18.4749 10.8686 18.5009 11 18.5009C11.1314 18.5009 11.2615 18.4749 11.3829 18.4245C11.5042 18.374 11.6143 18.3001 11.707 18.2069C11.7999 18.1141 11.8736 18.0038 11.9239 17.8825C11.9742 17.7612 12 17.6312 12 17.4999V15.0109C14.75 15.0789 17.755 15.5769 20 18.9999V17.9999C20 13.3669 16.5 9.55687 12 9.05887Z"
fill="white"
/>
</svg>
);
}

function IconImage() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3 6C3 5.20435 3.31607 4.44129 3.87868 3.87868C4.44129 3.31607 5.20435 3 6 3H18C18.7956 3 19.5587 3.31607 20.1213 3.87868C20.6839 4.44129 21 5.20435 21 6V18C21 18.7956 20.6839 19.5587 20.1213 20.1213C19.5587 20.6839 18.7956 21 18 21H6C5.20435 21 4.44129 20.6839 3.87868 20.1213C3.31607 19.5587 3 18.7956 3 18V6ZM18.75 14.5605C18.75 14.362 18.6712 14.1716 18.531 14.031L17.031 12.531C16.9613 12.4612 16.8786 12.4057 16.7874 12.3679C16.6963 12.3301 16.5987 12.3107 16.5 12.3107C16.4013 12.3107 16.3037 12.3301 16.2126 12.3679C16.1214 12.4057 16.0387 12.4612 15.969 12.531L14.031 14.469C13.9613 14.5388 13.8786 14.5943 13.7874 14.6321C13.6963 14.6699 13.5987 14.6893 13.5 14.6893C13.4013 14.6893 13.3037 14.6699 13.2126 14.6321C13.1214 14.5943 13.0387 14.5388 12.969 14.469L9.531 11.031C9.46133 10.9612 9.37857 10.9057 9.28745 10.8679C9.19633 10.8301 9.09865 10.8107 9 10.8107C8.90135 10.8107 8.80367 10.8301 8.71255 10.8679C8.62143 10.9057 8.53867 10.9612 8.469 11.031L5.469 14.031C5.3288 14.1716 5.25004 14.362 5.25 14.5605V18C5.25 18.1989 5.32902 18.3897 5.46967 18.5303C5.61032 18.671 5.80109 18.75 6 18.75H18C18.1989 18.75 18.3897 18.671 18.5303 18.5303C18.671 18.3897 18.75 18.1989 18.75 18V14.5605ZM18 7.5C18 7.89782 17.842 8.27936 17.5607 8.56066C17.2794 8.84196 16.8978 9 16.5 9C16.1022 9 15.7206 8.84196 15.4393 8.56066C15.158 8.27936 15 7.89782 15 7.5C15 7.10218 15.158 6.72064 15.4393 6.43934C15.7206 6.15804 16.1022 6 16.5 6C16.8978 6 17.2794 6.15804 17.5607 6.43934C17.842 6.72064 18 7.10218 18 7.5Z"
fill="white"
/>
</svg>
);
}

function IconRefresh() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M8.37302 15.0689H5.02502M5.02502 15.0689C5.02502 15.0689 7.81502 18.9749 12 18.9749C15.8525 18.9749 18.975 16.1849 18.975 12.8369M5.02502 15.0689V18.9749M15.627 8.9309H18.975M18.975 8.9309C18.975 8.9309 16.185 5.0249 12 5.0249C8.14759 5.0249 5.02502 7.8149 5.02502 11.1629M18.975 8.9309V5.0249"
stroke="white"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
}

function IconSound() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="25"
height="24"
viewBox="0 0 25 24"
fill="none"
>
<path
d="M2.04617 14.4299C1.60587 13.6959 1.37329 12.856 1.37329 12C1.37329 11.1441 1.60587 10.3042 2.04617 9.57016C2.18156 9.34419 2.36273 9.14905 2.57804 8.99728C2.79335 8.8455 3.03803 8.74044 3.29635 8.68886L5.42784 8.26206C5.55495 8.23689 5.6696 8.16891 5.75266 8.06944L8.35626 4.94335C9.8444 3.15557 10.5897 2.26294 11.2532 2.50341C11.9192 2.74388 11.9192 3.90719 11.9192 6.23382V17.7688C11.9192 20.0941 11.9192 21.2562 11.2545 21.4979C10.591 21.7371 9.84566 20.8445 8.35752 19.058L5.75014 15.9306C5.6674 15.8314 5.55324 15.7634 5.42658 15.738L3.29509 15.3112C3.03677 15.2596 2.79209 15.1546 2.57678 15.0028C2.36147 14.851 2.18156 14.6559 2.04617 14.4299Z"
fill="white"
/>
<path
d="M15.1121 7.54826C16.2867 8.7229 16.9495 10.3142 16.9559 11.9755C16.9622 13.6367 16.3117 15.233 15.1461 16.4166M20.3004 4.87793C22.1799 6.75719 23.2404 9.30317 23.2507 11.961C23.2611 14.6188 22.2205 17.173 20.3558 19.0668"
stroke="white"
strokeWidth="2.518"
strokeLinecap="round"
/>
</svg>
);
}

function IconStick() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M3.84506 3.84504C3.30444 4.3857 3.00073 5.11897 3.00073 5.88354C3.00073 6.64812 3.30444 7.38138 3.84506 7.92204L5.43206 9.51005C5.44424 9.49626 5.45691 9.48292 5.47006 9.47005L9.47006 5.47004C9.48293 5.4569 9.49627 5.44423 9.51006 5.43204L7.92206 3.84504C7.3814 3.30443 6.64813 3.00072 5.88356 3.00072C5.11898 3.00072 4.38572 3.30443 3.84506 3.84504ZM10.5681 6.49004C10.5559 6.50384 10.5432 6.51718 10.5301 6.53004L6.53006 10.53C6.5172 10.5432 6.50385 10.5559 6.49006 10.568L16.0781 20.156C16.6219 20.6817 17.3505 20.9726 18.1069 20.9662C18.8632 20.9598 19.5868 20.6564 20.1216 20.1216C20.6565 19.5868 20.9598 18.8632 20.9662 18.1069C20.9727 17.3505 20.6817 16.6219 20.1561 16.078L10.5681 6.49004ZM16.1001 2.30704C16.1354 2.21644 16.1972 2.13861 16.2775 2.08374C16.3578 2.02887 16.4528 1.99951 16.5501 1.99951C16.6473 1.99951 16.7423 2.02887 16.8226 2.08374C16.9029 2.13861 16.9647 2.21644 17.0001 2.30704L17.4301 3.40204C17.4541 3.464 17.4906 3.52032 17.5374 3.56747C17.5842 3.61462 17.6403 3.65159 17.7021 3.67604L18.7931 4.10804C18.8834 4.14403 18.9609 4.2063 19.0155 4.28679C19.07 4.36728 19.0992 4.46229 19.0992 4.55954C19.0992 4.6568 19.07 4.75181 19.0155 4.8323C18.9609 4.91279 18.8834 4.97506 18.7931 5.01104L17.7031 5.44304C17.6413 5.46743 17.5852 5.50425 17.5382 5.55121C17.4913 5.59817 17.4544 5.65427 17.4301 5.71604L17.0001 6.81004C16.9647 6.90065 16.9029 6.97848 16.8226 7.03335C16.7423 7.08822 16.6473 7.11758 16.5501 7.11758C16.4528 7.11758 16.3578 7.08822 16.2775 7.03335C16.1972 6.97848 16.1354 6.90065 16.1001 6.81004L15.6701 5.71504C15.6457 5.65327 15.6089 5.59717 15.5619 5.55021C15.5149 5.50325 15.4588 5.46643 15.3971 5.44204L14.3071 5.01004C14.2167 4.97406 14.1392 4.91179 14.0847 4.8313C14.0301 4.75081 14.0009 4.65579 14.0009 4.55854C14.0009 4.46129 14.0301 4.36628 14.0847 4.28579C14.1392 4.2053 14.2167 4.14303 14.3071 4.10704L15.3971 3.67504C15.4589 3.65054 15.5151 3.61357 15.5621 3.56644C15.609 3.5193 15.6458 3.463 15.6701 3.40104L16.1001 2.30704ZM19.9671 9.13004C20.0024 9.03944 20.0642 8.96161 20.1445 8.90674C20.2248 8.85187 20.3198 8.82251 20.4171 8.82251C20.5143 8.82251 20.6093 8.85187 20.6896 8.90674C20.7699 8.96161 20.8317 9.03944 20.8671 9.13004L21.0231 9.52905C21.0731 9.65405 21.1711 9.75304 21.2961 9.80204L21.6941 9.96004C21.7841 9.9962 21.8612 10.0585 21.9156 10.1388C21.9699 10.2192 21.999 10.314 21.999 10.411C21.999 10.5081 21.9699 10.6029 21.9156 10.6832C21.8612 10.7636 21.7841 10.8259 21.6941 10.862L21.2961 11.02C21.2343 11.0444 21.1782 11.0812 21.1312 11.1282C21.0843 11.1752 21.0474 11.2313 21.0231 11.293L20.8671 11.693C20.8317 11.7836 20.7699 11.8615 20.6896 11.9164C20.6093 11.9712 20.5143 12.0006 20.4171 12.0006C20.3198 12.0006 20.2248 11.9712 20.1445 11.9164C20.0642 11.8615 20.0024 11.7836 19.9671 11.693L19.8101 11.293C19.7858 11.2314 19.7491 11.1753 19.7023 11.1284C19.6556 11.0814 19.5996 11.0445 19.5381 11.02L19.1401 10.862C19.05 10.8259 18.9729 10.7636 18.9185 10.6832C18.8642 10.6029 18.8352 10.5081 18.8352 10.411C18.8352 10.314 18.8642 10.2192 18.9185 10.1388C18.9729 10.0585 19.05 9.9962 19.1401 9.96004L19.5381 9.80204C19.5996 9.77754 19.6556 9.74067 19.7023 9.69372C19.7491 9.64677 19.7858 9.59072 19.8101 9.52905L19.9671 9.13004ZM5.13306 15.307C5.16838 15.2164 5.23024 15.1386 5.31053 15.0837C5.39082 15.0289 5.48581 14.9995 5.58306 14.9995C5.6803 14.9995 5.77529 15.0289 5.85558 15.0837C5.93587 15.1386 5.99773 15.2164 6.03306 15.307L6.19006 15.707C6.21407 15.7689 6.25064 15.8251 6.29746 15.872C6.34427 15.919 6.40032 15.9558 6.46206 15.98L6.86006 16.137C6.9504 16.173 7.02788 16.2353 7.08246 16.3158C7.13704 16.3963 7.16621 16.4913 7.16621 16.5885C7.16621 16.6858 7.13704 16.7808 7.08246 16.8613C7.02788 16.9418 6.9504 17.0041 6.86006 17.04L6.46206 17.198C6.40044 17.2225 6.3445 17.2593 6.29771 17.3063C6.25092 17.3533 6.21428 17.4093 6.19006 17.471L6.03306 17.871C5.99773 17.9617 5.93587 18.0395 5.85558 18.0944C5.77529 18.1492 5.6803 18.1786 5.58306 18.1786C5.48581 18.1786 5.39082 18.1492 5.31053 18.0944C5.23024 18.0395 5.16838 17.9617 5.13306 17.871L4.97606 17.471C4.95183 17.4093 4.91519 17.3533 4.8684 17.3063C4.82161 17.2593 4.76567 17.2225 4.70406 17.198L4.30606 17.04C4.21571 17.0041 4.13823 16.9418 4.08366 16.8613C4.02908 16.7808 3.9999 16.6858 3.9999 16.5885C3.9999 16.4913 4.02908 16.3963 4.08366 16.3158C4.13823 16.2353 4.21571 16.173 4.30606 16.137L4.70406 15.98C4.76577 15.9555 4.82176 15.9185 4.86856 15.8713C4.91535 15.8242 4.95194 15.7679 4.97606 15.706L5.13306 15.307Z"
fill="white"
/>
</svg>
);
}

function IconCamera() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M3.34673 21.5778H20.6529C22.7422 21.5778 23.8072 20.5329 23.8072 18.4638V7.94708C23.8072 5.87793 22.7422 4.84336 20.6529 4.84336H18.3026C17.5192 4.84336 17.2783 4.68265 16.8262 4.18036L16.0123 3.27608C15.5203 2.72408 15.0082 2.42236 13.9633 2.42236H9.96559C8.93102 2.42236 8.41844 2.72408 7.91659 3.27608L7.10273 4.18036C6.66087 4.67236 6.40973 4.84336 5.6263 4.84336H3.3463C1.25702 4.84336 0.192017 5.87793 0.192017 7.94708V18.4638C0.192017 20.5329 1.25745 21.5778 3.34673 21.5778ZM16.2536 16.1135L14.3653 13.6222C14.1039 13.2806 14.2749 12.8388 14.6764 12.8388H16.0324C16.0324 10.3878 14.355 8.68036 11.9944 8.68036C11.2513 8.68036 10.6487 8.86122 10.0359 9.1925C9.35273 9.52422 8.83073 9.1325 8.83073 8.64008C8.83073 8.39922 8.94087 8.12793 9.2323 7.94708C9.87516 7.55536 10.8797 7.21379 11.9944 7.21379C15.1989 7.21379 17.5187 9.54436 17.5187 12.8388H18.7144C19.1259 12.8388 19.2772 13.2708 19.0157 13.6222L17.1172 16.1135C16.9063 16.3946 16.4846 16.4049 16.2536 16.1135ZM11.9944 18.2529C8.79044 18.2529 6.48002 15.8118 6.48002 12.6279H5.28473C4.86302 12.6279 4.72244 12.1861 4.98344 11.8342L6.88202 9.34336C7.09287 9.07208 7.51459 9.05193 7.73573 9.34336L9.6343 11.8342C9.8953 12.1856 9.7243 12.6279 9.31287 12.6279H7.95644C7.95644 14.9581 9.6343 16.7765 11.9944 16.7765C12.7479 16.7765 13.3607 16.5956 13.953 16.2742C14.6563 15.9228 15.1586 16.3445 15.1586 16.8566C15.1586 17.0979 15.0382 17.3289 14.757 17.5196C14.124 17.9311 13.0993 18.2529 11.9944 18.2529Z"
fill="white"
/>
</svg>
);
}

function IconStart() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="80"
height="80"
viewBox="0 0 80 80"
fill="none"
>
<rect width="80" height="80" rx="40" fill="white" />
<circle cx="40" cy="40" r="36" fill="black" />
<circle cx="40" cy="40" r="32" fill="white" />
</svg>
);
return <ShootingSubPage template={template} />;
}
Loading

0 comments on commit b06f276

Please sign in to comment.