From 803db375d6cdb0d80b2eecf17c57ec6ebb97b96c Mon Sep 17 00:00:00 2001 From: Padmaja <52911293+padms@users.noreply.github.com> Date: Tue, 4 Mar 2025 17:15:45 +0530 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Fetch=20from=20quickchannel=20#2849?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sanityv3/schemas/components/VideoSelector.tsx | 273 +++++++++--------- sanityv3/schemas/objects/hlsVideo.tsx | 2 +- 2 files changed, 135 insertions(+), 140 deletions(-) diff --git a/sanityv3/schemas/components/VideoSelector.tsx b/sanityv3/schemas/components/VideoSelector.tsx index cf7ebce7b..121daf206 100644 --- a/sanityv3/schemas/components/VideoSelector.tsx +++ b/sanityv3/schemas/components/VideoSelector.tsx @@ -1,10 +1,24 @@ -import { ReactNode, useState, useCallback, useRef, forwardRef, useEffect } from 'react' +import { ReactNode, useState, forwardRef, useEffect } from 'react' import { MemberField, set, unset } from 'sanity' import { createPortal } from 'react-dom' import type { ObjectInputProps } from 'sanity' import { Buffer } from 'buffer' import { UploadIcon, ResetIcon, EllipsisVerticalIcon, ComponentIcon } from '@sanity/icons' -import { Button, Dialog, Text, Label, Menu, MenuButton, MenuDivider, MenuItem, Stack, Card, Box } from '@sanity/ui' +import { + Button, + Dialog, + Text, + TextInput, + Label, + Menu, + MenuButton, + MenuDivider, + MenuItem, + Stack, + Card, + Box, + useToast, +} from '@sanity/ui' import HLSPlayer from './HLSPlayer' import { baseUrl } from '../../resolveProductionUrl' import { getObjectMemberField } from './utils/getObjectMemberField' @@ -20,12 +34,6 @@ type VideoSelectorProps = { children?: ReactNode } & ObjectInputProps -const MEDIABANK_DOMAIN = 'https://communicationtoolbox.equinor.com' -const MEDIABANK_URL = - MEDIABANK_DOMAIN + - '/dam2/archive?p_com_id=12366&p_oty_id=146867&p_ptl_id=16613&p_lae_id=2&p_mode=plugin_object&p_filter=status:1;sort:obt_id%20desc;type:AND;viewers:VIDEO_VIEWER;localCategories:822833' -const MEDIABANK_IMPORT_TYPE = 'dam:assets-imported' - const SCREEN9_ACCOUNT_ID = process.env.SANITY_STUDIO_SCREEN9_ACCOUNT_ID const SCREEN9_TOKEN = process.env.SANITY_STUDIO_SCREEN9_TOKEN const SCREEN9_AUTH = Buffer.from(`${SCREEN9_ACCOUNT_ID}:${SCREEN9_TOKEN}`).toString('base64') @@ -34,6 +42,8 @@ const VideoSelector = forwardRef(function VideoSelector( props: VideoSelectorProps, forwardedRef: React.ForwardedRef, ) { + const toast = useToast() + const [open, setIsOpen] = useState(false) const [container, setContainer] = useState(null) const [error, setError] = useState('') const { value, members, children, renderField, renderInput, renderItem, renderPreview, onChange } = props @@ -42,74 +52,41 @@ const VideoSelector = forwardRef(function VideoSelector( setContainer(document.createElement('div')) }, []) - const closeModal = () => { - newWindow?.current?.close() - window.removeEventListener('message', handleMediaBankEvent) - } - - const handleMediaBankEvent = useCallback( - async (event: MessageEvent) => { - if (!event || !event.data || event.origin !== MEDIABANK_DOMAIN) return false - - const message = JSON.parse(event.data) - - if (message?.type === MEDIABANK_IMPORT_TYPE) { - const file = message.data.assets[0] - - if (file.viewer === 'VIDEO_VIEWER' && file.screen9Connected) { - const videoId = file.flvVideoRef - const endpoint = `${baseUrl}/api/screen9/${SCREEN9_ACCOUNT_ID}/videos/${videoId}/streams?ssl=true` - - const data = await fetch(endpoint, { - headers: { - Authorization: `Basic ${SCREEN9_AUTH}`, - }, - }) - .then((res) => - res.status !== 200 - ? setError('Could not retrieve url from Screen9. Please report the error to the dev team.') - : res.json(), - ) - .catch((error) => { - setError(`Could not retrieve url from Screen9. Please report the error to the dev team. Error: ${error}`) - }) - - if (!data.error) { - const video = { - id: videoId, - title: file.title, - url: data.streams.hls, - } - // save to document - onChange(set(video)) - } - } else { - setError('File is not supported. Please select a equinor.com video file.') + const handleOpenModal = async () => { + if (value?.id) { + setIsOpen(true) + const videoId = value.id + const endpoint = `${baseUrl}/api/screen9/${SCREEN9_ACCOUNT_ID}/videos/${videoId}/meta,streams?ssl=true` + + const data = await fetch(endpoint, { + headers: { + Authorization: `Basic ${SCREEN9_AUTH}`, + }, + }) + .then((res) => + res.status !== 200 + ? setError('Could not retrieve url from Screen9. Please report the error to the dev team.') + : res.json(), + ) + .catch((error) => { + setError(`Could not retrieve url from Screen9. Please report the error to the dev team. Error: ${error}`) + }) + + if (!data.error) { + const video = { + id: videoId, + title: data.meta.title, + url: data.streams.hls, } - closeModal() - } - }, - [onChange], - ) - - const handleOpenModal = () => { - const height = 800 - const width = 1200 - - const left = window.screen.width / 2 - width / 2 - const top = window.screen.height / 2 - height / 2 - - if (container) { - newWindow.current = window.open( - MEDIABANK_URL, - 'Media Bank', - `height=${height},width=${width},left=${left},top=${top}`, - ) - - if (newWindow.current) { - newWindow.current.document.body.appendChild(container) - window.addEventListener('message', handleMediaBankEvent) + // save to document + onChange(set(video)) + setIsOpen(false) } + } else { + toast.push({ + status: 'error', + title: 'Enter media id of the video', + }) } } @@ -117,16 +94,8 @@ const VideoSelector = forwardRef(function VideoSelector( onChange(unset()) } - const newWindow = useRef(null) - const title = getObjectMemberField(members, 'title') - - useEffect(() => { - // Clean up event listener when unmounting component - return () => { - window.removeEventListener('message', handleMediaBankEvent) - } - }, [handleMediaBankEvent]) + const id = getObjectMemberField(members, 'id') return ( <> @@ -138,73 +107,99 @@ const VideoSelector = forwardRef(function VideoSelector( )} - {!value ? ( - + {open && error.length != 0 && ( + setIsOpen(false)} zOffset={1000}> + + Fetching video url... {(id?.field?.value as string) || (open && !error)} + + + )} + {!value?.url ? ( + + {id && ( + + )}