@100mslive/react-sdk 0.8.7 → 0.8.9

package/dist/utils/layout.d.ts

@@ -0,0 +1,116 @@
+import { HMSPeer, HMSScreenVideoTrack, HMSTrack, HMSTrackID, HMSVideoTrack } from '@100mslive/hms-video-store';
+export declare const chunk: <T>(elements: T[], chunkSize: number, onlyOnePage: boolean) => T[][];
+interface ChunkElements<T> {
+    elements: T[];
+    tilesInFirstPage: number;
+    onlyOnePage: boolean;
+    isLastPageDifferentFromFirstPage: boolean;
+    defaultWidth: number;
+    defaultHeight: number;
+    lastPageWidth: number;
+    lastPageHeight: number;
+}
+/**
+ * Given a list of tracks/elements and some constraints, group the tracks in separate pages.
+ * @return 2D list for every page which has the original element and height and width
+ * for its tile.
+ */
+export declare const chunkElements: <T>({ elements, tilesInFirstPage, onlyOnePage, isLastPageDifferentFromFirstPage, defaultWidth, defaultHeight, lastPageWidth, lastPageHeight, }: ChunkElements<T>) => (T & {
+    width: number;
+    height: number;
+})[][];
+/**
+ * Mathematical mode - the element with the highest occurrence in an array
+ * @param array
+ */
+export declare function mode(array: number[]): number | null;
+export declare type TrackWithPeer = {
+    track?: HMSVideoTrack | HMSScreenVideoTrack;
+    peer: HMSPeer;
+};
+/**
+ * get the aspect ration occurring with the highest frequency
+ * @param tracks - video tracks to infer aspect ratios from
+ */
+export declare const getModeAspectRatio: (tracks: TrackWithPeer[]) => number | null;
+interface GetTileSizesInList {
+    count: number;
+    parentWidth: number;
+    parentHeight: number;
+    maxTileCount?: number;
+    maxRowCount?: number;
+    maxColCount?: number;
+    aspectRatio: {
+        width: number;
+        height: number;
+    };
+}
+interface GetTileSizes {
+    parentWidth: number;
+    parentHeight: number;
+    count: number;
+    maxCount: number;
+    aspectRatio: {
+        width: number;
+        height: number;
+    };
+}
+/**
+ * Finds the largest rectangle area when trying to place N rectangle into a containing
+ * rectangle without rotation.
+ *
+ * @param {Number}  containerWidth      The width of the container.
+ * @param {Number}  containerHeight     The height of the container.
+ * @param {Number}  numRects            How many rectangles must fit within.
+ * @param {Number}  width               The unscaled width of the rectangles to be placed.
+ * @param {Number}  height              The unscaled height of the rectangles to be placed.
+ * @return {Object}                     The area and number of rows and columns that fit.
+ */
+export declare const largestRect: (containerWidth: number, containerHeight: number, numRects: number, width: number | undefined, height: number | undefined) => {
+    area: number;
+    cols: number;
+    rows: number;
+    width: number;
+    height: number;
+};
+export declare const getTileSizesWithColConstraint: ({ parentWidth, parentHeight, count, maxCount, aspectRatio, }: GetTileSizes) => {
+    tilesInFirstPage: number;
+    defaultWidth: number;
+    defaultHeight: number;
+    lastPageWidth: number;
+    lastPageHeight: number;
+    isLastPageDifferentFromFirstPage: boolean;
+};
+export declare const getTileSizesWithPageConstraint: ({ parentWidth, parentHeight, count, maxCount, aspectRatio, }: GetTileSizes) => {
+    tilesInFirstPage: number;
+    defaultWidth: number;
+    defaultHeight: number;
+    lastPageWidth: number;
+    lastPageHeight: number;
+    isLastPageDifferentFromFirstPage: boolean;
+};
+export declare const getTileSizesWithRowConstraint: ({ parentWidth, parentHeight, count, maxCount, aspectRatio, }: GetTileSizes) => {
+    tilesInFirstPage: number;
+    defaultWidth: number;
+    defaultHeight: number;
+    lastPageWidth: number;
+    lastPageHeight: number;
+    isLastPageDifferentFromFirstPage: boolean;
+};
+export declare function calculateLayoutSizes({ count, parentWidth, parentHeight, maxTileCount, maxRowCount, maxColCount, aspectRatio, }: GetTileSizesInList): {
+    tilesInFirstPage: number;
+    defaultWidth: number;
+    defaultHeight: number;
+    lastPageWidth: number;
+    lastPageHeight: number;
+    isLastPageDifferentFromFirstPage: boolean;
+};
+/**
+ * given list of peers and all tracks in the room, get a list of tile objects to show in the UI
+ * @param peers
+ * @param tracks
+ * @param includeScreenShareForPeer - fn will be called to check whether to include screenShare for the peer in returned tiles
+ * @param filterNonPublishingPeers - by default a peer with no tracks won't be counted towards final tiles
+ */
+export declare const getVideoTracksFromPeers: (peers: HMSPeer[], tracks: Record<HMSTrackID, HMSTrack>, includeScreenShareForPeer: (peer: HMSPeer) => boolean, filterNonPublishingPeers?: boolean) => TrackWithPeer[];
+export {};

package/dist/utils/layout.js

@@ -0,0 +1,2 @@
+const t=(t,e,i)=>t.reduce(((t,a,r)=>{const h=Math.floor(r/e);return h>0&&i||(t[h]||(t[h]=[]),t[h].push(a)),t}),[]),e=({elements:e,tilesInFirstPage:i,onlyOnePage:a,isLastPageDifferentFromFirstPage:r,defaultWidth:h,defaultHeight:n,lastPageWidth:s,lastPageHeight:o})=>{const l=t(e,i,a);return l.map(((t,e)=>t.map((t=>{const i=e===l.length-1,a=r&&i?s:h,g=r&&i?o:n;return Object.assign(Object.assign({},t),{height:g,width:a})}))))};function i(t){if(0===t.length)return null;const e={};let i=t[0],a=1;for(let r=0;r<t.length;r++){const h=t[r];null===e[h]?e[h]=1:e[h]++,e[h]>a&&(i=h,a=e[h])}return i}const a=t=>i(t.filter((t=>{var e,i;return(null===(e=t.track)||void 0===e?void 0:e.width)&&(null===(i=t.track)||void 0===i?void 0:i.height)})).map((t=>{var e,i;return((null===(e=t.track)||void 0===e?void 0:e.width)||1)/((null===(i=t.track)||void 0===i?void 0:i.height)||1)}))),r=(t,e,i,a,r)=>{if(t<0||e<0)throw new Error("Container must have a non-negative area");if(i<1||!Number.isInteger(i))throw new Error("Number of shapes to place must be a positive integer");const h=a&&r&&a/r;if(void 0!==h&&isNaN(h))throw new Error("Aspect ratio must be a number");let n={area:0,cols:0,rows:0,width:0,height:0};if(void 0!==h)for(let a=i;a>0;a+=-1){const r=Math.ceil(i/a);let s,o;t/(a*h)<=e/r?(s=t/a,o=s/h):(o=e/r,s=o*h);const l=s*o;l>n.area&&(n={area:l,width:s,height:o,rows:r,cols:a})}return n},h=({parentWidth:t,parentHeight:e,count:i,maxCount:a,aspectRatio:r})=>{let h=0,n=0,s=0,o=0,l=!1,g=0,d=0;const u=Math.min(Math.ceil(Math.sqrt(i*(t/e)/(r.width/r.height))),a);let c=t/u,f=c/(r.width/r.height);f>e&&(f=e,c=f/(r.height/r.width));const P=Math.floor(e/f);if(n=f,h=c,g=Math.min(i,P*u),d=i%(P*u),l=d>0&&i>P*u,l){let i=t/Math.min(Math.ceil(Math.sqrt(d*(t/e)/(r.width/r.height))),a),h=i/(r.width/r.height);h>e&&(h=e,i=h/(r.height/r.width)),o=h,s=i}return{tilesInFirstPage:g,defaultWidth:h,defaultHeight:n,lastPageWidth:s,lastPageHeight:o,isLastPageDifferentFromFirstPage:l}},n=({parentWidth:t,parentHeight:e,count:i,maxCount:a,aspectRatio:h})=>{let n=0,s=0,o=0,l=0,g=!1,d=0,u=0;const{width:c,height:f}=r(t,e,Math.min(i,a),h.width,h.height);if(n=c,s=f,d=Math.min(i,a),u=i%a,g=u>0&&i>a,g){const{width:i,height:a}=r(t,e,u,h.width,h.height);o=i,l=a}return{tilesInFirstPage:d,defaultWidth:n,defaultHeight:s,lastPageWidth:o,lastPageHeight:l,isLastPageDifferentFromFirstPage:g}},s=({parentWidth:t,parentHeight:e,count:i,maxCount:a,aspectRatio:r})=>{let h=0,n=0,s=0,o=0,l=!1,g=0,d=0;const u=Math.min(Math.ceil(Math.sqrt(i*(r.width/r.height)/(t/e))),a),c=e/u,f=c*(r.width/r.height),P=Math.floor(t/f);if(h=f,n=c,g=Math.min(i,u*P),d=i%(u*P),l=d>0&&i>u*P,l){const i=e/Math.min(Math.ceil(Math.sqrt(d*(r.width/r.height)/(t/e))),a);o=i,s=i*(r.width/r.height)}return{tilesInFirstPage:g,defaultWidth:h,defaultHeight:n,lastPageWidth:s,lastPageHeight:o,isLastPageDifferentFromFirstPage:l}};function o({count:t,parentWidth:e,parentHeight:i,maxTileCount:a,maxRowCount:o,maxColCount:l,aspectRatio:g}){let d=0,u=0,c=0,f=0,P=!1,p=0;if(0===t)return{tilesInFirstPage:p,defaultWidth:d,defaultHeight:u,lastPageWidth:c,lastPageHeight:f,isLastPageDifferentFromFirstPage:P};if(a)({tilesInFirstPage:p,defaultWidth:d,defaultHeight:u,lastPageWidth:c,lastPageHeight:f,isLastPageDifferentFromFirstPage:P}=n({parentWidth:e,parentHeight:i,count:t,maxCount:a,aspectRatio:g}));else if(o)({tilesInFirstPage:p,defaultWidth:d,defaultHeight:u,lastPageWidth:c,lastPageHeight:f,isLastPageDifferentFromFirstPage:P}=s({parentWidth:e,parentHeight:i,count:t,maxCount:o,aspectRatio:g}));else if(l)({tilesInFirstPage:p,defaultWidth:d,defaultHeight:u,lastPageWidth:c,lastPageHeight:f,isLastPageDifferentFromFirstPage:P}=h({parentWidth:e,parentHeight:i,count:t,maxCount:l,aspectRatio:g}));else{const{width:a,height:h}=r(e,i,t,g.width,g.height);d=a,u=h,p=t}return{tilesInFirstPage:p,defaultWidth:d,defaultHeight:u,lastPageWidth:c,lastPageHeight:f,isLastPageDifferentFromFirstPage:P}}const l=(t,e,i,a=!0)=>{if(!t||!e||!i)return[];const r=[];for(const h of t){if(void 0===h.videoTrack&&h.audioTrack&&e[h.audioTrack]?r.push({peer:h}):h.videoTrack&&e[h.videoTrack]?r.push({track:e[h.videoTrack],peer:h}):a||r.push({peer:h}),h.auxiliaryTracks.length>0&&h.auxiliaryTracks.forEach((t=>{const i=e[t];"video"===(null==i?void 0:i.type)&&"regular"===(null==i?void 0:i.source)&&r.push({track:i,peer:h})})),i(h)&&h.auxiliaryTracks.length>0){const t=h.auxiliaryTracks.find((t=>{const i=e[t];return"video"===(null==i?void 0:i.type)&&"screen"===(null==i?void 0:i.source)}));t&&r.push({track:e[t],peer:h})}}return r};export{o as calculateLayoutSizes,t as chunk,e as chunkElements,a as getModeAspectRatio,h as getTileSizesWithColConstraint,n as getTileSizesWithPageConstraint,s as getTileSizesWithRowConstraint,l as getVideoTracksFromPeers,r as largestRect,i as mode};
+//# sourceMappingURL=layout.js.map

package/dist/utils/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sources":["../../src/utils/layout.ts"],"sourcesContent":[null],"names":["chunk","elements","chunkSize","onlyOnePage","reduce","resultArray","tile","index","chunkIndex","Math","floor","push","chunkElements","tilesInFirstPage","isLastPageDifferentFromFirstPage","defaultWidth","defaultHeight","lastPageWidth","lastPageHeight","chunks","map","ch","page","element","isLastPage","length","width","height","Object","assign","mode","array","modeMap","maxEl","maxCount","i","el","getModeAspectRatio","tracks","filter","track","_b","_a","largestRect","containerWidth","containerHeight","numRects","Error","Number","isInteger","aspectRatio","isNaN","best","area","cols","rows","ceil","width2","height2","getTileSizesWithColConstraint","parentWidth","parentHeight","count","tilesinLastPage","min","sqrt","getTileSizesWithPageConstraint","initialWidth","initialHeight","remWidth","remHeight","getTileSizesWithRowConstraint","maxTileCount","maxRowCount","maxColCount","getVideoTracksFromPeers","peers","includeScreenShareForPeer","filterNonPublishingPeers","peerTiles","peer","videoTrack","audioTrack","auxiliaryTracks","forEach","trackId","type","source","screenShareTrackID","find","trackID"],"mappings":"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"}

package/dist/utils/logger.d.ts

@@ -0,0 +1,17 @@
+export declare enum HMSLogLevel {
+    VERBOSE = 0,
+    DEBUG = 1,
+    INFO = 2,
+    WARN = 3,
+    ERROR = 4,
+    NONE = 5
+}
+export default class HMSLogger {
+    static level: HMSLogLevel;
+    static v(tag: string, ...data: any[]): void;
+    static d(tag: string, ...data: any[]): void;
+    static i(tag: string, ...data: any[]): void;
+    static w(tag: string, ...data: any[]): void;
+    static e(tag: string, ...data: any[]): void;
+    private static log;
+}

package/dist/utils/logger.js

@@ -0,0 +1,2 @@
+var s,e;(e=s||(s={}))[e.VERBOSE=0]="VERBOSE",e[e.DEBUG=1]="DEBUG",e[e.INFO=2]="INFO",e[e.WARN=3]="WARN",e[e.ERROR=4]="ERROR",e[e.NONE=5]="NONE";class o{static v(e,...o){this.log(s.VERBOSE,e,...o)}static d(e,...o){this.log(s.DEBUG,e,...o)}static i(e,...o){this.log(s.INFO,e,...o)}static w(e,...o){this.log(s.WARN,e,...o)}static e(e,...o){this.log(s.ERROR,e,...o)}static log(e,o,...t){if(!(this.level.valueOf()>e.valueOf()))switch(e){case s.VERBOSE:console.log("HMSui-components: ",o,...t);break;case s.DEBUG:console.debug("HMSui-components: ",o,...t);break;case s.INFO:console.info("HMSui-components: ",o,...t);break;case s.WARN:console.warn("HMSui-components: ",o,...t);break;case s.ERROR:console.error("HMSui-components: ",o,...t)}}}o.level=s.VERBOSE;export{s as HMSLogLevel,o as default};
+//# sourceMappingURL=logger.js.map

package/dist/utils/logger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.js","sources":["../../src/utils/logger.ts"],"sourcesContent":[null],"names":["HMSLogLevel","HMSLogLevel2","HMSLogger","static","tag","data","this","log","VERBOSE","DEBUG","INFO","WARN","ERROR","level","valueOf","console","debug","info","warn","error"],"mappings":"AAAY,IAAAA,EAAAC,KAAAD,IAOXA,EAAA,CAAA,IANCC,UAAA,GAAA,UACAA,EAAAA,QAAA,GAAA,QACAA,EAAAA,OAAA,GAAA,OACAA,EAAAA,OAAA,GAAA,OACAA,EAAAA,QAAA,GAAA,QACAA,EAAAA,OAAA,GAAA,OAGF,MAA8BC,EAGrBC,SAAEC,KAAgBC,GACvBC,KAAKC,IAAIP,EAAYQ,QAASJ,KAAQC,EAAA,CAGjCF,SAAEC,KAAgBC,GACvBC,KAAKC,IAAIP,EAAYS,MAAOL,KAAQC,EAAA,CAG/BF,SAAEC,KAAgBC,GACvBC,KAAKC,IAAIP,EAAYU,KAAMN,KAAQC,EAAA,CAG9BF,SAAEC,KAAgBC,GACvBC,KAAKC,IAAIP,EAAYW,KAAMP,KAAQC,EAAA,CAG9BF,SAAEC,KAAgBC,GACvBC,KAAKC,IAAIP,EAAYY,MAAOR,KAAQC,EAAA,CAIvBF,WAAIU,EAAoBT,KAAgBC,GACrD,KAAIC,KAAKO,MAAMC,UAAYD,EAAMC,WAIzB,OAAAD,GAAA,KACDb,EAAYQ,QACPO,QAAAR,IAAI,qBAAsBH,KAAQC,GAC1C,MAAA,KAEGL,EAAYS,MACPM,QAAAC,MAAM,qBAAsBZ,KAAQC,GAC5C,MAAA,KAEGL,EAAYU,KACPK,QAAAE,KAAK,qBAAsBb,KAAQC,GAC3C,MAAA,KAEGL,EAAYW,KACPI,QAAAG,KAAK,qBAAsBd,KAAQC,GAC3C,MAAA,KAEGL,EAAYY,MACPG,QAAAI,MAAM,qBAAsBf,KAAQC,GAC5C,EA/CCH,EAAAW,MAAqBb,EAAYQ"}

package/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
-  "version": "0.8.7",
+  "version": "0.8.9",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -43,9 +43,9 @@
     "react": ">=16.8 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hms-video-store": "0.10.7",
+    "@100mslive/hms-video-store": "0.10.9",
     "react-resize-detector": "^7.0.0",
     "zustand": "^3.6.2"
   },
-  "gitHead": "ed377e90d4e54468b0fcd5e3edc12fe3e135c95f"
+  "gitHead": "15cb6d59a886be7d2ba20d442e58f724a790d424"
 }

package/src/hooks/useEmbedShare.ts

@@ -0,0 +1,96 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useScreenShare } from './useScreenShare';
+import usePrevious, { isChromiumBased } from '../utils/commons';
+
+export interface useEmbedShareResult {
+  /**
+   * used to start screen share
+   * It throws error in given below scenarios:
+   * 1. When url is not passed.
+   * 2. Reference to a iframe or element is not at attached.
+   * 3. Unable to start screen share
+   */
+  startEmbedShare: (value: string) => Promise<void>;
+
+  /**
+   * stop your screen share.
+   */
+  stopEmbedShare: () => Promise<void>;
+  /**
+   * am I sharing embed view in a room
+   */
+  isEmbedShareInProgress: boolean;
+
+  /**
+   * reference of iframe where embed url will be launched
+   */
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+}
+
+/**
+ * @param resetConfig pass resetConfig where you were mounting the iframe, it will help to clear configuration when stop screen share occurs
+ * @returns useEmbedShareResult
+ */
+export const useEmbedShare = (resetConfig?: () => void): useEmbedShareResult => {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const [sharing, setSharing] = useState(false);
+
+  const handleScreenShareError = useCallback(() => {
+    throw new Error('unable to start screen share');
+  }, []);
+  const inProgress = useRef(false);
+  const { amIScreenSharing, toggleScreenShare } = useScreenShare(handleScreenShareError);
+  // store previous state of screensharing, it will help to reset the config after screensharing stop.
+  const previouslySharing = usePrevious(amIScreenSharing);
+
+  const stopShare = useCallback(async () => {
+    if (amIScreenSharing) {
+      await toggleScreenShare?.(); // Stop screen sharing
+      iframeRef.current = null;
+    }
+  }, [amIScreenSharing, toggleScreenShare]);
+
+  const startShare = useCallback(
+    async (value: string) => {
+      if (inProgress.current) {
+        return;
+      }
+      if (!value) {
+        throw new Error('URL not found');
+      }
+      if (amIScreenSharing) {
+        throw new Error('You are already sharing');
+      }
+      if (!iframeRef.current) {
+        throw new Error('Attach a reference `iframeRef` to iframe for sharing');
+      }
+      iframeRef.current.src = value;
+      inProgress.current = true;
+      setSharing(true);
+      await toggleScreenShare?.({
+        forceCurrentTab: isChromiumBased,
+        cropElement: iframeRef.current,
+        preferCurrentTab: isChromiumBased,
+      });
+    },
+    [amIScreenSharing, toggleScreenShare],
+  );
+
+  useEffect(() => {
+    if (previouslySharing && !amIScreenSharing) {
+      resetConfig?.();
+      if (iframeRef.current) {
+        iframeRef.current.src = '';
+      }
+      inProgress.current = false;
+      setSharing(false);
+    }
+  }, [amIScreenSharing, previouslySharing, resetConfig]);
+
+  return {
+    startEmbedShare: startShare,
+    stopEmbedShare: stopShare,
+    iframeRef,
+    isEmbedShareInProgress: sharing,
+  };
+};

package/src/hooks/usePDFShare.ts

@@ -0,0 +1,116 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useScreenShare } from './useScreenShare';
+import usePrevious, { isChromiumBased, pdfIframeURL } from '../utils/commons';
+
+export interface usePDFShareResult {
+  /**
+   * used to start screen share
+   * It throws error in given below scenarios:
+   * 1. When file or url is not passed.
+   * 2. Reference to a iframe or element is not yet attached.
+   * 3. Unable to start screen share
+   */
+  startPDFShare: (value: File | string) => Promise<void>;
+
+  /**
+   * stop your screen share.
+   */
+  stopPDFShare: () => Promise<void>;
+  /**
+   * am I sharing pdf annotator in a room
+   */
+  isPDFShareInProgress: boolean;
+
+  /**
+   * reference of iframe where pdf annotator will be launched
+   */
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+}
+
+/**
+ * @param resetConfig pass resetConfig where you were mounting the iframe, it will help to clear configuration when stop screen share occurs
+ * @returns usePDFShareResult
+ */
+export const usePDFShare = (resetConfig?: () => void): usePDFShareResult => {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const [sharing, setSharing] = useState(false);
+
+  const handleScreenShareError = useCallback(() => {
+    throw new Error('unable to start screen share');
+  }, []);
+  const inProgress = useRef(false);
+  const { amIScreenSharing, toggleScreenShare } = useScreenShare(handleScreenShareError);
+  // store previous state of screensharing, it will help to reset the config after screensharing stop.
+  const previouslySharing = usePrevious(amIScreenSharing);
+
+  const sendDataToPDFIframe = useCallback((file?: File) => {
+    if (iframeRef.current) {
+      iframeRef.current.contentWindow?.postMessage(
+        {
+          theme: 2, // dark theme -> 2, light theme -> 1
+          file,
+        },
+        '*',
+      );
+    }
+  }, []);
+
+  const stopShare = useCallback(async () => {
+    if (amIScreenSharing) {
+      await toggleScreenShare?.(); // Stop screen sharing
+    }
+  }, [amIScreenSharing, toggleScreenShare]);
+
+  const startShare = useCallback(
+    // eslint-disable-next-line complexity
+    async (value: File | string) => {
+      if (inProgress.current) {
+        return;
+      }
+      if (!value) {
+        throw new Error('File or url not found');
+      }
+      if (amIScreenSharing) {
+        throw new Error('You are already sharing');
+      }
+      if (!iframeRef.current) {
+        throw new Error('Attach a reference `iframeRef` to iframe for sharing');
+      }
+
+      iframeRef.current.src = `${pdfIframeURL}${typeof value === 'string' ? `?file=${value}` : ''}`;
+      iframeRef.current.onload = () => {
+        requestAnimationFrame(() => {
+          if (value instanceof File) {
+            sendDataToPDFIframe(value);
+          }
+        });
+      };
+      inProgress.current = true;
+      setSharing(true);
+      await toggleScreenShare?.({
+        forceCurrentTab: isChromiumBased,
+        cropElement: iframeRef.current,
+        preferCurrentTab: isChromiumBased,
+      });
+    },
+    [amIScreenSharing, sendDataToPDFIframe, toggleScreenShare],
+  );
+
+  useEffect(() => {
+    if (previouslySharing && !amIScreenSharing) {
+      resetConfig?.();
+      if (iframeRef.current) {
+        iframeRef.current.removeAttribute('src');
+      }
+      inProgress.current = false;
+      setSharing(false);
+    }
+  }, [amIScreenSharing, previouslySharing, resetConfig]);
+
+  return {
+    startPDFShare: startShare,
+    stopPDFShare: stopShare,
+    iframeRef,
+    isPDFShareInProgress: sharing,
+  };
+};

package/src/index.ts

@@ -20,6 +20,9 @@ export { useRecordingStreaming } from './hooks/useRecordingStreaming';
 export { useAutoplayError } from './hooks/useAutoplayError';
 export { useCustomEvent } from './hooks/useCustomEvent';
 export { useParticipants } from './hooks/useParticipants';
+export { useEmbedShare } from './hooks/useEmbedShare';
+export { usePDFShare } from './hooks/usePDFShare';
+
 // types
 export type { hooksErrHandler } from './hooks/types';
 export type { usePreviewInput, usePreviewResult } from './hooks/usePreviewJoin';
@@ -34,6 +37,8 @@ export type { useParticipantsResult, useParticipantsParams } from './hooks/usePa
 export type { useVideoInput, useVideoOutput } from './hooks/useVideo';
 export type { useAutoplayErrorResult } from './hooks/useAutoplayError';
 export type { useCustomEventInput, useCustomEventResult } from './hooks/useCustomEvent';
+export type { useEmbedShareResult } from './hooks/useEmbedShare';
+export type { usePDFShareResult } from './hooks/usePDFShare';
 
 // helpers
 export { throwErrorHandler } from './utils/commons';

package/src/utils/commons.ts

@@ -1,3 +1,5 @@
+import { useEffect, useRef } from 'react';
+import { parsedUserAgent } from '@100mslive/hms-video-store';
 import HMSLogger from './logger';
 import { hooksErrHandler } from '../hooks/types';
 
@@ -12,3 +14,21 @@ export const logErrorHandler: hooksErrHandler = (err: Error, method?: string) =>
 export const throwErrorHandler: hooksErrHandler = (err: Error) => {
   throw err;
 };
+
+export default function usePrevious<T>(state: T): T | undefined {
+  const ref = useRef<T>();
+
+  useEffect(() => {
+    ref.current = state;
+  });
+
+  return ref.current;
+}
+
+const chromiumBasedBrowsers = ['chrome', 'brave', 'opera', 'edge'];
+
+export const isChromiumBased = chromiumBasedBrowsers.some(
+  (value: string) => parsedUserAgent.getBrowser()?.name?.toLowerCase() === value,
+);
+
+export const pdfIframeURL = 'https://pdf-annotation.100ms.live/generic/web/viewer.html';