@hubspot/cms-component-library 0.3.11 → 0.3.13

package/components/componentLibrary/Video/islands/EmbedVideoIsland.tsx

@@ -0,0 +1,239 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { CSSVariables } from '../../utils/types.js';
+import { EmbedVideoIslandProps, EmbedVideoParams } from '../types.js';
+import styles from './index.module.scss';
+
+const toPx = (value: number | string | undefined) => {
+  if (typeof value === 'number') {
+    return `${value.toString()}px`;
+  } else if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    return isNaN(parsed) ? undefined : `${parsed}px`;
+  }
+
+  return undefined;
+};
+
+const getSizeStyles = (
+  embedVideoParams: EmbedVideoParams,
+  oembedData: EmbedVideoParams['oembed_response']
+) => {
+  const responseWidth = oembedData?.width;
+  const responseHeight = oembedData?.height;
+  switch (embedVideoParams.size_type) {
+    case 'exact':
+      return {
+        width: toPx(embedVideoParams.width ?? responseWidth),
+        height: toPx(embedVideoParams.height ?? responseHeight),
+      };
+    case 'auto_full_width':
+      return {};
+    default:
+      return {
+        maxWidth: toPx(embedVideoParams.max_width ?? responseWidth),
+        maxHeight: toPx(embedVideoParams.max_height ?? responseHeight),
+      };
+  }
+};
+
+const CustomThumbnailPlayIcon = () => (
+  <svg viewBox="0 0 135.39 149.4">
+    <path
+      d="M371.2,398.69l-127.79,71c-1.47.83-2.74.93-3.8.28a3.69,3.69,0,0,1-1.59-3.46V324.88a3.73,3.73,0,0,1,1.59-3.47,3.66,3.66,0,0,1,3.8.29l127.79,71c1.47.84,2.21,1.82,2.21,3S372.67,397.85,371.2,398.69Z"
+      transform="translate(-238.02 -321)"
+    ></path>
+  </svg>
+);
+
+const OEmbedContainer = ({
+  embedVideoParams,
+  oEmbedThumbnail,
+  oEmbedPlayButtonColor,
+}: {
+  embedVideoParams: EmbedVideoParams;
+  oEmbedThumbnail?: { src: string; alt?: string };
+  oEmbedPlayButtonColor?: { color?: string };
+}) => {
+  const {
+    size_type: sizeType,
+    oembed_url: oembedUrl,
+    oembed_response: oembedResponse,
+    supported_oembed_types: supportedOembedTypes,
+  } = embedVideoParams;
+
+  const [oembedData, setOembedData] =
+    useState<EmbedVideoParams['oembed_response']>(oembedResponse);
+  const [hasPlayed, setHasPlayed] = useState(false);
+  const iframeWrapperRef = useRef<HTMLDivElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  const isSupportedOEmbedType = supportedOembedTypes.includes(
+    oembedData?.type || ''
+  );
+  const sizeStyles = useMemo(
+    () => getSizeStyles(embedVideoParams, oembedData),
+    [embedVideoParams, oembedData]
+  );
+
+  const cssVariables: CSSVariables = {
+    ...(oEmbedPlayButtonColor?.color && {
+      '--hscl-video-playButton-color': oEmbedPlayButtonColor.color,
+    }),
+  };
+
+  useEffect(() => {
+    if (oembedData || !oembedUrl) {
+      return;
+    }
+
+    const fetchOEmbed = async () => {
+      try {
+        const query = new URLSearchParams({
+          url: oembedUrl,
+          autoplay: '0',
+        });
+        const response = await fetch(`/_hcms/oembed?${query}`);
+        if (!response.ok) {
+          console.error('Server reached, error retrieving oEmbed response.');
+          return;
+        }
+        setOembedData(await response.json());
+      } catch {
+        console.error(
+          'Could not reach the server. Failed to retrieve oEmbed response.'
+        );
+      }
+    };
+    fetchOEmbed();
+  }, [oembedUrl]);
+
+  useEffect(() => {
+    if (!oembedData) {
+      return;
+    }
+
+    const el = document.createElement('div');
+    el.innerHTML = oembedData.html;
+    const iframe = el.firstChild as HTMLIFrameElement;
+    iframe.setAttribute('class', styles['oembed_container_iframe']);
+    iframe.setAttribute('title', oembedData.title || '');
+    iframeRef.current = iframe;
+    if (!oEmbedThumbnail?.src) {
+      // if there is a custom thumbnail, iframe will be appended on click
+      iframeWrapperRef.current?.appendChild(iframe);
+      Object.assign(iframe.style, sizeStyles);
+    }
+  }, [oembedData, oEmbedThumbnail?.src]);
+
+  return (
+    <div
+      className={`${styles.oembed_container} ${
+        sizeType === 'auto_full_width' ? 'oembed_container--full-size' : ''
+      }`}
+      style={sizeStyles}
+    >
+      {oEmbedThumbnail?.src && (
+        <button
+          className={styles['oembed_custom-thumbnail']}
+          style={{
+            ...sizeStyles,
+            backgroundImage: `url(${oEmbedThumbnail.src})`,
+            display: hasPlayed ? 'none' : undefined,
+          }}
+          onClick={() => {
+            const iframe = iframeRef.current;
+            if (iframe) {
+              const iframeSrc = new URL(iframe.src);
+              iframeSrc.searchParams.append('autoplay', '1');
+              iframe.src = iframeSrc.toString();
+              Object.assign(iframe.style, sizeStyles);
+              iframeWrapperRef.current?.appendChild(iframe);
+              setHasPlayed(true);
+            }
+          }}
+        >
+          <span className={styles['oembed-info']}>
+            {[
+              'Video player',
+              oEmbedThumbnail.alt ?? '',
+              'Click to play video',
+            ].join(' - ')}
+          </span>
+          <div
+            className={styles['oembed_custom-thumbnail_icon']}
+            style={cssVariables}
+          >
+            <CustomThumbnailPlayIcon />
+          </div>
+        </button>
+      )}
+      {isSupportedOEmbedType && oembedData && (
+        <div ref={iframeWrapperRef} className={styles.iframe_wrapper} />
+      )}
+    </div>
+  );
+};
+
+const EmbedHTMLContainer = ({ embedHtml }: { embedHtml: string }) => {
+  const embedContainerRef = useRef<HTMLDivElement>(null);
+  const iframeWrapperRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const container = embedContainerRef.current;
+    const iframe = iframeWrapperRef.current?.querySelector('iframe');
+
+    if (!container || !iframe) {
+      return;
+    }
+
+    const maxHeight = iframe.getAttribute('height');
+    const maxWidth = iframe.getAttribute('width');
+    if (maxHeight !== null) {
+      container.style.maxHeight = toPx(maxHeight);
+    } else {
+      iframe.style.height = '100%';
+    }
+    if (maxWidth !== null) {
+      container.style.maxWidth = toPx(maxWidth);
+    } else {
+      iframe.style.width = '100%';
+    }
+  }, []);
+
+  return (
+    <div ref={embedContainerRef} className={styles.embed_container}>
+      <div
+        ref={iframeWrapperRef}
+        className={styles.iframe_wrapper}
+        dangerouslySetInnerHTML={{ __html: embedHtml }}
+      />
+    </div>
+  );
+};
+
+const EmbedVideoIsland = ({
+  embedVideoParams,
+  oembedThumbnail,
+  playButtonColor,
+}: EmbedVideoIslandProps) => {
+  if (
+    embedVideoParams.source_type === 'oembed' &&
+    embedVideoParams.oembed_url
+  ) {
+    return (
+      <OEmbedContainer
+        embedVideoParams={embedVideoParams}
+        oEmbedThumbnail={oembedThumbnail}
+        oEmbedPlayButtonColor={playButtonColor}
+      />
+    );
+  }
+
+  if (embedVideoParams.source_type === 'html' && embedVideoParams.embed_html) {
+    return <EmbedHTMLContainer embedHtml={embedVideoParams.embed_html} />;
+  }
+
+  return null;
+};
+
+export default EmbedVideoIsland;

package/components/componentLibrary/Video/islands/HSVideoIsland.tsx

@@ -9,6 +9,7 @@ import {
   VideoPlayerProvider,
 } from '@hubspot/video-player-core';
 
+import TrackHSVideoAnalytics from '../TrackHSVideoAnalytics.js';
 import { HSVideoIslandProps } from '../types.js';
 
 const HSVideoIsland = ({
@@ -44,6 +45,9 @@ const HSVideoIsland = ({
             playButtonColor={playButtonColor}
             theme="DARK"
           />
+          {resolvedVideo && (
+            <TrackHSVideoAnalytics video={resolvedVideo} portalId={portalId} />
+          )}
         </TranslationsProvider>
       </VideoPlayerProvider>
     </VideoFetchProvider>

package/components/componentLibrary/Video/islands/index.module.scss

@@ -0,0 +1,94 @@
+.oembed_container {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.oembed_container_iframe {
+  height: 100%;
+  left: 0;
+  margin: 0 auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+
+.oembed_custom-thumbnail,
+.oembed_custom-thumbnail:hover,
+.oembed_custom-thumbnail:focus,
+.oembed_custom-thumbnail:active {
+  align-items: center;
+  appearance: none;
+  background-color: transparent;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  border-radius: 0;
+  border: none;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 1;
+}
+
+.oembed_custom-thumbnail_icon {
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  svg {
+    display: block;
+    height: auto;
+    width: 12%;
+    fill: var(--hscl-video-playButton-color, #ffffff);
+  }
+}
+
+/* SVGs in IE11 require the max-width to be set to non in order to display scaling properly */
+_:-ms-fullscreen,
+:root .oembed_custom-thumbnail_icon svg {
+  max-width: none;
+  fill: var(--hscl-video-playButton-color, #ffffff);
+}
+
+.oembed-info {
+  height: 1px;
+  left: -10000px;
+  overflow: hidden;
+  position: absolute;
+  top: auto;
+  width: 1px;
+}
+
+.iframe_wrapper {
+  height: 0;
+  padding-bottom: 56.25%;
+  padding-top: 25px;
+  position: relative;
+}
+
+.embed_container {
+  display: inline-block;
+  height: 100%;
+  position: relative;
+  width: 100%;
+}
+
+.embed_container iframe {
+  left: 0;
+  max-height: 100%;
+  max-width: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+}

package/components/componentLibrary/Video/types.ts

@@ -72,3 +72,25 @@ export type EmbedVideoParams = {
   // fields for 'html' source_type
   embed_html?: string;
 };
+
+declare global {
+  interface Window {
+    hsVars?: {
+      page_id?: number;
+    };
+    _hsq?: [string, unknown];
+    __hsUserToken?: string;
+  }
+}
+
+export type PrivacyConsent = {
+  categories?: Record<string, boolean>;
+  allowed?: boolean;
+};
+
+export type PageMeta = {
+  pageUrl: string;
+  pageTitle: string;
+  pageId: number;
+  _hsenc?: string;
+};

package/components/componentLibrary/Video/utils/videoAnalytics.ts

@@ -0,0 +1,146 @@
+import { getHublet, HSEnvironment } from '@hubspot/cms-components';
+import { PageMeta } from '../types.js';
+
+type TrackPlayParams = {
+  crmObjectId: number;
+  sessionId: string;
+  contactUtk: string;
+  pageMeta: PageMeta;
+};
+
+type RetentionParams = {
+  secondsToViews: Record<string, number>;
+  endState: boolean;
+};
+
+type CompletedPlayParams = {
+  secondsViewed: number;
+  percentageViewed: number;
+};
+
+const getApiDomain = (env?: HSEnvironment) => {
+  const computedEnv = env || 'prod';
+  return computedEnv === 'qa' ? 'hubspotqa.com' : 'hubspot.com';
+};
+
+const getApiOrigin = (env?: HSEnvironment) => {
+  const hublet = getHublet();
+  const apiSubdomainWithHublet = hublet === 'na1' ? 'api' : `api-${hublet}`;
+  return `https://${apiSubdomainWithHublet}.${getApiDomain(env)}`;
+};
+
+export const trackPlayEvent = async (
+  env: HSEnvironment,
+  portalId: number,
+  params: TrackPlayParams
+) => {
+  const data = {
+    ...params.pageMeta,
+    crmObjectId: params.crmObjectId,
+    sessionId: params.sessionId,
+    contactUtk: params.contactUtk,
+  };
+
+  const response = await fetch(
+    `${getApiOrigin(
+      env
+    )}/media-bridge/public/v1/media/played?portalId=${portalId}`,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    }
+  );
+
+  if (!response.ok) {
+    const errorData = {
+      status: response.status,
+      requestBody: data,
+      responseText: await response.text(),
+    };
+
+    console.error('Failed to track play event', {
+      extra: errorData,
+      level: 'warning',
+      tags: { status: response.status },
+    });
+  }
+};
+
+export const trackSecondsViewed = async (
+  env: HSEnvironment,
+  portalId: number,
+  params: TrackPlayParams,
+  retentionParams: RetentionParams
+) => {
+  let query = `portalId=${portalId}`;
+  if (retentionParams.endState) {
+    query += `&endState=true`;
+  }
+
+  const data = {
+    ...params.pageMeta,
+    crmObjectId: params.crmObjectId,
+    sessionId: params.sessionId,
+    contactUtk: params.contactUtk,
+    secondsToViews: retentionParams.secondsToViews,
+  };
+
+  const response = await fetch(
+    `${getApiOrigin(env)}/media-bridge/public/v1/media/seconds-viewed?${query}`,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    }
+  );
+
+  if (!response.ok) {
+    const errorData = {
+      status: response.status,
+      requestBody: data,
+      responseText: await response.text(),
+    };
+
+    console.error('Failed to track seconds viewed', {
+      extra: errorData,
+      level: 'warning',
+      tags: { status: response.status },
+    });
+  }
+};
+
+export const trackCompletedPlay = async (
+  env: HSEnvironment,
+  portalId: number,
+  params: TrackPlayParams,
+  completedPlayParams: CompletedPlayParams
+) => {
+  if (!window.navigator || typeof window.navigator.sendBeacon !== 'function') {
+    return false;
+  }
+
+  try {
+    const data = new Blob(
+      [
+        JSON.stringify({
+          crmObjectId: params.crmObjectId,
+          sessionId: params.sessionId,
+          contactUtk: params.contactUtk,
+          ...params.pageMeta,
+          ...completedPlayParams,
+        }),
+      ],
+      { type: 'text/plain' }
+    );
+    return window.navigator.sendBeacon(
+      `${getApiOrigin(
+        env
+      )}/media-bridge/public/v1/media/completed-play?portalId=${portalId}`,
+      data
+    );
+  } catch (err) {
+    console.error('Error tracking final attention span', err);
+    return false;
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/cms-component-library",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "description": "HubSpot CMS React component library for building CMS modules",
   "license": "Apache-2.0",
   "exports": {