Merge branch 'main' into feature/login-ui

.github/workflows/server-production-deploy.yml

@@ -37,7 +37,7 @@ jobs:
         env:
           ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
           ECR_REPOSITORY: ${{ secrets.ECR_REPOSITORY }}
-          IMAGE_TAG: ${{ github.sha }}
+          IMAGE_TAG: latest
         run: |
           # Build a docker container and
           # push it to ECR so that it can

packages/front/.env.local.example

@@ -0,0 +1,11 @@
+# API
+NEXT_PUBLIC_API_BASE_URL=
+NEXT_PUBLIC_IMAGE_SRC_DOMAIN=
+
+# Firebase
+NEXT_PUBLIC_FIREBASE_API_KEY=
+NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
+NEXT_PUBLIC_FIREBASE_PROJECT_ID=
+NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
+NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
+NEXT_PUBLIC_FIREBASE_APP_ID=

packages/front/next.config.js

@@ -1,7 +1,16 @@
+// eslint-disable-next-line no-undef
+const IMAGE_SRC_DOMAIN = process.env.IMAGE_SRC_DOMAIN
 /** @type {import('next').NextConfig} */
 // eslint-disable-next-line
 module.exports = {
   reactStrictMode: true,
+  images: {
+    // eslint-disable-next-line no-undef
+    domains: [
+      ...(IMAGE_SRC_DOMAIN != null ? [IMAGE_SRC_DOMAIN] : []),
+      "lh3.googleusercontent.com",
+    ],
+  },
   webpack: (config) => {
     // load worker files as a urls with `file-loader`
     config.module.rules.unshift({

packages/front/package.json

@@ -25,13 +25,16 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-konva": "^17.0.2-5",
-    "react-pdf": "^5.4.1"
+    "react-pdf": "^5.4.1",
+    "react-toast-notifications": "^2.5.1",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^11.1.2",
     "@types/lodash.debounce": "^4.0.6",
     "@types/react": "17.0.31",
     "@types/react-pdf": "^5.0.8",
+    "@types/uuid": "^8.3.1",
     "eslint": "^8.0.1",
     "file-loader": "^6.2.0",
     "next-transpile-modules": "^8.0.0",

packages/front/src/components/atoms/PrimaryButton.tsx

@@ -1,16 +1,22 @@
 import React from "react"
 
 type PrimaryButtonProps = {
-  onClick: () => void
+  onClick?: () => void
   children: React.ReactNode
+  disabled?: boolean
 }
 
 const PrimaryButton: React.VFC<PrimaryButtonProps> = ({
   children,
   onClick,
+  disabled = false,
 }) => {
   return (
-    <button className="px-4 py-2 text-black rounded-lg bg-primary">
+    <button
+      className="px-4 py-2 text-black rounded-lg bg-primary disabled:bg-gray-200 disabled:text-gray-400"
+      onClick={onClick}
+      disabled={disabled}
+    >
       {children}
     </button>
   )

packages/front/src/components/atoms/Stamp.tsx

@@ -1,15 +1,27 @@
 import type { Stamp as StampModel } from "@domain/stamp"
-import React, { Fragment, useCallback, useRef, useState } from "react"
+import React, { Fragment, useCallback, useEffect, useState } from "react"
 import { Icon } from "./Icon"
 import { Popover, Transition } from "@headlessui/react"
 import { Play } from "react-feather"
 import Thread from "@components/components/Thread"
 
 export type StampProps = {
   stamp: StampModel
+  onAddComment: (
+    comment:
+      | { dataType: "audio"; content: Blob; title: string }
+      | { dataType: "text"; content: string },
+  ) => void
+  isTemporary?: boolean
+  onClose?: () => void
 }
 
-const Stamp: React.VFC<StampProps> = ({ stamp }) => {
+const Stamp: React.VFC<StampProps> = ({
+  stamp,
+  onAddComment,
+  isTemporary,
+  onClose,
+}) => {
   // const [popOverDirection, setPopOverDirection] = useState<
   //   "left" | "bottom" | "right"
   // >("bottom")
@@ -34,18 +46,25 @@ const Stamp: React.VFC<StampProps> = ({ stamp }) => {
   //   }
   // }, [])
 
+  const buttonRef = useCallback((node: HTMLButtonElement) => {
+    if (isTemporary) {
+      node?.click()
+    }
+  }, [])
+
   return (
     <Popover className="relative">
       {({ open }) => (
         <>
-          <Popover.Button>
+          <Popover.Button ref={buttonRef}>
             <div
               className="relative"
               // ref={handleIconRef}
             >
               <StampIcon stamp={stamp} open={open} />
             </div>
           </Popover.Button>
+          {onClose != null && <OpenCheck open={open} onClose={onClose} />}
           <Transition
             as={Fragment}
             enter="transition ease-out duration-200"
@@ -56,7 +75,7 @@ const Stamp: React.VFC<StampProps> = ({ stamp }) => {
             leaveTo="opacity-0 translate-y-1"
           >
             <Popover.Panel className="absolute z-10 max-w-sm px-4 transform sm:px-0 lg:max-w-3xl max-h-[540px] -translate-x-1/2 left-1/2 mt-4">
-              <Thread comments={stamp.comments} />
+              <Thread comments={stamp.comments} onAddComment={onAddComment} />
             </Popover.Panel>
           </Transition>
         </>
@@ -82,7 +101,7 @@ const StampIcon: React.VFC<{ stamp: StampModel; open: boolean }> = ({
         (open ? "opacity-0" : "")
       }
     />
-    {0 < stamp.comments.length && (
+    {2 <= stamp.comments.length && (
       <span className="absolute flex items-center justify-center w-5 h-5 text-[9px] tracking-tighter font-bold leading-none text-black rounded-full tabular-nums bg-primary top-[-10%] right-[-10%]">
         +{stamp.comments.length}
       </span>
@@ -98,3 +117,21 @@ const StampIcon: React.VFC<{ stamp: StampModel; open: boolean }> = ({
     </div>
   </div>
 )
+
+/**
+ * PopoverのonCloseイベントを取得するためのコンポーネント（ハック的なことをしている）
+ */
+const OpenCheck: React.VFC<{ open: boolean; onClose: () => void }> = ({
+  open,
+  onClose,
+}) => {
+  const [onceOpen, setOnceOpen] = useState(false)
+  useEffect(() => {
+    if (open) {
+      setOnceOpen(true)
+    } else if (onceOpen && !open) {
+      onClose()
+    }
+  }, [open])
+  return null
+}

packages/front/src/components/components/AudioComment.tsx

@@ -7,6 +7,8 @@ import { AudioComment } from "@domain/comment"
 import dynamic from "next/dynamic"
 const AudioGraph = dynamic(() => import("@components/atoms/AudioGraph"), {
   ssr: false,
+  // TODO: loading表示
+  // loading
 })
 
 /** サンプリング数 */
@@ -119,7 +121,12 @@ const AudioIndicator: React.VFC<AudioWaveProps> = ({ comment, onPlayEnd }) => {
 
   // 現在の再生位置（0~1で正規化）
   const progress =
-    audio.current == null
+    audio.current == null ||
+    audio.current.duration == null ||
+    audio.current.currentTime == null ||
+    audio.current.duration === 0 ||
+    Number.isNaN(audio.current.duration) ||
+    Number.isNaN(audio.current.currentTime)
       ? 0
       : audio.current.currentTime / audio.current.duration
 
@@ -147,7 +154,7 @@ const AudioIndicator: React.VFC<AudioWaveProps> = ({ comment, onPlayEnd }) => {
             )}
             {comment.title}
           </h1>
-          <div style={{ minHeight: CANVAS_HEIGHT }}>
+          <div style={{ minHeight: CANVAS_HEIGHT, minWidth: CANVAS_WIDTH }}>
             <AudioGraph
               data={data}
               progress={progress}

packages/front/src/components/components/PdfViewer/index.tsx

@@ -44,7 +44,11 @@ export const PDFViewer: React.VFC<PDFViewerProps> = ({
         const clientRect = element.getBoundingClientRect()
         const x = window.pageXOffset + clientRect.left
         const y = window.pageYOffset + clientRect.top
-        onStampAdd(index + 1, e.pageX - x, e.pageY - y)
+        onStampAdd(
+          index + 1,
+          (e.pageX - x) / clientRect.width,
+          (e.pageY - y) / clientRect.height,
+        )
       }
       element.addEventListener("dblclick", listener)
       listeners[index] = listener
@@ -98,7 +102,6 @@ const PdfPage: React.VFC<{
         renderTextLayer={true}
         className="react-pdf-page-div shadow-paper"
         width={width}
-        onLoadSuccess={(page) => console.log("getViewport", page.getViewport())}
       />
       {stamps.map((stamp) => (
         <div