fix: pause audio when video preview open

Signed-off-by: Innei <[email protected]>

src/renderer/src/atoms/player.ts

@@ -61,7 +61,7 @@ export const Player = {
   get() {
     return getPlayerAtomValue()
   },
-  play(
+  mount(
     v: Omit<PlayerAtomValue, "show" | "status" | "playedSeconds" | "duration">,
   ) {
     const curV = getPlayerAtomValue()
@@ -103,6 +103,11 @@ export const Player = {
     this.currentTimeTimer && clearInterval(this.currentTimeTimer)
     this.audio.pause()
   },
+  play() {
+    const curV = getPlayerAtomValue()
+
+    this.mount(curV)
+  },
   pause() {
     const curV = getPlayerAtomValue()
     if (curV.status === "paused") {
@@ -122,7 +127,7 @@ export const Player = {
     if (curV.status === "playing") {
       return this.pause()
     } else if (curV.status === "paused") {
-      return this.play(curV)
+      return this.mount(curV)
     } else {
       return this.pause()
     }
@@ -171,3 +176,5 @@ export const Player = {
     })
   },
 }
+
+window.play = Player

src/renderer/src/components/ui/markdown/renderers/MarkdownP.tsx

@@ -60,7 +60,7 @@ const TimeStamp = (props: { time: string }) => {
     <span
       className="cursor-pointer tabular-nums text-theme-accent dark:text-theme-accent-500"
       onClick={() => {
-        Player.play({
+        Player.mount({
           type: "audio",
           entryId,
           src,

src/renderer/src/components/ui/media.tsx

@@ -94,7 +94,7 @@ const MediaImpl: FC<MediaProps> = ({
             className={cn(
               hidden && "hidden",
               !(props.width || props.height) && "size-full",
-              "bg-stone-100 object-cover",
+              "bg-stone-100 object-cover dark:bg-neutral-800",
               popper && "cursor-zoom-in",
               mediaContainerClassName,
             )}
@@ -173,6 +173,7 @@ const MediaImpl: FC<MediaProps> = ({
     handleClick,
     hidden,
     imgSrc,
+    mediaContainerClassName,
     popper,
     previewImageUrl,
     props,
@@ -188,4 +189,6 @@ const MediaImpl: FC<MediaProps> = ({
   )
 }
 
-export const Media: FC<MediaProps> = memo((props) => <MediaImpl {...props} key={props.src} />)
+export const Media: FC<MediaProps> = memo((props) => (
+  <MediaImpl {...props} key={props.src} />
+))

src/renderer/src/components/ui/modal/stacked/context.tsx

@@ -9,7 +9,7 @@ export const CurrentModalContext = createContext<CurrentModalContentProps>(
   null as any,
 )
 
-export type ModalContentComponent<T> = FC<ModalActionsInternal & T>
+export type ModalContentComponent<T = object> = FC<ModalActionsInternal & T>
 export type ModalActionsInternal = {
   dismiss: () => void
   setClickOutSideToDismiss: (value: boolean) => void

src/renderer/src/modules/entry-column/list-item-template.tsx

@@ -158,7 +158,7 @@ function AudioCover({
   const handleClickPlay = () => {
     if (!playStatus) {
       // switch this to play
-      Player.play({
+      Player.mount({
         type: "audio",
         entryId,
         src,

src/renderer/src/modules/entry-column/video-item.tsx

@@ -1,5 +1,7 @@
+import { Player } from "@renderer/atoms/player"
 import { m } from "@renderer/components/common/Motion"
 import { Media } from "@renderer/components/ui/media"
+import type { ModalContentComponent } from "@renderer/components/ui/modal"
 import { useModalStack } from "@renderer/components/ui/modal"
 import { NoopChildren } from "@renderer/components/ui/modal/stacked/utils"
 import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
@@ -8,7 +10,7 @@ import { cn } from "@renderer/lib/utils"
 import { GridItem } from "@renderer/modules/entry-column/grid-item-template"
 import { useEntry } from "@renderer/store/entry/hooks"
 import { useHover } from "@use-gesture/react"
-import { useMemo, useRef, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 
 import { ReactVirtuosoItemPlaceholder } from "../../components/ui/placeholder"
 import type { UniversalItemProps } from "./types"
@@ -60,14 +62,8 @@ export function VideoItem({
             e.stopPropagation()
             modalStack.present({
               title: "",
-              content: ({ dismiss }) => (
-                <m.div
-                  exit={{ scale: 0.94, opacity: 0 }}
-                  className="size-full p-12"
-                  onClick={() => dismiss()}
-                >
-                  <ViewTag src={iframeSrc} className="size-full" />
-                </m.div>
+              content: (props) => (
+                <PreviewVideoModalContent src={iframeSrc} {...props} />
               ),
               clickOutsideToDismiss: true,
               CustomModalComponent: NoopChildren,
@@ -115,3 +111,29 @@ export function VideoItem({
     </GridItem>
   )
 }
+
+const PreviewVideoModalContent: ModalContentComponent<{
+  src: string
+}> = ({ dismiss, src }) => {
+  const currentAudioPlayerIsPlay = useRef(Player.get().status === "playing")
+  useEffect(() => {
+    const currentValue = currentAudioPlayerIsPlay.current
+    if (currentValue) {
+      Player.pause()
+    }
+    return () => {
+      if (currentValue) {
+        Player.play()
+      }
+    }
+  }, [])
+  return (
+    <m.div
+      exit={{ scale: 0.94, opacity: 0 }}
+      className="size-full p-12"
+      onClick={() => dismiss()}
+    >
+      <ViewTag src={src} className="size-full" />
+    </m.div>
+  )
+}