refactor: iframe min height and useIframeBehaviour spelling

Author: navinkarkera

src/course-unit/xblock-container-iframe/index.tsx

@@ -32,7 +32,7 @@ import {
 } from './types';
 import { formatAccessManagedXBlockData, getIframeUrl, getLegacyEditModalUrl } from './utils';
 import messages from './messages';
-import { useIFrameBehavior } from '../../generic/hooks/useIFrameBehavior';
+import { useIframeBehavior } from '../../generic/hooks/useIframeBehavior';
 import { useIframeContent } from '../../generic/hooks/useIframeContent';
 import { useIframeMessages } from '../../generic/hooks/useIframeMessages';
 
@@ -56,7 +56,7 @@ const XBlockContainerIframe: FC<XBlockContainerIframeProps> = ({
   const legacyEditModalUrl = useMemo(() => getLegacyEditModalUrl(configureXBlockId), [configureXBlockId]);
 
   const { iframeRef, setIframeRef, sendMessageToIframe } = useIframe();
-  const { iframeHeight } = useIFrameBehavior({ id: blockId, iframeUrl, iframeRef });
+  const { iframeHeight } = useIframeBehavior({ id: blockId, iframeUrl, iframeRef });
 
   useIframeContent(iframeRef, setIframeRef);
 

src/generic/hooks/tests/hooks.test.tsx

@@ -5,7 +5,7 @@ import { useKeyedState } from '@edx/react-unit-test-utils';
 import { logError } from '@edx/frontend-platform/logging';
 import { mockBroadcastChannel } from '../../data/api.mock';
 import { iframeMessageTypes, iframeStateKeys } from '../../../constants';
-import { useIFrameBehavior } from '../useIFrameBehavior';
+import { useIframeBehavior } from '../useIframeBehavior';
 import { useLoadBearingHook } from '../useLoadBearingHook';
 
 jest.useFakeTimers();
@@ -20,7 +20,7 @@ jest.mock('@edx/frontend-platform/logging', () => ({
 
 mockBroadcastChannel();
 
-describe('useIFrameBehavior', () => {
+describe('useIframeBehavior', () => {
   const id = 'test-id';
   const iframeUrl = 'http://example.com';
   const setIframeHeight = jest.fn();
@@ -52,7 +52,7 @@ describe('useIFrameBehavior', () => {
   });
 
   it('initializes state correctly', () => {
-    const { result } = renderHook(() => useIFrameBehavior({ id, iframeUrl, iframeRef }));
+    const { result } = renderHook(() => useIframeBehavior({ id, iframeUrl, iframeRef }));
 
     expect(result.current.iframeHeight).toBe(0);
     expect(result.current.showError).toBe(false);
@@ -69,7 +69,7 @@ describe('useIFrameBehavior', () => {
       return [null, jest.fn()];
     });
 
-    renderHook(() => useIFrameBehavior({ id, iframeUrl, iframeRef }));
+    renderHook(() => useIframeBehavior({ id, iframeUrl, iframeRef }));
 
     const message = {
       data: {
@@ -86,7 +86,7 @@ describe('useIFrameBehavior', () => {
   });
 
   it('handles resize message correctly', () => {
-    renderHook(() => useIFrameBehavior({ id, iframeUrl, iframeRef }));
+    renderHook(() => useIframeBehavior({ id, iframeUrl, iframeRef }));
 
     const message = {
       data: {
@@ -105,7 +105,7 @@ describe('useIFrameBehavior', () => {
 
   it('handles xblock-event message correctly', () => {
     const onBlockNotification = jest.fn();
-    renderHook(() => useIFrameBehavior({
+    renderHook(() => useIframeBehavior({
       id, iframeUrl, iframeRef, onBlockNotification,
     }));
 
@@ -130,7 +130,7 @@ describe('useIFrameBehavior', () => {
   });
 
   it('handles videoFullScreen message correctly', () => {
-    renderHook(() => useIFrameBehavior({ id, iframeUrl, iframeRef }));
+    renderHook(() => useIframeBehavior({ id, iframeUrl, iframeRef }));
 
     const message = {
       data: {
@@ -148,7 +148,7 @@ describe('useIFrameBehavior', () => {
 
   it('handles offset message correctly', () => {
     document.body.innerHTML = '<div id="unit-iframe" style="position: absolute; top: 50px;"></div>';
-    renderHook(() => useIFrameBehavior({ id, iframeUrl, iframeRef }));
+    renderHook(() => useIframeBehavior({ id, iframeUrl, iframeRef }));
 
     const message = {
       data: { offset: 100 },
@@ -162,7 +162,7 @@ describe('useIFrameBehavior', () => {
   });
 
   it('handles iframe load error correctly', () => {
-    const { result } = renderHook(() => useIFrameBehavior({ id, iframeUrl, iframeRef }));
+    const { result } = renderHook(() => useIframeBehavior({ id, iframeUrl, iframeRef }));
 
     act(() => {
       result.current.handleIFrameLoad();
@@ -176,7 +176,7 @@ describe('useIFrameBehavior', () => {
 
   it('resets state when iframeUrl changes', () => {
     // eslint-disable-next-line @typescript-eslint/no-shadow
-    const { rerender } = renderHook(({ id, iframeUrl }) => useIFrameBehavior({ id, iframeUrl, iframeRef }), {
+    const { rerender } = renderHook(({ id, iframeUrl }) => useIframeBehavior({ id, iframeUrl, iframeRef }), {
       initialProps: { id, iframeUrl },
     });
 

src/generic/hooks/useIFrameBehavior.tsx src/generic/hooks/useIframeBehavior.tsxsrc/generic/hooks/useIFrameBehavior.tsx renamed to src/generic/hooks/useIframeBehavior.tsx

@@ -21,7 +21,7 @@ import { useEventListener } from './useEventListener';
  * @returns {boolean} return.showError - Flag to indicate if there was an error loading the iframe.
  * @returns {boolean} return.hasLoaded - Flag to indicate if the iframe has loaded.
  */
-export const useIFrameBehavior = ({
+export const useIframeBehavior = ({
   id,
   iframeUrl,
   onLoaded = true,

src/library-authoring/LibraryBlock/LibraryBlock.tsx

@@ -3,7 +3,7 @@ import { getConfig } from '@edx/frontend-platform';
 
 import messages from './messages';
 import { IFRAME_FEATURE_POLICY } from '../../constants';
-import { useIFrameBehavior } from '../../generic/hooks/useIFrameBehavior';
+import { useIframeBehavior } from '../../generic/hooks/useIframeBehavior';
 import { useIframe } from '../../generic/hooks/context/hooks';
 import { useIframeContent } from '../../generic/hooks/useIframeContent';
 
@@ -40,7 +40,7 @@ export const LibraryBlock = ({
   const intl = useIntl();
   const queryStr = version ? `?version=${version}` : '';
   const iframeUrl = `${studioBaseUrl}/xblocks/v2/${usageKey}/embed/${xblockView}/${queryStr}`;
-  const { iframeHeight } = useIFrameBehavior({
+  const { iframeHeight } = useIframeBehavior({
     id: usageKey,
     iframeUrl,
     iframeRef,
@@ -60,7 +60,9 @@ export const LibraryBlock = ({
       frameBorder="0"
       loading="lazy"
       referrerPolicy="origin"
-      style={{ width: '100%', height: iframeHeight, pointerEvents: 'auto' }}
+      style={{
+        width: '100%', height: iframeHeight, pointerEvents: 'auto', minHeight: '30vh',
+      }}
       allow={IFRAME_FEATURE_POLICY}
       allowFullScreen
       scrolling={scrolling}