From dbf2270b4cd621b7b3dcadc315556aa92a9b7cac Mon Sep 17 00:00:00 2001 From: Alexander Harding Date: Mon, 18 Nov 2024 17:30:58 -0600 Subject: [PATCH] Fix portal node inlining --- package.json | 2 +- pnpm-lock.yaml | 15 ++------------- .../media/video/OutPortalEventDispatcher.tsx | 2 +- src/features/media/video/Player.tsx | 4 ++-- src/features/media/video/Video.tsx | 4 ++-- src/features/media/video/VideoPortalProvider.tsx | 11 +++++++++-- 6 files changed, 17 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index 1cd5649200..2e5728fd9f 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "react-intersection-observer": "^9.13.1", "react-markdown": "^9.0.1", "react-redux": "^9.1.2", - "react-reverse-portal": "^2.1.2", + "react-reverse-portal": "link:../react-reverse-portal", "react-router": "^5.3.4", "react-router-dom": "^5.3.4", "react-textarea-autosize": "^8.5.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f17bef733f..d224e4581f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -188,8 +188,8 @@ importers: specifier: ^9.1.2 version: 9.1.2(@types/react@18.3.12)(react@0.0.0-experimental-b01722d5-20241114)(redux@5.0.1) react-reverse-portal: - specifier: ^2.1.2 - version: 2.1.2(react-dom@0.0.0-experimental-b01722d5-20241114(react@0.0.0-experimental-b01722d5-20241114))(react@0.0.0-experimental-b01722d5-20241114) + specifier: link:../react-reverse-portal + version: link:../react-reverse-portal react-router: specifier: ^5.3.4 version: 5.3.4(react@0.0.0-experimental-b01722d5-20241114) @@ -4909,12 +4909,6 @@ packages: resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} - react-reverse-portal@2.1.2: - resolution: {integrity: sha512-li4puNtBmMMJhtI+IVxeSX0RvK1ft8qjPSbCih4OKQ/YUIcROc31Nmo22gv94hTx8EUfR7fzZY47RuZF2YRMdQ==} - peerDependencies: - react: ^16.0.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 - react-router-dom@5.3.4: resolution: {integrity: sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==} peerDependencies: @@ -11739,11 +11733,6 @@ snapshots: react-refresh@0.14.2: {} - react-reverse-portal@2.1.2(react-dom@0.0.0-experimental-b01722d5-20241114(react@0.0.0-experimental-b01722d5-20241114))(react@0.0.0-experimental-b01722d5-20241114): - dependencies: - react: 0.0.0-experimental-b01722d5-20241114 - react-dom: 0.0.0-experimental-b01722d5-20241114(react@0.0.0-experimental-b01722d5-20241114) - react-router-dom@5.3.4(react@0.0.0-experimental-b01722d5-20241114): dependencies: '@babel/runtime': 7.24.7 diff --git a/src/features/media/video/OutPortalEventDispatcher.tsx b/src/features/media/video/OutPortalEventDispatcher.tsx index 48f8043679..7635fdb3df 100644 --- a/src/features/media/video/OutPortalEventDispatcher.tsx +++ b/src/features/media/video/OutPortalEventDispatcher.tsx @@ -1,7 +1,7 @@ import { styled } from "@linaria/react"; import React, { MouseEvent, useEffect, useRef } from "react"; -const Container = styled.div` +const Container = styled.span` flex: 1; display: flex; width: 100%; diff --git a/src/features/media/video/Player.tsx b/src/features/media/video/Player.tsx index 7b5a0ab50a..2ec1274b7f 100644 --- a/src/features/media/video/Player.tsx +++ b/src/features/media/video/Player.tsx @@ -18,7 +18,7 @@ import { PlainButton } from "#/features/shared/PlainButton"; import { stopIonicTapClick } from "#/helpers/ionic"; import { getVideoSrcForUrl } from "#/helpers/url"; -const Container = styled.div` +const Container = styled.span` position: relative; overflow: hidden; @@ -84,7 +84,7 @@ const VolumeButton = styled(PlainButton)` } `; -const PlayOverlay = styled.div` +const PlayOverlay = styled.span` position: absolute; inset: 0; diff --git a/src/features/media/video/Video.tsx b/src/features/media/video/Video.tsx index e6f18de1e4..7d64d38cb1 100644 --- a/src/features/media/video/Video.tsx +++ b/src/features/media/video/Video.tsx @@ -32,7 +32,7 @@ function PortaledVideo({ src, ref, ...props }: VideoProps) { ); return ( -
+ {portalNode ? ( {...props} @@ -40,6 +40,6 @@ function PortaledVideo({ src, ref, ...props }: VideoProps) { src={src} /> ) : undefined} -
+ ); } diff --git a/src/features/media/video/VideoPortalProvider.tsx b/src/features/media/video/VideoPortalProvider.tsx index c2116080b7..6967e302e3 100644 --- a/src/features/media/video/VideoPortalProvider.tsx +++ b/src/features/media/video/VideoPortalProvider.tsx @@ -1,4 +1,5 @@ import { useIonViewWillEnter } from "@ionic/react"; +import { css } from "@linaria/core"; import { noop } from "es-toolkit"; import { createContext, @@ -14,6 +15,12 @@ import * as portals from "react-reverse-portal"; import type Player from "./Player"; import PortaledPlayer from "./PortaledPlayer"; +const portalNodeStyles = css` + flex: 1; + display: flex; + width: 100%; +`; + export default function VideoPortalProvider({ children, }: React.PropsWithChildren) { @@ -41,8 +48,8 @@ export default function VideoPortalProvider({ const newRef = { sourceUid, - portalNode: portals.createHtmlPortalNode({ - attributes: { style: "flex:1;display:flex;width:100%" }, + portalNode: portals.createHtmlInlinePortalNode({ + attributes: { className: portalNodeStyles }, }), };