@streamscloud/embeddable 2.1.3 → 2.1.5

package/dist/short-videos/short-videos-player/controls.svelte

@@ -3,12 +3,12 @@ import { Icon } from '../../ui/icon';
 import { MediaVolumeManager } from '../../ui/media-playback';
 import { default as ActionButton } from './action-button.svelte';
 import { ShortVideosPlayerLocalization } from './short-videos-player-localization.svelte.js';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg';
-import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg';
-import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg';
-import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg?raw';
+import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
 let { buffer, uiManager, localization, on } = $props();
 const toggleMuted = () => {
     MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;

package/dist/streams/stream-player/controls.svelte

@@ -5,13 +5,13 @@ import { Icon } from '../../ui/icon';
 import { MediaVolumeManager } from '../../ui/media-playback';
 import { default as ActionButton } from './action-button.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization.svelte';
-import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg';
-import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg';
-import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg';
-import IconFullScreenMaximize from '@fluentui/svg-icons/icons/full_screen_maximize_20_regular.svg';
-import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg';
-import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
+import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
+import IconChevronUp from '@fluentui/svg-icons/icons/chevron_up_20_regular.svg?raw';
+import IconDismiss from '@fluentui/svg-icons/icons/dismiss_20_regular.svg?raw';
+import IconFullScreenMaximize from '@fluentui/svg-icons/icons/full_screen_maximize_20_regular.svg?raw';
+import IconPanelRightGallery from '@fluentui/svg-icons/icons/panel_right_gallery_20_regular.svg?raw';
+import IconSpeaker2 from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
 let { buffer, uiManager, localization, on } = $props();
 const toggleMuted = () => {
     MediaVolumeManager.isMuted = !MediaVolumeManager.isMuted;

package/dist/streams/stream-player/stream-overview.svelte

@@ -7,7 +7,7 @@ import { ProportionalContainer } from '../../ui/proportional-container';
 import { TimeAgo } from '../../ui/time-ago';
 import { default as ActionButton } from './action-button.svelte';
 import { StreamPlayerLocalization } from './stream-player-localization.svelte';
-import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg';
+import IconPanelLeftText from '@fluentui/svg-icons/icons/panel_left_text_20_regular.svg?raw';
 let { model, buffer, activePageId, on, uiManager, localization } = $props();
 </script>
 

package/dist/ui/icon/cmp.icon.svelte

@@ -13,20 +13,18 @@ const fillSvg = (node) => {
 };
 </script>
 
-<div style="display: contents">
-  {#if src.startsWith('fa-')}
-    <i class="{src} font-awesome-icon-to-replace"></i>
+<div class="icon" style="display: contents"
+     class:icon--white={color === IconColor.White}
+     class:icon--text={color === IconColor.Text}
+     class:icon--gray={color === IconColor.Gray}
+     class:icon--green={color === IconColor.Green}
+     class:icon--red={color === IconColor.Red}
+     class:icon--orange={color === IconColor.Orange}
+     class:icon--blue={color === IconColor.Blue}>
+  {#if src.startsWith('<svg')}
+    {@html src}
   {:else}
-    <svg
-      class="icon"
-      use:fillSvg
-      class:icon--white={color === IconColor.White}
-      class:icon--text={color === IconColor.Text}
-      class:icon--gray={color === IconColor.Gray}
-      class:icon--green={color === IconColor.Green}
-      class:icon--red={color === IconColor.Red}
-      class:icon--orange={color === IconColor.Orange}
-      class:icon--blue={color === IconColor.Blue}></svg>
+    <svg use:fillSvg></svg>
   {/if}
 </div>
 
@@ -45,15 +43,6 @@ const fillSvg = (node) => {
   --_icon--color: var(--icon--color);
   --_icon--size: var(--icon--size, 1.25em);
   --_icon--stroke-width: var(--icon--stroke-width, 0);
-  display: inline-block;
-  color: inherit;
-  fill: var(--_icon--color, currentColor);
-  height: var(--_icon--size);
-  min-height: var(--_icon--size);
-  max-height: var(--_icon--size);
-  width: var(--_icon--size);
-  min-width: var(--_icon--size);
-  max-width: var(--_icon--size);
 }
 .icon--white {
   --_icon--color: #ffffff;
@@ -97,6 +86,17 @@ const fillSvg = (node) => {
 :global([data-theme="dark"]) .icon--blue {
   --_icon--color: #91b3f3;
 }
+.icon :global(svg) {
+  display: inline-block;
+  color: inherit;
+  fill: var(--_icon--color, currentColor);
+  height: var(--_icon--size);
+  min-height: var(--_icon--size);
+  max-height: var(--_icon--size);
+  width: var(--_icon--size);
+  min-width: var(--_icon--size);
+  max-width: var(--_icon--size);
+}
 .icon :global(path) {
   stroke: var(--_icon--color);
   stroke-width: var(--_icon--stroke-width);
@@ -104,10 +104,4 @@ const fillSvg = (node) => {
 :global([data-theme="dark"]) .icon :global(path) {
   stroke: var(--_icon--color);
   stroke-width: var(--_icon--stroke-width);
-}
-
-.font-awesome-icon-to-replace {
-  font-size: 1em;
-  transform: scale(2);
-  color: red;
 }</style>

package/dist/ui/image/cmp.image-stub.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">import { Icon } from '../icon';
-import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg';
+import IconImage from '@fluentui/svg-icons/icons/image_20_regular.svg?raw';
 </script>
 
 <div class="image-stub">

package/dist/ui/image/cmp.image.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { Icon } from '../icon';
 import { calculateImageState, ImageState } from './image-state';
-import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg';
+import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg?raw';
 let { src, alt = '', showStubOnError = false, on, stub } = $props();
 let hasError = $state(false);
 const imageState = $derived(calculateImageState(src, hasError, showStubOnError));

package/dist/ui/video/cmp.video.svelte

@@ -12,10 +12,10 @@ import { Icon, IconColor } from '../icon';
 import { MediaVolumeManager, PlaybackManager } from '../media-playback';
 import { Progress } from '../progress';
 import { SeekBar } from '../seek-bar';
-import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg';
-import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg';
-import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg';
-import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg';
+import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg?raw';
+import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg?raw';
+import IconSpeaker from '@fluentui/svg-icons/icons/speaker_2_20_regular.svg?raw';
+import IconSpeakerMute from '@fluentui/svg-icons/icons/speaker_mute_20_regular.svg?raw';
 import { onDestroy, onMount, untrack } from 'svelte';
 import { slide } from 'svelte/transition';
 let { src, poster, id = randomNanoid(), controls = true, autoplay = false, loop = false, inert = false, intersectionContainer, on } = $props();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/embeddable",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "author": "StreamsCloud",
   "repository": "https://github.com/StreamsCloud/streamscloud-frontend-packages.git",
   "type": "module",