wip: more work in progress

Author: jstarpl

meteor/client/ui/PreviewPopUp/PreviewPopUp.scss

@@ -18,26 +18,39 @@
 	box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.6);
 
 	&--large {
+		width: 480px;
 	}
 
 	&-small {
+		width: 320px;
+	}
+
+	&--hidden {
+		visibility: none;
 	}
 }
 
 .preview-popUp__preview {
+	grid-area: 'preview';
 }
 
 .preview-popUp__controls {
+	grid-area: 'controls';
 }
 
 .preview-popUp__content-info {
+	grid-area: 'content-info';
 }
 
 .preview-popUp__warnings {
+	grid-area: 'warnings';
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-auto-rows: auto;
 }
 
 .preview-popUp__warning-row {
 	display: grid;
-	grid-template-columns: 1fr;
+	grid-template-columns: 2em auto;
 	grid-auto-rows: auto;
 }

meteor/client/ui/PreviewPopUp/PreviewPopUp.tsx

@@ -7,16 +7,18 @@ export function PreviewPopUp({
 	anchor,
 	padding,
 	placement,
+	hidden,
 	size,
 	preview,
 	controls,
 	contentInfo,
 	warnings,
 }: {
-	anchor: HTMLElement | VirtualElement
+	anchor: HTMLElement | VirtualElement | null
 	padding: Padding
 	placement: Placement
 	size: 'small' | 'large'
+	hidden?: boolean
 	preview?: React.ReactNode
 	controls?: React.ReactNode
 	contentInfo?: React.ReactNode
@@ -68,6 +70,7 @@ export function PreviewPopUp({
 			className={classNames('preview-popUp', {
 				'preview-popUp--large': size === 'large',
 				'preview-popUp--small': size === 'small',
+				'preview-popUp--hidden': hidden,
 			})}
 			style={styles.popper}
 			{...attributes.popper}

meteor/client/ui/PreviewPopUp/PreviewPopUpContext.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+type VirtualElement = {
+	getBoundingClientRect: () => DOMRect
+	contextElement?: Element
+}
+
+export type PreviewContent =
+	| {
+			type: 'iframe'
+			href: string
+			awaitMessage?: any
+			postMessage?: any
+	  }
+	| {
+			type: 'image'
+			src: string
+	  }
+	| {
+			type: 'video'
+			src: string
+			currentTime: number
+	  }
+	| {
+			type: 'text'
+			content: string
+	  }
+
+interface IPreviewPopUpContext {
+	display: (
+		anchor: HTMLElement | VirtualElement,
+		content: PreviewContent,
+		opts?: {
+			size?: 'small' | 'large'
+			controls?: React.ReactNode
+			contentInfo?: React.ReactNode
+			warnings?: React.ReactNode
+		}
+	) => void
+	hide: () => void
+}
+
+const PreviewPopUpContext = React.createContext<IPreviewPopUpContext>({
+	display: () => void {},
+	hide: () => void {},
+})
+
+export function PreviewPopUpContextProvider({ children }: React.PropsWithChildren<{}>): React.ReactNode {
+	const context: IPreviewPopUpContext = {
+		display: () => void {},
+		hide: () => void {},
+	}
+
+	return <PreviewPopUpContext.Provider value={context}>{children}</PreviewPopUpContext.Provider>
+}