chore(web): image and video blocks (#708)

Co-authored-by: nina992 <[email protected]>
reearth · Sep 29, 2023 · 97f64a5 · 97f64a5
1 parent 8fd9d35
commit 97f64a5
Show file tree

Hide file tree

Showing 11 changed files with 69 additions and 17 deletions.
diff --git a/web/src/beta/components/Overlay/index.tsx b/web/src/beta/components/Overlay/index.tsx
@@ -0,0 +1,22 @@
+import { styled } from "@reearth/services/theme";
+
+type Props = {
+  show?: boolean;
+  strong?: boolean;
+};
+
+const Overlay = styled.div<Props>`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: ${({ theme }) => theme.bg[1]};
+  opacity: ${({ show, strong }) => (show ? (strong ? 0.7 : 0.3) : 0)};
+  visibility: ${({ show }) => (show ? "visible" : "hidden")};
+  transition: all 0.2s;
+  transition-timing-function: ${({ show }) => (show ? "ease-in" : "ease-out")};
+  z-index: 1;
+  top: 0;
+  left: 0;
+`;
+
+export default Overlay;
diff --git a/web/src/beta/lib/core/StoryPanel/ActionPanel/index.tsx b/web/src/beta/lib/core/StoryPanel/ActionPanel/index.tsx
@@ -161,6 +161,7 @@ const Wrapper = styled.div<{ isSelected?: boolean; position?: ActionPosition }>`
   right: -1px;
   top: -25px;
   `}
+  z-index: 1;
 `;
 
 const BlockOptions = styled.div<{ isSelected?: boolean }>`

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Image/index.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Image/index.tsx
@@ -1,12 +1,11 @@
 import { useMemo } from "react";
 
+import type { CommonProps as BlockProps } from "@reearth//beta/lib/core/StoryPanel/Block/types";
+import BlockWrapper from "@reearth/beta/lib/core/StoryPanel/Block/builtin/common/Wrapper";
+import { getFieldValue } from "@reearth/beta/lib/core/StoryPanel/utils";
 import type { ValueTypes } from "@reearth/beta/utils/value";
 import { styled } from "@reearth/services/theme";
 
-import { getFieldValue } from "../../../utils";
-import type { CommonProps as BlockProps } from "../../types";
-import BlockWrapper from "../common/Wrapper";
-
 const ImageBlock: React.FC<BlockProps> = ({ block, isSelected, ...props }) => {
   const src = useMemo(
     () => getFieldValue(block?.property?.items ?? [], "src") as ValueTypes["string"],
@@ -15,7 +14,6 @@ const ImageBlock: React.FC<BlockProps> = ({ block, isSelected, ...props }) => {
 
   return (
     <BlockWrapper
-      title={block?.title}
       icon={block?.extensionId}
       isSelected={isSelected}
       propertyId={block?.property?.id}

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/index.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Markdown/index.tsx
@@ -32,7 +32,6 @@ const MdBlock: React.FC<Props> = ({ block, isSelected, ...props }) => {
 
   return (
     <BlockWrapper
-      title={block?.title}
       icon={block?.extensionId}
       isSelected={isSelected}
       propertyId={block?.property?.id}

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Text/index.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Text/index.tsx
@@ -35,7 +35,6 @@ const TextBlock: React.FC<Props> = ({ block, isSelected, ...props }) => {
 
   return (
     <BlockWrapper
-      title={block?.title}
       icon={block?.extensionId}
       isSelected={isSelected}
       propertyId={block?.property?.id}

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Title/index.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Title/index.tsx
@@ -25,7 +25,6 @@ const TitleBlock: React.FC<Props> = ({ block, isSelected, ...props }) => {
 
   return (
     <BlockWrapper
-      title={block?.title}
       icon={block?.extensionId}
       isSelected={isSelected}
       propertyId={block?.property?.id}

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Video/VideoPlayer.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Video/VideoPlayer.tsx
@@ -0,0 +1,25 @@
+import Player from "react-player";
+
+import Overlay from "@reearth/beta/components/Overlay";
+import { styled } from "@reearth/services/theme";
+
+type Props = {
+  isSelected?: boolean;
+  src?: string;
+  inEditor?: boolean;
+};
+const VideoPlayer: React.FC<Props> = ({ isSelected, src, inEditor }) => {
+  return (
+    <StyledWrapper>
+      <Overlay show={inEditor} />
+      <Player url={src} width="100%" playsinline pip controls light isselected={isSelected} />
+    </StyledWrapper>
+  );
+};
+
+export default VideoPlayer;
+
+const StyledWrapper = styled.div`
+  position: relative;
+  width: 100%;
+`;
diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/Video/index.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/Video/index.tsx
@@ -1,16 +1,25 @@
-import type { CommonProps as BlockProps } from "../../types";
-import BlockWrapper from "../common/Wrapper";
+import { useMemo } from "react";
+
+import type { CommonProps as BlockProps } from "@reearth//beta/lib/core/StoryPanel/Block/types";
+import BlockWrapper from "@reearth/beta/lib/core/StoryPanel/Block/builtin/common/Wrapper";
+import VideoPlayer from "@reearth/beta/lib/core/StoryPanel/Block/builtin/Video/VideoPlayer";
+import { getFieldValue } from "@reearth/beta/lib/core/StoryPanel/utils";
+import type { ValueTypes } from "@reearth/beta/utils/value";
 
 const VideoBlock: React.FC<BlockProps> = ({ block, isSelected, ...props }) => {
+  const src = useMemo(
+    () => getFieldValue(block?.property?.items ?? [], "src") as ValueTypes["string"],
+    [block?.property?.items],
+  );
   return (
     <BlockWrapper
-      title={block?.title}
       icon={block?.extensionId}
       isSelected={isSelected}
       propertyId={block?.property?.id}
       propertyItems={block?.property?.items}
-      {...props}
-    />
+      {...props}>
+      {src && <VideoPlayer isSelected={isSelected} src={src} inEditor={!!props.isEditable} />}
+    </BlockWrapper>
   );
 };
 

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/common/Wrapper.tsx b/web/src/beta/lib/core/StoryPanel/Block/builtin/common/Wrapper.tsx
@@ -20,7 +20,6 @@ type Spacing = {
 };
 
 type Props = {
-  title?: string;
   icon?: string;
   isSelected?: boolean;
   isEditable?: boolean;
@@ -35,7 +34,6 @@ type Props = {
 };
 
 const BlockWrapper: React.FC<Props> = ({
-  title,
   icon,
   isSelected,
   isEditable,
@@ -49,6 +47,7 @@ const BlockWrapper: React.FC<Props> = ({
   onRemove,
 }) => {
   const {
+    title,
     editMode,
     showSettings,
     defaultSettings,
@@ -62,7 +61,6 @@ const BlockWrapper: React.FC<Props> = ({
     propertyItems,
     onClick,
   });
-
   return (
     <BlockContext.Provider value={{ editMode }}>
       <SelectableArea

diff --git a/web/src/beta/lib/core/StoryPanel/Block/builtin/common/hooks.ts b/web/src/beta/lib/core/StoryPanel/Block/builtin/common/hooks.ts
@@ -21,6 +21,8 @@ export default ({ isSelected, propertyItems, onClick }: Props) => {
     }
   }, [isSelected, editMode]);
 
+  const title = useMemo(() => propertyItems?.[1]?.title, [propertyItems]);
+
   const handleBlockClick = useCallback(
     (e: MouseEvent<HTMLDivElement>) => {
       e.stopPropagation();
@@ -45,6 +47,7 @@ export default ({ isSelected, propertyItems, onClick }: Props) => {
   const handleSettingsToggle = () => setShowSettings?.(s => !s);
 
   return {
+    title,
     editMode,
     showSettings,
     defaultSettings,

diff --git a/web/src/beta/lib/core/StoryPanel/Block/index.tsx b/web/src/beta/lib/core/StoryPanel/Block/index.tsx
@@ -20,7 +20,6 @@ export default function StoryBlockComponent({
 }: Props): JSX.Element | null {
   const builtinBlockId = `${props.block?.pluginId}/${props.block?.extensionId}`;
   const Builtin = isBuiltinStoryBlock(builtinBlockId) ? builtin[builtinBlockId] : undefined;
-
   const handleRemove = useCallback(() => onRemove?.(props.block?.id), [props.block?.id, onRemove]);
 
   return Builtin ? (