Load audio sticker images from CDN

packages/element-library/src/audioSticker/display.tsx

@@ -27,11 +27,7 @@ import type {
  * Internal dependencies
  */
 import { elementFillContent } from '../shared';
-import {
-  AUDIO_STICKERS,
-  AUDIO_STICKER_STYLES,
-  AUDIO_STICKER_LABELS,
-} from '../constants';
+import { AUDIO_STICKER_STYLES, AUDIO_STICKER_LABELS } from '../constants';
 
 interface ElementProps {
   stickerStyle: keyof typeof AUDIO_STICKER_STYLES;
@@ -42,7 +38,10 @@ const Element = styled.img<ElementProps>`
   ${({ stickerStyle }) => AUDIO_STICKER_STYLES[stickerStyle]}
 `;
 
-function AudioStickerDisplay({ element }: DisplayProps<AudioStickerElement>) {
+function AudioStickerDisplay({
+  element,
+  cdnUrl,
+}: DisplayProps<AudioStickerElement>) {
   const {
     width: elementWidth,
     height: elementHeight,
@@ -52,7 +51,8 @@ function AudioStickerDisplay({ element }: DisplayProps<AudioStickerElement>) {
 
   return (
     <Element
-      src={AUDIO_STICKERS[sticker]}
+      src={`${cdnUrl}images/audio-sticker/${sticker}-pretap.png`}
+      crossOrigin="anonymous"
       stickerStyle={style}
       height={elementHeight}
       width={elementWidth}

packages/element-library/src/constants.ts

@@ -19,23 +19,6 @@
  */
 import { __ } from '@googleforcreators/i18n';
 
-/**
- * Internal dependencies
- */
-import headphoneCat from './audioSticker/images/headphone-cat/headphone-cat-pretap.png';
-import tapePlayer from './audioSticker/images/tape-player/tape-player-pretap.png';
-import loudSpeaker from './audioSticker/images/loud-speaker/loud-speaker-posttap.png';
-import audioCloud from './audioSticker/images/audio-cloud/audio-cloud-posttap.png';
-
-// TODO: Move to audioSticker folder once TypeScript conversion is complete.
-// See https://github.com/GoogleForCreators/web-stories-wp/pull/13503.
-export const AUDIO_STICKERS: Record<string, string> = {
-  'headphone-cat': headphoneCat,
-  'tape-player': tapePlayer,
-  'loud-speaker': loudSpeaker,
-  'audio-cloud': audioCloud,
-} as const;
-
 export const AUDIO_STICKER_STYLES = {
   none: '',
   outline: 'border: 4px solid white; border-radius: 20px',

packages/elements/src/types/elementDefinition.ts

@@ -123,6 +123,7 @@ export interface DisplayProps<E extends Element> {
     blurHash?: string;
     baseColor?: string;
   }) => void;
+  cdnUrl: string;
 }
 
 export type Direction = [0 | 1, 0 | 1];

packages/story-editor/src/components/canvas/displayElement.js

@@ -45,7 +45,7 @@ import {
  */
 import { StoryPropTypes } from '../../propTypes';
 import useCORSProxy from '../../utils/useCORSProxy';
-import { useLocalMedia, useFont } from '../../app';
+import { useLocalMedia, useFont, useConfig } from '../../app';
 import renderResourcePlaceholder from './renderResourcePlaceholder';
 
 // Using attributes to avoid creation of hundreds of classes by styled components for previewMode.
@@ -116,6 +116,7 @@ function DisplayElement({
     dataToEditorX: state.actions.dataToEditorX,
   }));
   const { getProxiedUrl } = useCORSProxy();
+  const { cdnURL } = useConfig();
   const {
     actions: { maybeEnqueueFontStyle },
   } = useFont();
@@ -267,6 +268,7 @@ function DisplayElement({
             maybeEnqueueFontStyle={maybeEnqueueFontStyle}
             siblingCount={siblingCount}
             renderResourcePlaceholder={renderResourcePlaceholder}
+            cdnUrl={cdnURL}
           />
         </WithMask>
         {!previewMode && (

packages/story-editor/src/components/panels/design/audioSticker/stickerStyle.js

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * External dependencies
  */
@@ -21,14 +22,14 @@ import PropTypes from 'prop-types';
 import { useCallback } from '@googleforcreators/react';
 import { __, sprintf } from '@googleforcreators/i18n';
 import {
-  AUDIO_STICKERS,
   AUDIO_STICKER_STYLES,
   AUDIO_STICKER_LABELS,
 } from '@googleforcreators/element-library';
 
 /**
  * Internal dependencies
  */
+import { useConfig } from '../../../../app/config';
 import { Row, FilterToggle } from '../../../form';
 import { SimplePanel } from '../../panel';
 import { states, useHighlights } from '../../../../app/highlights';
@@ -52,6 +53,8 @@ const StickerImage = styled.img`
 `;
 
 function StickerStyle({ selectedElements, pushUpdate }) {
+  const { cdnURL } = useConfig();
+
   const stickerObj = selectedElements[0];
   const style = stickerObj.style;
   const type = stickerObj.sticker;
@@ -102,7 +105,8 @@ function StickerStyle({ selectedElements, pushUpdate }) {
               )}
             >
               <StickerImage
-                src={AUDIO_STICKERS[type]}
+                src={`${cdnURL}images/audio-sticker/${type}-pretap.png`}
+                crossOrigin="anonymous"
                 alt={AUDIO_STICKER_LABELS[type].label}
                 stickerStyle={stickerStyle}
               />

packages/story-editor/src/components/panels/design/audioSticker/stickerType.js

@@ -13,21 +13,20 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 /**
  * External dependencies
  */
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useCallback } from '@googleforcreators/react';
 import { __, sprintf } from '@googleforcreators/i18n';
-import {
-  AUDIO_STICKERS,
-  AUDIO_STICKER_LABELS,
-} from '@googleforcreators/element-library';
+import { AUDIO_STICKER_LABELS } from '@googleforcreators/element-library';
 
 /**
  * Internal dependencies
  */
+import { useConfig } from '../../../../app/config';
 import { Row, FilterToggle } from '../../../form';
 import { SimplePanel } from '../../panel';
 import { states, useHighlights } from '../../../../app/highlights';
@@ -53,6 +52,8 @@ const StickerImage = styled.img`
 `;
 
 function StickerType({ selectedElements, pushUpdate }) {
+  const { cdnURL } = useConfig();
+
   const stickerObj = selectedElements[0];
 
   const { highlight, resetHighlight } = useHighlights((state) => ({
@@ -101,7 +102,8 @@ function StickerType({ selectedElements, pushUpdate }) {
               )}
             >
               <StickerImage
-                src={AUDIO_STICKERS[type]}
+                src={`${cdnURL}images/audio-sticker/${type}-pretap.png`}
+                crossOrigin="anonymous"
                 alt={AUDIO_STICKER_LABELS[type].label}
               />
             </FilterToggle>