Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(web): timeline block #750

Merged
merged 63 commits into from
Nov 8, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
63 commits
Select commit Hold shift + click to select a range
8e8203a
add timeline in installable block
mkumbobeaty Oct 15, 2023
5ae7427
improve timeline ui
mkumbobeaty Oct 17, 2023
458ad3e
improve timeline ui
mkumbobeaty Oct 17, 2023
427f668
add slider ui
mkumbobeaty Oct 18, 2023
ccc6f4c
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Oct 18, 2023
56520c2
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Oct 18, 2023
5d04c7d
implement intial time for time block
mkumbobeaty Oct 19, 2023
58ccd92
implement commit methods
mkumbobeaty Oct 19, 2023
f297922
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Oct 19, 2023
5a84334
improve play controll
mkumbobeaty Oct 20, 2023
fc33dd8
implement time settings
mkumbobeaty Oct 23, 2023
72cb98c
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Oct 23, 2023
1f96f54
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Oct 23, 2023
b694aee
refactor date fields settings
mkumbobeaty Oct 23, 2023
cc9b46d
resolve type
mkumbobeaty Oct 23, 2023
f3533f2
Update index.tsx
mkumbobeaty Oct 23, 2023
a0a245e
fix bug in speed
mkumbobeaty Oct 25, 2023
6d6b70a
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Oct 25, 2023
5638db9
improve datetime UI
mkumbobeaty Oct 25, 2023
5e78a26
improve time zone
mkumbobeaty Oct 25, 2023
8c4a8b2
Merge branch 'main' of github.com:reearth/reearth into chore/datetime
mkumbobeaty Oct 25, 2023
23a2974
remove unused code
mkumbobeaty Oct 25, 2023
f459ea6
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Oct 25, 2023
6dd05bf
update translation
mkumbobeaty Oct 25, 2023
9b09e97
implement timeline field UI
mkumbobeaty Oct 25, 2023
779903b
Merge branch 'main' of github.com:reearth/reearth into chore/datetime
mkumbobeaty Oct 26, 2023
c9ecef4
improve date-time fields
mkumbobeaty Oct 26, 2023
34bb411
add translation
mkumbobeaty Oct 26, 2023
b3e3390
update fields to contain values
mkumbobeaty Oct 26, 2023
33c65f4
Merge branch 'chore/datetime' of github.com:reearth/reearth into chor…
mkumbobeaty Oct 26, 2023
98da0da
improve timeline field modal
mkumbobeaty Oct 26, 2023
853f774
update re-render
mkumbobeaty Oct 26, 2023
7def22b
Merge branch 'chore/datetime' of github.com:reearth/reearth into chor…
mkumbobeaty Oct 26, 2023
61adcf6
check time range
mkumbobeaty Oct 26, 2023
3bf5323
improve update value
mkumbobeaty Oct 26, 2023
4190505
fix translation
mkumbobeaty Oct 26, 2023
7cf0b1f
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Oct 27, 2023
827f040
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Oct 27, 2023
562408a
update play and slider functionalities
mkumbobeaty Oct 28, 2023
3732eab
Merge branch 'chore/timeline-datetime' of github.com:reearth/reearth …
mkumbobeaty Oct 28, 2023
cefc551
improve settings
mkumbobeaty Oct 28, 2023
25d09b7
improve update value
mkumbobeaty Oct 28, 2023
9d313c8
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Oct 28, 2023
2482194
Merge branch 'chore/timeline-datetime' of github.com:reearth/reearth …
mkumbobeaty Oct 28, 2023
300a003
update settings
mkumbobeaty Oct 28, 2023
b511f31
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Oct 28, 2023
32c4086
Merge branch 'chore/timeline-block' of github.com:reearth/reearth int…
mkumbobeaty Oct 28, 2023
7d63723
improve in editor and settings
mkumbobeaty Oct 29, 2023
567ae5f
fix type
mkumbobeaty Oct 29, 2023
c23c5a2
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Nov 1, 2023
d9f1eaa
update time and playmode
mkumbobeaty Nov 1, 2023
22a091f
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Nov 1, 2023
03b4645
refactor play in timeline
mkumbobeaty Nov 3, 2023
57972f0
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Nov 3, 2023
7d01395
improve block functionalies
mkumbobeaty Nov 5, 2023
f869699
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Nov 5, 2023
6823390
playmode functionalities
mkumbobeaty Nov 6, 2023
d3b9a24
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Nov 7, 2023
b2fe776
fix looping
mkumbobeaty Nov 7, 2023
5c7ed56
onclick slider implementation
mkumbobeaty Nov 7, 2023
fc6fbfa
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Nov 7, 2023
c1cf000
allow click on pause
mkumbobeaty Nov 8, 2023
e8a77ec
Merge branch 'main' of github.com:reearth/reearth into chore/timeline…
mkumbobeaty Nov 8, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions web/src/beta/components/Icon/Icons/pause.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions web/src/beta/components/Icon/Icons/set.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions web/src/beta/components/Icon/Icons/slider.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions web/src/beta/components/Icon/Icons/timeline-play-left.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions web/src/beta/components/Icon/Icons/timeline-play-right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions web/src/beta/components/Icon/Icons/timelineStoryBlock.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions web/src/beta/components/Icon/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,11 @@ import Timeline from "./Icons/timeline.svg";
import PlayRight from "./Icons/play-right.svg";
import PlayLeft from "./Icons/play-left.svg";
import Ellipse from "./Icons/ellipse.svg";
import TimelinePlayRight from "./Icons/timeline-play-right.svg";
import TimelinePlayLeft from "./Icons/timeline-play-left.svg";
import Pause from "./Icons/pause.svg";
import Slider from "./Icons/slider.svg";
import Set from "./Icons/set.svg";

// Dashboard
import Dashboard from "./Icons/dashboard.svg";
Expand Down Expand Up @@ -85,6 +90,7 @@ import VideoStoryBlock from "./Icons/videoStoryBlock.svg";
import ImageStoryBlock from "./Icons/imageStoryBlock.svg";
import MdTextStoryBlock from "./Icons/mdTextStoryBlock.svg";
import CameraButtonStoryBlock from "./Icons/cameraButtonStoryBlock.svg";
import TimelineStoryBlock from "./Icons/timelineStoryBlock.svg";

// Widget tab
import Desktop from "./Icons/desktop.svg";
Expand Down Expand Up @@ -141,6 +147,11 @@ export default {
ellipse: Ellipse,
playRight: PlayRight,
playLeft: PlayLeft,
timelinePlayLeft: TimelinePlayLeft,
timelinePlayRight: TimelinePlayRight,
pause: Pause,
slider: Slider,
set: Set,
storyPage: StoryPage,
square: Square,
swiper: Swiper,
Expand Down Expand Up @@ -176,6 +187,7 @@ export default {
imageStoryBlock: ImageStoryBlock,
mdTextStoryBlock: MdTextStoryBlock,
cameraButtonStoryBlock: CameraButtonStoryBlock,
timelineStoryBlock: TimelineStoryBlock,
widget: Widgets,
widgets: Widgets,
menu: WidgetMenu,
Expand Down
28 changes: 16 additions & 12 deletions web/src/beta/components/fields/TimelineField/EditPanel/hooks.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,24 +21,28 @@ export default ({ timelineValues, onChange, onClose, setTimelineValues }: Props)
endTime: timelineValues?.endTime || "",
};

const endTime = new Date(updatedData?.endTime?.substring(0, 19) || new Date());

switch (fieldId) {
case "startTime":
updatedData.startTime = newValue;
break;
case "endTime":
updatedData.endTime = newValue;
updatedData.startTime = newValue || "";
break;
case "currentTime":
updatedData.currentTime = newValue;

if (
(updatedData.startTime &&
updatedData.endTime &&
new Date(updatedData.currentTime.substring(0, 19)) <
new Date(updatedData.startTime.substring(0, 19))) ||
new Date(updatedData.currentTime.substring(0, 19)) > endTime
updatedData.startTime &&
new Date(updatedData.currentTime.substring(0, 19)) <
new Date(updatedData.startTime.substring(0, 19))
) {
setWarning(true);
} else {
setWarning(false);
}
break;
case "endTime":
updatedData.endTime = newValue;
if (
updatedData.endTime &&
new Date(updatedData.currentTime.substring(0, 19)) >
new Date(updatedData?.endTime?.substring(0, 19))
) {
setWarning(true);
} else {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const EditPanel = ({
onChange,
}: EditPanelProps) => {
const t = useT();
const { warning, handleOnChange, onAppyChange } = useHooks({
const { isDisabled, warning, handleOnChange, onAppyChange } = useHooks({
timelineValues,
onChange,
onClose,
Expand All @@ -43,7 +43,7 @@ const EditPanel = ({
<Button
text={t("Apply")}
buttonType="primary"
disabled={warning}
disabled={!isDisabled || warning}
onClick={onAppyChange}
/>
}>
Expand All @@ -54,18 +54,18 @@ const EditPanel = ({
onChange={newValue => handleOnChange(newValue || "", "startTime")}
value={timelineValues?.startTime}
/>
<CustomDateTimeField
name={t("* End Time")}
onChange={newValue => handleOnChange(newValue || "", "endTime")}
description={t("End time for the timeline")}
value={timelineValues?.endTime}
/>
<CustomDateTimeField
name={t("* Current Time")}
description={t("Current time should be between start and end time")}
onChange={newValue => handleOnChange(newValue || "", "currentTime")}
value={timelineValues?.currentTime}
/>
<CustomDateTimeField
name={t("* End Time")}
onChange={newValue => handleOnChange(newValue || "", "endTime")}
description={t("End time for the timeline")}
value={timelineValues?.endTime}
/>
{warning && (
<DangerItem>
<Icon icon="alert" size={30} />
Expand Down
13 changes: 7 additions & 6 deletions web/src/beta/components/fields/TimelineField/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,13 @@ const TimelineField: React.FC<Props> = ({ name, description, value, onChange })

const handleTimelineModalOpen = useCallback(() => setOpenModal(true), []);

const [timelineValues, setTimelineValues] = useState(value);

const handleRemoveSetting = useCallback(() => {
if (!value) return;
onChange?.();
}, [value, onChange]);

const [timelineValues, setTimelineValues] = useState(value);

useEffect(() => {
setTimelineValues(value);
}, [value]);
Expand All @@ -52,10 +52,10 @@ const TimelineField: React.FC<Props> = ({ name, description, value, onChange })
{timelineValues?.startTime ?? t("not set")}
</TextWrapper>
<TextWrapper size="footnote" customColor>
{timelineValues?.endTime ?? t("not set")}
{timelineValues?.currentTime ?? t("not set")}
</TextWrapper>
<TextWrapper size="footnote" customColor>
{timelineValues?.currentTime ?? t("not set")}
{timelineValues?.endTime ?? t("not set")}
</TextWrapper>
</Timeline>
<DeleteIcon
Expand All @@ -68,7 +68,7 @@ const TimelineField: React.FC<Props> = ({ name, description, value, onChange })
<TriggerButton
buttonType="secondary"
text={t("set")}
icon="clock"
icon="set"
size="small"
iconPosition="left"
onClick={() => handleTimelineModalOpen()}
Expand All @@ -92,6 +92,7 @@ const Wrapper = styled.div`
display: flex;
flex-direction: column;
gap: 4px;
padding-bottom: 12px;
`;

const InputWrapper = styled.div<{ disabled?: boolean }>`
Expand Down Expand Up @@ -129,7 +130,7 @@ const Timeline = styled.div`
bottom: 10px;
left: 15px;
}
&:nth-child(2) {
&:nth-of-type(2n) {
&:before {
display: none;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ const StyledInput = styled.input`
border-radius: 4px;
padding: 4px 8px;
transition: all 0.3s;
flex: 1;
opacity: ${({ disabled }) => (disabled ? 0.6 : 1)};
pointer-events: ${({ disabled }) => (disabled ? "none" : "inherit")};
:focus {
Expand Down
1 change: 1 addition & 0 deletions web/src/beta/features/Editor/Visualizer/convert-story.ts
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@
original: PropertyGroupFragmentFragment | null | undefined,
linkedDatasetId: string | null | undefined,
datasets: DatasetMap | null | undefined,
): any => {

Check warning on line 123 in web/src/beta/features/Editor/Visualizer/convert-story.ts

View workflow job for this annotation

GitHub Actions / ci-web / ci

Unexpected any. Specify a different type
const allFields: Record<
string,
{
Expand Down Expand Up @@ -149,6 +149,7 @@
ui: toUi(schema.ui) || undefined,
title: schema.translatedTitle || undefined,
description: schema.translatedDescription || undefined,
choices: schema.choices || undefined,
};

if (!used) {
Expand Down
4 changes: 2 additions & 2 deletions web/src/beta/lib/core/Map/useTimelineManager.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export type Timeline = {
stop: Date;
};

type EngineClock = {
export type EngineClock = {
current: Date | undefined;
start: Date | undefined;
stop: Date | undefined;
Expand Down Expand Up @@ -56,7 +56,7 @@ type SetOptionsCommand = {
cmd: "SET_OPTIONS";
payload: Partial<Pick<TimelineOptions, "multiplier" | "rangeType" | "stepType">>;
};
type TimelineCommit = (PlayCommand | PauseCommand | SetTimeCommand | SetOptionsCommand) & {
export type TimelineCommit = (PlayCommand | PauseCommand | SetTimeCommand | SetOptionsCommand) & {
committer: TimelineCommitter;
};

Expand Down
Loading
Loading