49 |
99 |
50 |
53 | {Object.keys(playing).length ? (
54 | Browse Music
51 |
55 |
75 | ) : null}
76 |
56 |
71 |
57 |
69 |
70 |
58 |
62 |
63 |
68 | {playing.title}
64 |65 | {playing.artist} • {playing.duration} 66 |
67 |
72 |
74 |
77 | {dataList.map((item, ind) => (
78 |
98 | setPlaying(item)}
82 | >
83 |
96 | ))}
97 |
84 |
94 |
85 |
87 |
88 |
93 | {item.title}
89 |90 | {item.artist} • {item.duration} 91 |
92 |
46 |
50 |
52 |
53 |
77 |
47 |
49 |
78 |
82 |
79 |
81 |
60 |
188 | );
189 | };
190 |
191 | export default VideoCard;
192 |
--------------------------------------------------------------------------------
/src/components/UI/Cards/VideoCard/index.js:
--------------------------------------------------------------------------------
1 | export { default } from "./VideoCard";
2 |
--------------------------------------------------------------------------------
/src/components/UI/Convert/Convert.scss:
--------------------------------------------------------------------------------
1 | .Convert {
2 | width: 100%;
3 | min-height: 230px;
4 | background: #080808 0% 0% no-repeat padding-box;
5 | color: white;
6 | border-radius: 10px;
7 |
8 | display: flex;
9 | flex-direction: row;
10 | align-items: center;
11 | flex-wrap: wrap;
12 | gap: 0.5rem;
13 | justify-content: space-evenly;
14 | padding: 1rem;
15 |
16 | &__box {
17 | min-width: 200px;
18 | min-height: 120px;
19 | background-color: #080808;
20 | color: #fff;
21 | border-radius: 4px;
22 | border: 1px solid white;
23 |
24 | display: grid;
25 | place-items: center;
26 | cursor: pointer;
27 | font-size: 1.5rem;
28 | font-weight: 600;
29 |
30 | transition: color ease-in 0.5s, background-color ease-in 0.5s;
31 |
32 | &--active {
33 | background-color: #fff;
34 | color: #080808;
35 | }
36 |
37 | &:hover {
38 | background-color: #fff;
39 | color: #080808;
40 | }
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/UI/Convert/Convert.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 | import "./Convert.scss";
3 | import { RootState } from "../../../redux/store";
4 | import { useSelector, useDispatch } from "react-redux";
5 | import { SETCURRENTTASK } from "../../../redux/slices/currentTaskSlice";
6 |
7 | const Convert = (): JSX.Element => {
8 | const [active, setActive] = useState(0);
9 |
10 | const conversionList = ["gif", "mp4", "wav", "avi", "m4a", "mp3"];
11 |
12 | const currentTask = useSelector(
13 | (state: RootState) => state.currentTask.currentTask
14 | );
15 |
16 | const dispatch = useDispatch();
17 |
18 | return (
19 |
61 |
96 |
97 |
98 |
187 |
99 |
106 | {secondsToTime(currentTime)}
105 |
107 |
186 |
108 |
148 |
109 | {
111 | videoRef.current.currentTime -= 5;
112 | }}
113 | >
114 |
144 |
145 |
147 |
149 |
185 |
20 | {conversionList.map((item, ind) => (
21 |
40 | );
41 | };
42 |
43 | export default Convert;
44 |
--------------------------------------------------------------------------------
/src/components/UI/Convert/index.js:
--------------------------------------------------------------------------------
1 | export { default } from "./Convert";
2 |
--------------------------------------------------------------------------------
/src/components/UI/Dropdown/Dropdown.scss:
--------------------------------------------------------------------------------
1 | .Dropdown {
2 | min-width: 67px;
3 | background-color: #242625;
4 | border-radius: 5px;
5 |
6 | cursor: pointer;
7 | position: relative;
8 | z-index: 2;
9 |
10 | &__current {
11 | display: flex;
12 | flex-direction: row;
13 | align-items: center;
14 | justify-content: space-between;
15 | }
16 |
17 | &__item {
18 | padding: 4px 8px;
19 | }
20 |
21 | &__list {
22 | position: absolute;
23 | left: 0;
24 | bottom: 0%;
25 | background-color: #242625;
26 | width: 100%;
27 | height: max-content;
28 | overflow: hidden;
29 | transition: max-height 0.5s;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/UI/Dropdown/Dropdown.tsx:
--------------------------------------------------------------------------------
1 | import "./Dropdown.scss";
2 | import { BiChevronDown } from "react-icons/bi";
3 | import { useState } from "react";
4 |
5 | interface DropdownProps {
6 | list: string[];
7 | up?: boolean;
8 | }
9 |
10 | const Dropdown = ({ list, up }: DropdownProps): JSX.Element => {
11 | const [collapsed, setCollapsed] = useState(true);
12 |
13 | return (
14 | {
27 | setActive(ind);
28 | dispatch(
29 | SETCURRENTTASK({
30 | ...currentTask,
31 | details: conversionList[ind],
32 | })
33 | );
34 | }}
35 | >
36 | {item}
37 |
38 | ))}
39 | setCollapsed(!collapsed)}>
15 |
33 | );
34 | };
35 |
36 | export default Dropdown;
37 |
--------------------------------------------------------------------------------
/src/components/UI/Dropdown/index.js:
--------------------------------------------------------------------------------
1 | export { default } from "./Dropdown";
2 |
--------------------------------------------------------------------------------
/src/components/UI/Modals/Modal/Modal.scss:
--------------------------------------------------------------------------------
1 | .modal-div {
2 | width: 100vw;
3 | height: 100vh;
4 | place-items: center;
5 | overflow-y: scroll;
6 | background-color: #050404cb;
7 | color: #ffffff;
8 |
9 | &:focus {
10 | outline: none;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/UI/Modals/Modal/Modal.tsx:
--------------------------------------------------------------------------------
1 | import { createPortal } from "react-dom";
2 | import "./Modal.scss";
3 |
4 | interface ModalProps {
5 | children: JSX.Element;
6 | openModal: boolean;
7 | setOpenModal: (argg: boolean) => void;
8 | }
9 |
10 | const Modal = ({
11 | children,
12 | openModal,
13 | setOpenModal,
14 | }: ModalProps): JSX.Element => {
15 | return createPortal(
16 |
16 | {list[0]}
17 |
19 |
26 | {list.map((item, ind) => (
27 |
32 |
28 | {item}
29 |
30 | ))}
31 | {
22 | setOpenModal(false);
23 | }}
24 | onKeyDown={(ev) => {
25 | if (ev.code === "Escape") setOpenModal(false);
26 | }}
27 | tabIndex={3}
28 | >
29 | {children}
30 |
,
31 | document.getElementById("modal")!
32 | );
33 | };
34 |
35 | export default Modal;
36 |
--------------------------------------------------------------------------------
/src/components/UI/Modals/Modal/index.js:
--------------------------------------------------------------------------------
1 | export { default } from "./Modal";
2 |
--------------------------------------------------------------------------------
/src/components/UI/Modals/ModalChildren/ImportVideo.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import "./ModalChildren.scss";
3 | import { ImportVeditor, ImportDevice } from "../../../Assets/SVGs";
4 | import { IoClose } from "react-icons/io5";
5 | import { useDispatch } from "react-redux";
6 | import { Audio } from "react-loader-spinner";
7 | import { SETCURRENTVIDEO } from "../../../../redux/slices/currentVideoSlice";
8 | import { SETSTOREDVIDEO } from "../../../../redux/slices/storedVideoSlice";
9 | import { uploadVid } from "../../../../services/apis";
10 |
11 | interface ImportVideoProps {
12 | setOpenModal: (argg: boolean) => void;
13 | }
14 |
15 | const ImportVideo = ({ setOpenModal }: ImportVideoProps): JSX.Element => {
16 | const [loading, setLoading] = useState(false);
17 | const [myForm, setMyForm] = useState({});
18 |
19 | const dispatch = useDispatch();
20 |
21 | useEffect(() => {
22 | setMyForm(document.querySelector("#myForm")!);
23 | }, []);
24 |
25 | return (
26 | ev.stopPropagation()}>
27 |
95 | );
96 | };
97 |
98 | export default ImportVideo;
99 |
--------------------------------------------------------------------------------
/src/components/UI/Modals/ModalChildren/ModalChildren.scss:
--------------------------------------------------------------------------------
1 | .ImportVideo {
2 | width: 711px;
3 | height: 459px;
4 |
5 | background: #1a1a1a 0% 0% no-repeat padding-box;
6 | border-radius: 20px;
7 |
8 | display: flex;
9 | flex-direction: column;
10 | align-items: center;
11 | padding: 50px 109px 50px 109px;
12 | position: relative;
13 |
14 | &__header {
15 | display: flex;
16 | flex-direction: column;
17 | align-items: center;
18 | gap: 12px;
19 |
20 | p {
21 | font: normal normal normal 14px/18px Cerebri Sans;
22 | color: #bababa;
23 | }
24 | }
25 |
26 | &__options {
27 | display: flex;
28 | flex-direction: row;
29 | align-items: center;
30 | gap: 30px;
31 | margin-top: 2rem;
32 | }
33 |
34 | &__option {
35 | position: relative;
36 | width: 231px;
37 | height: 219px;
38 | background: #080808 0% 0% no-repeat padding-box;
39 | border-radius: 12px;
40 | display: flex;
41 | flex-direction: column;
42 | align-items: center;
43 | justify-content: flex-end;
44 | gap: 32px;
45 | cursor: pointer;
46 | padding: 45px 16px;
47 | font: normal normal bold 12px/16px Cerebri Sans;
48 | }
49 |
50 | input[type="file"] {
51 | position: absolute;
52 | top: 0;
53 | left: 0;
54 | width: 100%;
55 | height: 100%;
56 | opacity: 0;
57 | cursor: pointer;
58 | }
59 | }
60 |
61 | .close {
62 | width: 20px;
63 | height: 20px;
64 | background: rgba(255, 255, 255, 0.4) 0% 0% no-repeat padding-box;
65 | border-radius: 0.4rem;
66 |
67 | display: grid;
68 | place-items: center;
69 |
70 | position: absolute;
71 | top: 20px;
72 | right: 20px;
73 | cursor: pointer;
74 | }
75 |
--------------------------------------------------------------------------------
/src/components/UI/Modals/ModalChildren/index.js:
--------------------------------------------------------------------------------
1 | export { default as ImportVideo } from "./ImportVideo";
2 |
--------------------------------------------------------------------------------
/src/components/UI/ProfilePicture/ProfilePicture.scss:
--------------------------------------------------------------------------------
1 | .profileImg {
2 | width: 100%;
3 | height: 100%;
4 | border-radius: 50%;
5 | overflow: hidden;
6 | cursor: pointer;
7 |
8 | img {
9 | width: 100%;
10 | height: 100%;
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/UI/ProfilePicture/ProfilePicture.tsx:
--------------------------------------------------------------------------------
1 | import "./ProfilePicture.scss";
2 |
3 | const ProfilePicture = ({ imageURL }: { imageURL: string }): JSX.Element => (
4 |
28 |
31 |
91 | Import Video
29 |Please select how you would like to import your video
30 | setOpenModal(false)}>
92 |
94 |
5 | 
6 |
7 | );
8 |
9 | export default ProfilePicture;
10 |
--------------------------------------------------------------------------------
/src/components/UI/ProfilePicture/index.js:
--------------------------------------------------------------------------------
1 | export { default } from "./ProfilePicture";
2 |
--------------------------------------------------------------------------------
/src/components/UI/Slider/Slider.scss:
--------------------------------------------------------------------------------
1 | .Slider {
2 | width: 100%;
3 | height: 3px;
4 | background-color: rgba(186, 186, 186, 0.3);
5 | cursor: pointer;
6 | transition: width 0.3s;
7 |
8 | &__track {
9 | height: 100%;
10 | background-color: #18c96a;
11 | position: relative;
12 | // display: flex;
13 | // flex-direction: row;
14 | // align-items: center;
15 | }
16 |
17 | &__thumb {
18 | width: 18px;
19 | height: 18px;
20 | background-color: #18c96a;
21 | border-radius: 50%;
22 | position: absolute;
23 | top: 50%;
24 | right: 0;
25 | transform: translate(50%, -50%);
26 | cursor: pointer;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/components/UI/Slider/Slider.tsx:
--------------------------------------------------------------------------------
1 | import "./Slider.scss";
2 | import { useDispatch } from "react-redux";
3 | import { SETCURRENTTIME } from "../../../redux/slices/currentTimeSlice";
4 |
5 | interface SliderProps {
6 | posn: number;
7 | duration: number;
8 | vidElement: HTMLVideoElement;
9 | }
10 |
11 | const Slider = ({ posn, duration, vidElement }: SliderProps): JSX.Element => {
12 | const dispatch = useDispatch();
13 | // const currentTime = useSelector(
14 | // (state: RootState) => state.currentTime.currentTime
15 | // );
16 |
17 | return (
18 | {
21 | const { currentTarget, clientX } = ev;
22 | if (currentTarget) {
23 | console.log(clientX);
24 | const offsetLeft = (currentTarget as HTMLDivElement)
25 | .offsetLeft;
26 | const clientWidth = (currentTarget as HTMLDivElement)
27 | .clientWidth;
28 | let newVal = clientX - offsetLeft;
29 | if (newVal < 0) {
30 | newVal = 0;
31 | } else if (newVal > clientWidth) {
32 | newVal = clientWidth;
33 | }
34 | dispatch(SETCURRENTTIME((newVal / clientWidth) * duration));
35 | vidElement.currentTime = (newVal / clientWidth) * duration;
36 | }
37 | }}
38 | >
39 |
48 | );
49 | };
50 |
51 | export default Slider;
52 |
--------------------------------------------------------------------------------
/src/components/UI/Slider/index.js:
--------------------------------------------------------------------------------
1 | export { default } from "./Slider";
2 |
--------------------------------------------------------------------------------
/src/components/UI/Timeline/Timeline.scss:
--------------------------------------------------------------------------------
1 | .TimelineGrid {
2 | display: grid;
3 | grid-template-rows: 54.5px 56px 56px 1fr;
4 | gap: 0;
5 | background: #080808 0% 0% no-repeat padding-box;
6 | color: white;
7 | border-radius: 10px;
8 | min-height: 230px;
9 | & > :last-child {
10 | border-bottom: 0;
11 | }
12 | }
13 |
14 | .TimelineGridRow {
15 | display: grid;
16 | grid-template-columns: 130px 1fr;
17 | gap: 0;
18 | border-bottom: 1px solid #bfbfbf27;
19 |
20 | & > :first-child {
21 | border-right: 1px solid #bfbfbf27;
22 | }
23 |
24 | &__icons {
25 | display: flex;
26 | flex-direction: row;
27 | align-items: center;
28 | justify-content: center;
29 | gap: 1rem;
30 | }
31 | }
32 |
33 | .timelineWrapper {
34 | padding: 11.5px 15.5px;
35 |
36 | &--header {
37 | display: flex;
38 | flex-direction: column;
39 | justify-content: flex-end;
40 | padding: 0 15.5px;
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/components/UI/Timeline/Timeline.tsx:
--------------------------------------------------------------------------------
1 | import TimelineRow from "./TimelineRow";
2 | import "./Timeline.scss";
3 | import { RootState } from "../../../redux/store";
4 | import { useSelector, useDispatch } from "react-redux";
5 | import { SETEDGETIMES } from "../../../redux/slices/edgeTimesSlice";
6 | import { SETCURRENTTIME } from "../../../redux/slices/currentTimeSlice";
7 | import { useEffect } from "react";
8 |
9 | const Timeline = (): JSX.Element => {
10 | const dispatch = useDispatch();
11 | const duration = useSelector((state: RootState) => state.duration.duration);
12 |
13 | useEffect(() => {
14 | dispatch(SETEDGETIMES({ start: 0, end: duration }));
15 | dispatch(SETCURRENTTIME(0));
16 | console.log("mounted");
17 | }, [dispatch, duration]);
18 |
19 | return (
20 |
45 |
46 |
47 |
21 |
26 | );
27 | };
28 |
29 | export default Timeline;
30 |
--------------------------------------------------------------------------------
/src/components/UI/Timeline/TimelineRow.tsx:
--------------------------------------------------------------------------------
1 | import { HiOutlineDuplicate } from "react-icons/hi";
2 | import { FiSettings } from "react-icons/fi";
3 | import { IoVideocam } from "react-icons/io5";
4 | import { CgEyeAlt } from "react-icons/cg";
5 | import { MusicIcon } from "../../Assets/SVGs";
6 | import { AudioTimeline, VideoTimeline, TimelineHeader } from "../Timelines";
7 |
8 | import "./Timeline.scss";
9 |
10 | interface TimelineRowProps {
11 | variant: string;
12 | }
13 |
14 | const TimelineRow = ({ variant }: TimelineRowProps): JSX.Element => {
15 | switch (variant) {
16 | case "header":
17 | return (
18 |
19 |
27 | );
28 |
29 | case "video":
30 | return (
31 |
20 |
23 |
24 |
26 |
32 |
40 | );
41 |
42 | case "song":
43 | return (
44 |
33 |
36 |
37 |
39 |
45 |
53 | );
54 |
55 | default:
56 | return (
57 |
46 |
49 |
50 |
52 |
58 |
59 |
60 |
61 | );
62 | }
63 | };
64 |
65 | export default TimelineRow;
66 |
--------------------------------------------------------------------------------
/src/components/UI/Timeline/index.js:
--------------------------------------------------------------------------------
1 | export { default } from "./Timeline";
2 |
--------------------------------------------------------------------------------
/src/components/UI/Timelines/AudioTimeline.tsx:
--------------------------------------------------------------------------------
1 | import "./Timelines.scss";
2 |
3 | const AudioTimeline = (): JSX.Element => {
4 | return (
5 |
6 |
7 |
12 | );
13 | };
14 |
15 | export default AudioTimeline;
16 |
--------------------------------------------------------------------------------
/src/components/UI/Timelines/TimelineHeader.tsx:
--------------------------------------------------------------------------------
1 | import "./Timelines.scss";
2 | import { secondsToTime } from "../../../helpers/functions";
3 |
4 | const TimelineHeader = (): JSX.Element => {
5 | return (
6 |
8 |
9 |
10 |
11 |
7 |
38 | );
39 | };
40 |
41 | export default TimelineHeader;
42 |
--------------------------------------------------------------------------------
/src/components/UI/Timelines/Timelines.scss:
--------------------------------------------------------------------------------
1 | .VideoTimeline {
2 | width: 100%;
3 | height: 100%;
4 | background: #6a6b6b 0% 0% no-repeat padding-box;
5 |
6 | border-radius: 5px;
7 | position: relative;
8 | user-select: none;
9 |
10 | &__green {
11 | // width: 100%;
12 | height: 100%;
13 | padding: 2px;
14 | // border-radius: 5px;
15 | background: #28714f 0% 0% no-repeat padding-box;
16 | position: absolute;
17 | top: 0;
18 | left: 0;
19 | right: 0;
20 | cursor: grab;
21 | }
22 |
23 | &__edge {
24 | width: 7px;
25 | height: 100%;
26 | position: absolute;
27 | top: 0;
28 | background-color: white;
29 | cursor: e-resize;
30 |
31 | &--left {
32 | border-top-left-radius: 3px;
33 | border-bottom-left-radius: 3px;
34 | left: 0;
35 | transform: translateX(-70%);
36 | }
37 | &--right {
38 | border-top-right-radius: 3px;
39 | border-bottom-right-radius: 3px;
40 | right: 0;
41 | transform: translateX(70%);
42 | }
43 | }
44 |
45 | &__placeholder {
46 | width: 42px;
47 | height: 100%;
48 | border-radius: 3px;
49 | background-image: url("../../../assets/images/imgPlaceholder.png");
50 | background-size: cover;
51 | }
52 |
53 | &__tracker {
54 | position: absolute;
55 | top: -25%;
56 | width: 2px;
57 | height: 48px;
58 | background: #ffffff 0% 0% no-repeat padding-box;
59 | cursor: e-resize;
60 |
61 | > :first-child {
62 | width: 6px;
63 | height: 6px;
64 | border-radius: 50%;
65 | background: #ffffff 0% 0% no-repeat padding-box;
66 | position: absolute;
67 | top: -2px;
68 | left: -100%;
69 | z-index: 1;
70 | }
71 | > :last-child {
72 | width: 6px;
73 | height: 6px;
74 | border-radius: 50%;
75 | background: #ffffff 0% 0% no-repeat padding-box;
76 | position: absolute;
77 | bottom: -2px;
78 | left: -100%;
79 | z-index: 1;
80 | }
81 | }
82 | }
83 |
84 | .AudioTimeline {
85 | width: 100%;
86 | height: 100%;
87 | background: #242625 0% 0% no-repeat padding-box;
88 |
89 | border-radius: 5px;
90 | position: relative;
91 | padding: 2px;
92 |
93 | &__tracker {
94 | position: absolute;
95 | top: -25%;
96 | width: 2px;
97 | height: 48px;
98 | background: #ffffff 0% 0% no-repeat padding-box;
99 | cursor: e-resize;
100 |
101 | > :first-child {
102 | width: 6px;
103 | height: 6px;
104 | border-radius: 50%;
105 | background: #ffffff 0% 0% no-repeat padding-box;
106 | position: absolute;
107 | top: -2px;
108 | left: -100%;
109 | z-index: 1;
110 | }
111 | > :last-child {
112 | width: 6px;
113 | height: 6px;
114 | border-radius: 50%;
115 | background: #ffffff 0% 0% no-repeat padding-box;
116 | position: absolute;
117 | bottom: -2px;
118 | left: -100%;
119 | z-index: 1;
120 | }
121 | }
122 | }
123 |
124 | .TimelineHeader {
125 | &__lines {
126 | display: flex;
127 | flex-direction: row;
128 | align-items: flex-end;
129 | gap: 3px;
130 | justify-content: space-between;
131 | }
132 |
133 | &__line {
134 | width: 0px;
135 | height: 10px;
136 | border: 1px solid #707070;
137 | position: relative;
138 |
139 | &--long {
140 | border-color: #18c96a;
141 | height: 17px;
142 | }
143 | }
144 |
145 | &__number {
146 | position: absolute;
147 | top: -150%;
148 | left: -100%;
149 | transform: translateX(-50%);
150 | font: normal normal normal 12px/16px Cerebri Sans;
151 | color: #bababa;
152 | }
153 | }
154 |
155 | @media screen and (max-width: 1180px) {
156 | .TimelineHeader {
157 | &__number {
158 | display: none;
159 | }
160 | }
161 | }
162 |
163 | @media screen and (max-width: 700px) {
164 | .TimelineHeader {
165 | &__line {
166 | display: none;
167 | }
168 | }
169 | }
170 |
--------------------------------------------------------------------------------
/src/components/UI/Timelines/VideoTimeline.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 | import { useRef, MutableRefObject } from "react";
3 | import "./Timelines.scss";
4 | import { RootState } from "../../../redux/store";
5 | import { useSelector, useDispatch } from "react-redux";
6 | import { SETCURRENTTIME } from "../../../redux/slices/currentTimeSlice";
7 | import { SETEDGETIMES } from "../../../redux/slices/edgeTimesSlice";
8 |
9 | const VideoTimeline = (): JSX.Element => {
10 | const vidTimelineRef = useRef() as MutableRefObject
8 | {Array(3)
9 | .fill(0)
10 | .map((item, ind) => (
11 |
12 | ))}
13 | {Array(28)
14 | .fill(0)
15 | .map((item, ind) => (
16 |
37 |
24 | {ind % 5 === 0 ? (
25 |
26 | {secondsToTime(ind)}
27 |
28 | ) : null}
29 |
30 | ))}
31 | {Array(3)
32 | .fill(0)
33 | .map((item, ind) => (
34 |
35 | ))}
36 |
130 |
172 | );
173 | };
174 |
175 | export default VideoTimeline;
176 |
--------------------------------------------------------------------------------
/src/components/UI/Timelines/index.js:
--------------------------------------------------------------------------------
1 | export { default as AudioTimeline } from "./AudioTimeline";
2 | export { default as VideoTimeline } from "./VideoTimeline";
3 | export { default as TimelineHeader } from "./TimelineHeader";
4 |
--------------------------------------------------------------------------------
/src/components/UI/VideoPlaceholder/VideoPlaceholder.scss:
--------------------------------------------------------------------------------
1 | .VideoPlaceholder {
2 | width: 100%;
3 | height: 100%;
4 | border-radius: 5px;
5 | overflow: hidden;
6 | position: relative;
7 |
8 | &__play {
9 | position: absolute;
10 | top: 0;
11 | left: 0;
12 | width: 100%;
13 | height: 100%;
14 | background: #000000a8;
15 | display: grid;
16 | place-items: center;
17 | border-radius: 5px;
18 | }
19 |
20 | img {
21 | width: 100%;
22 | height: 100%;
23 | min-width: 100%;
24 | min-height: 100%;
25 | // height: 100%;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/src/components/UI/VideoPlaceholder/VideoPlaceholder.tsx:
--------------------------------------------------------------------------------
1 | import "./VideoPlaceholder.scss";
2 | import { PlayIcon2 } from "../../Assets/SVGs";
3 |
4 | interface VideoPlaceholderProps {
5 | imageURL: string;
6 | video?: boolean;
7 | }
8 |
9 | const VideoPlaceholder = ({
10 | imageURL,
11 | video,
12 | }: VideoPlaceholderProps): JSX.Element => (
13 | {
134 | setResizing(true);
135 | console.log("start moving");
136 | console.log(ev.nativeEvent.offsetX);
137 | MouseDownFuncLeft(ev);
138 | }}
139 | >
140 | {}}
150 | >
151 |
152 |
153 |
161 |
157 |
158 |
159 |
160 | {
165 | setResizing(true);
166 | console.log("start moving");
167 | console.log(ev.nativeEvent.offsetX);
168 | MouseDownFuncRight(ev);
169 | }}
170 | >
171 |
14 |
15 | {video ? (
16 |
21 | );
22 |
23 | export default VideoPlaceholder;
24 |
--------------------------------------------------------------------------------
/src/components/UI/VideoPlaceholder/index.js:
--------------------------------------------------------------------------------
1 | export { default } from "./VideoPlaceholder";
2 |
--------------------------------------------------------------------------------
/src/components/UI/WaveForm/WaveForm.scss:
--------------------------------------------------------------------------------
1 | .WaveForm {
2 | width: 100%;
3 | height: 40px;
4 | background-color: #242625;
5 | }
6 |
--------------------------------------------------------------------------------
/src/components/UI/WaveForm/WaveForm.tsx:
--------------------------------------------------------------------------------
1 | import "./WaveForm.scss";
2 |
3 | const WaveForm = (): JSX.Element => ;
4 |
5 | export default WaveForm;
6 |
--------------------------------------------------------------------------------
/src/components/UI/WaveForm/index.js:
--------------------------------------------------------------------------------
1 | export { default } from "./WaveForm";
2 |
--------------------------------------------------------------------------------
/src/helpers/functions.tsx:
--------------------------------------------------------------------------------
1 | const doubleNumbers = (val: number): string => {
2 | return val < 10 ? `0${val}` : `${val}`;
3 | };
4 |
5 | export const secondsToTime = (secondsTime: number): string => {
6 | let microseconds: number, seconds: number, minutes: number, hours: number;
7 |
8 | hours = Math.floor(secondsTime / 3600);
9 | minutes = Math.floor((secondsTime - hours * 3600) / 60);
10 | seconds = Math.floor(secondsTime - (hours * 3600 + minutes * 60));
11 | microseconds = 0;
12 | return `${doubleNumbers(hours)}:${doubleNumbers(minutes)}:${doubleNumbers(
13 | seconds
14 | )}:${doubleNumbers(microseconds)}`;
15 | };
16 |
--------------------------------------------------------------------------------
/src/hooks/useModal.ts:
--------------------------------------------------------------------------------
1 | import { useState } from "react";
2 |
3 | export const useModal = () =>{
4 | const [openModal, setOpenModal] = useState(false);
5 | const [modalChild, setModalChild] = useState
17 |
19 | ) : null}
20 |