@brightcove/components-embed-code-modal 1.0.8 → 1.1.0

package/build/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightcove/components-embed-code-modal",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal.git"

package/build/src/js/components/prism/PrismPlayerPreview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrismPlayerPreview.d.ts","sourceRoot":"","sources":["../../../../../src/js/components/prism/PrismPlayerPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAQ3C,UAAU,uBAAuB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,kDAK5B,uBAAuB,sBA2EzB,CAAC"}
+{"version":3,"file":"PrismPlayerPreview.d.ts","sourceRoot":"","sources":["../../../../../src/js/components/prism/PrismPlayerPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAUjF,UAAU,uBAAuB;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,kDAK5B,uBAAuB,sBAmKzB,CAAC"}

package/build/src/js/i18n.d.ts

@@ -56,7 +56,11 @@ export declare const resources: {
             };
             adConfiguration: string;
             prism: {
-                getURL: string;
+                copying: string;
+                copied: string;
+                copyURL: string;
+                shortURL: string;
+                fullURL: string;
                 customSettings: {
                     sizing: string;
                 };
@@ -119,7 +123,11 @@ export declare const resources: {
             };
             adConfiguration: string;
             prism: {
-                getURL: string;
+                copying: string;
+                copied: string;
+                copyURL: string;
+                shortURL: string;
+                fullURL: string;
                 customSettings: {
                     sizing: string;
                 };
@@ -182,7 +190,11 @@ export declare const resources: {
                 unit: string;
             };
             prism: {
-                getURL: string;
+                copying: string;
+                copied: string;
+                copyURL: string;
+                shortURL: string;
+                fullURL: string;
                 customSettings: {
                     sizing: string;
                 };
@@ -245,7 +257,11 @@ export declare const resources: {
                 unit: string;
             };
             prism: {
-                getURL: string;
+                copying: string;
+                copied: string;
+                copyURL: string;
+                shortURL: string;
+                fullURL: string;
                 customSettings: {
                     sizing: string;
                 };
@@ -308,7 +324,11 @@ export declare const resources: {
                 unit: string;
             };
             prism: {
-                getURL: string;
+                copying: string;
+                copied: string;
+                copyURL: string;
+                shortURL: string;
+                fullURL: string;
                 customSettings: {
                     sizing: string;
                 };
@@ -371,7 +391,11 @@ export declare const resources: {
                 unit: string;
             };
             prism: {
-                getURL: string;
+                copying: string;
+                copied: string;
+                copyURL: string;
+                shortURL: string;
+                fullURL: string;
                 customSettings: {
                     sizing: string;
                 };

package/build/src/js/i18n.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/js/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,SAAS,CAAC;AAU3B,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBrB,CAAC;AAaF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../../src/js/i18n.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,SAAS,CAAC;AAU3B,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmBrB,CAAC;AAaF,eAAe,IAAI,CAAC"}

package/jest/jest.setup.js

@@ -46,6 +46,34 @@ jest.mock('react-i18next', () => ({
   Trans: () => '<div/>',
 }));
 
+const evaluateMediaQuery = (query) => {
+  const minWidth = /min-width:\s*(\d+)px/.exec(query);
+  const maxWidth = /max-width:\s*(\d+)px/.exec(query);
+
+  if (minWidth && window.innerWidth < Number(minWidth[1])) {
+    return false;
+  }
+  if (maxWidth && window.innerWidth > Number(maxWidth[1])) {
+    return false;
+  }
+  return true;
+};
+
+const noop = () => {
+  return;
+};
+
+window.matchMedia = (query) => ({
+  matches: evaluateMediaQuery(query),
+  media: query,
+  onchange: null,
+  addEventListener: noop,
+  removeEventListener: noop,
+  addListener: noop,
+  removeListener: noop,
+  dispatchEvent: () => false,
+});
+
 global.StudioModule = {
   config: {
     product: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightcove/components-embed-code-modal",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "repository": {
     "type": "git",
     "url": "https://bithub.brightcove.com/studio-ui-kit/studio-components-embed-code-modal.git"

package/src/js/components/prism/PrismPlayerPreview.tsx

@@ -1,9 +1,11 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import ReactPlayerLoader from '@brightcove/react-player-loader';
-import { PrismButton } from '@brightcove/prism-core';
+import { PrismButton, PrismButtonDropdown } from '@brightcove/prism-core';
 import { getBrightcove, getUrlBase } from 'js/utils/util';
 import { useTranslation } from 'react-i18next';
 
+import { getUrlAndAddItToClipboard } from '../VideoLinks';
+
 import css from 'styles/prism/PrismLiveModal.sass';
 
 interface PrismPlayerPreviewProps {
@@ -22,33 +24,119 @@ export const PrismPlayerPreview = ({
   previewUrl,
 }: PrismPlayerPreviewProps) => {
   const { t } = useTranslation();
+  const [isShorteningUrl, setIsShorteningUrl] = useState<boolean>(false);
+  const [isCopied, setIsCopied] = useState<boolean>(false);
+  const copiedTimeoutRef = useRef<ReturnType<typeof setTimeout>>();
+  const shortenRequestRef = useRef<number>(0);
+
+  useEffect(
+    () => () => {
+      shortenRequestRef.current += 1;
+      if (copiedTimeoutRef.current) {
+        clearTimeout(copiedTimeoutRef.current);
+      }
+      setIsShorteningUrl(false);
+      setIsCopied(false);
+    },
+    [previewUrl],
+  );
+
+  const notifyMissingPreviewUrl = useCallback(() => {
+    getBrightcove().Toaster.error({
+      title: t('toasterTitle') as string,
+      message: 'Please select a player first',
+    });
+  }, [t]);
+
+  const showCopiedFeedback = useCallback(() => {
+    if (copiedTimeoutRef.current) {
+      clearTimeout(copiedTimeoutRef.current);
+    }
+    setIsCopied(true);
+    copiedTimeoutRef.current = setTimeout(() => setIsCopied(false), 2000);
+  }, []);
 
-  const handleCopyUrl = useCallback(() => {
+  const handleCopyFullUrl = useCallback(() => {
     if (!previewUrl) {
-      getBrightcove().Toaster.error({
-        title: t('toasterTitle') as string,
-        message: 'Please select a player first',
+      notifyMissingPreviewUrl();
+      return;
+    }
+    navigator.clipboard
+      .writeText(previewUrl)
+      .then(showCopiedFeedback)
+      .catch(() => {
+        getBrightcove().Toaster.error({
+          message: t('toasterErrorMessage') as string,
+        });
       });
+  }, [previewUrl, t, notifyMissingPreviewUrl, showCopiedFeedback]);
+
+  const handleCopyShortUrl = useCallback(() => {
+    if (!previewUrl) {
+      notifyMissingPreviewUrl();
       return;
     }
-    navigator.clipboard.writeText(previewUrl).then(() => {
-      getBrightcove().Toaster.success({
-        title: t('toasterTitle') as string,
-        message: t('toasterGetURLSuccess') as string,
+    const requestId = shortenRequestRef.current + 1;
+    shortenRequestRef.current = requestId;
+    const isCurrentRequest = () => shortenRequestRef.current === requestId;
+
+    setIsShorteningUrl(true);
+    getUrlAndAddItToClipboard(previewUrl)
+      .then(() => {
+        if (isCurrentRequest()) {
+          showCopiedFeedback();
+        }
+      })
+      .catch(() => {
+        if (isCurrentRequest()) {
+          getBrightcove().Toaster.error({
+            message: t('toasterGetURLError') as string,
+          });
+        }
+      })
+      .finally(() => {
+        if (isCurrentRequest()) {
+          setIsShorteningUrl(false);
+        }
       });
-    });
-  }, [previewUrl, t]);
+  }, [previewUrl, t, notifyMissingPreviewUrl, showCopiedFeedback]);
+
+  const copyUrlOptions = useMemo(
+    () => [
+      {
+        id: 'short-url',
+        label: t('prism.shortURL') as string,
+        icon: 'LAYERS_SUBTRACT',
+        onClick: handleCopyShortUrl,
+        disabled: isShorteningUrl,
+      },
+      {
+        id: 'full-url',
+        label: t('prism.fullURL') as string,
+        icon: 'LAYERS_SUBTRACT',
+        onClick: handleCopyFullUrl,
+      },
+    ],
+    [t, handleCopyShortUrl, handleCopyFullUrl, isShorteningUrl],
+  );
+
+  const copyUrlLabel = () => {
+    if (isCopied) {
+      return t('prism.copied') as string;
+    }
+    if (isShorteningUrl) {
+      return t('prism.copying') as string;
+    }
+    return t('prism.copyURL') as string;
+  };
 
   const handleOpenPreview = useCallback(() => {
     if (!previewUrl) {
-      getBrightcove().Toaster.error({
-        title: t('toasterTitle') as string,
-        message: 'Please select a player first',
-      });
+      notifyMissingPreviewUrl();
       return;
     }
     window.open(previewUrl, '_blank', 'noopener,noreferrer');
-  }, [previewUrl, t]);
+  }, [previewUrl, notifyMissingPreviewUrl]);
 
   // Build player options for Live modal
   // Note: Following Bluesteel pattern - we DON'T pass adConfigId or livePlaybackToken
@@ -63,15 +151,17 @@ export const PrismPlayerPreview = ({
   return (
     <div className={css.prismPlayerPreviewContainer}>
       <div className={css.prismPlayerActions}>
-        <PrismButton
+        <PrismButtonDropdown
           variant='Primary'
           size='small'
-          onClick={handleCopyUrl}
-          rightIcon='copy'
-          disabled={!previewUrl}
+          options={copyUrlOptions}
+          modalTitle={t('prism.copyURL') as string}
+          showDropdownIcon={!isCopied && !isShorteningUrl}
+          {...(isCopied ? { rightIcon: 'CHECK' } : {})}
+          disabled={!previewUrl || isShorteningUrl || isCopied}
         >
-          {t('prism.getURL') as string}
-        </PrismButton>
+          {copyUrlLabel()}
+        </PrismButtonDropdown>
         <PrismButton
           variant='Primary'
           size='small'

package/src/translations/en.json

@@ -53,7 +53,11 @@
   },
   "adConfiguration": "Ad Configuration",
   "prism": {
-    "getURL": "URL",
+    "copying": "Copying...",
+    "copied": "Copied",
+    "copyURL": "Copy URL",
+    "shortURL": "Short URL",
+    "fullURL": "Full URL",
     "customSettings": {
       "sizing": "Player Sizing"
     }

package/src/translations/es.json

@@ -53,7 +53,11 @@
   },
   "adConfiguration": "Configuración de Anuncios",
   "prism": {
-    "getURL": "URL",
+    "copying": "Copiando...",
+    "copied": "Copiado",
+    "copyURL": "Copiar URL",
+    "shortURL": "URL corta",
+    "fullURL": "URL completa",
     "customSettings": {
       "sizing": "Tamaño del Reproductor"
     }

package/src/translations/fr.json

@@ -53,7 +53,11 @@
     "unit": "s"
   },
   "prism": {
-    "getURL": "URL",
+    "copying": "Copie en cours...",
+    "copied": "Copié",
+    "copyURL": "Copier l'URL",
+    "shortURL": "URL courte",
+    "fullURL": "URL complète",
     "customSettings": {
       "sizing": "Taille du Lecteur"
     }

package/src/translations/ja.json

@@ -53,7 +53,11 @@
     "unit": "秒"
   },
   "prism": {
-    "getURL": "URL",
+    "copying": "コピー中...",
+    "copied": "コピー済み",
+    "copyURL": "URLをコピー",
+    "shortURL": "短縮URL",
+    "fullURL": "完全なURL",
     "customSettings": {
       "sizing": "プレーヤーのサイズ"
     }

package/src/translations/ko.json

@@ -53,7 +53,11 @@
     "unit": "초"
   },
   "prism": {
-    "getURL": "URL",
+    "copying": "복사 중...",
+    "copied": "복사됨",
+    "copyURL": "URL 복사",
+    "shortURL": "짧은 URL",
+    "fullURL": "전체 URL",
     "customSettings": {
       "sizing": "플레이어 크기"
     }

package/src/translations/zh.json

@@ -53,7 +53,11 @@
     "unit": "秒"
   },
   "prism": {
-    "getURL": "URL",
+    "copying": "複製中...",
+    "copied": "已複製",
+    "copyURL": "複製URL",
+    "shortURL": "短網址",
+    "fullURL": "完整URL",
     "customSettings": {
       "sizing": "播放程式大小"
     }