@streamscloud/embeddable 2.1.1 → 2.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/core/continuation-token.d.ts +10 -0
- package/dist/core/continuation-token.js +32 -0
- package/dist/core/cursor-result.d.ts +9 -0
- package/dist/core/cursor-result.js +1 -0
- package/dist/core/data-loaders/cursor-data-loader.svelte.d.ts +14 -0
- package/dist/core/data-loaders/cursor-data-loader.svelte.js +35 -0
- package/dist/core/data-loaders/data-loader.d.ts +4 -0
- package/dist/core/data-loaders/data-loader.js +1 -0
- package/dist/core/data-loaders/index.d.ts +2 -0
- package/dist/core/data-loaders/index.js +1 -0
- package/dist/core/deferred.d.ts +6 -0
- package/dist/core/deferred.js +13 -0
- package/dist/core/enums.d.ts +33 -0
- package/dist/core/enums.js +39 -0
- package/dist/core/graphql.d.ts +1 -0
- package/dist/core/graphql.js +10 -0
- package/dist/core/media/image-helper.d.ts +10 -0
- package/dist/core/media/image-helper.js +30 -0
- package/dist/core/media/images-size-detector.service.d.ts +6 -0
- package/dist/core/media/images-size-detector.service.js +15 -0
- package/dist/core/media/index.d.ts +4 -0
- package/dist/core/media/index.js +4 -0
- package/dist/core/media/media-item-url.service.d.ts +2 -0
- package/dist/core/media/media-item-url.service.js +3 -0
- package/dist/core/media/types.d.ts +13 -0
- package/dist/core/media/types.js +1 -0
- package/dist/core/toastr.d.ts +1 -0
- package/dist/core/toastr.js +26 -0
- package/dist/core/transitions/index.d.ts +1 -0
- package/dist/core/transitions/index.js +1 -0
- package/dist/core/transitions/slide-horizontally.d.ts +7 -0
- package/dist/core/transitions/slide-horizontally.js +55 -0
- package/dist/core/utils/array-helper.d.ts +23 -0
- package/dist/core/utils/array-helper.js +148 -0
- package/dist/core/utils/date-helper.d.ts +29 -0
- package/dist/core/utils/date-helper.js +146 -0
- package/dist/core/utils/dom-helper.d.ts +12 -0
- package/dist/core/utils/dom-helper.js +76 -0
- package/dist/core/utils/html-helper.d.ts +40 -0
- package/dist/core/utils/html-helper.js +97 -0
- package/dist/core/utils/index.d.ts +3 -0
- package/dist/core/utils/index.js +3 -0
- package/dist/core/utils/number-helper.d.ts +6 -0
- package/dist/core/utils/number-helper.js +28 -0
- package/dist/core/utils/string-generator.d.ts +2 -0
- package/dist/core/utils/string-generator.js +15 -0
- package/dist/core/utils/string-helper.d.ts +10 -0
- package/dist/core/utils/string-helper.js +53 -0
- package/dist/core/utils/url-helper.d.ts +3 -0
- package/dist/core/utils/url-helper.js +13 -0
- package/dist/core/utils/utils.d.ts +28 -0
- package/dist/core/utils/utils.js +100 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/dist/products/price-helper.d.ts +4 -0
- package/dist/products/price-helper.js +47 -0
- package/dist/short-videos/short-video-viewer/cmp.ad.svelte +74 -0
- package/dist/short-videos/short-video-viewer/cmp.ad.svelte.d.ts +7 -0
- package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte +70 -0
- package/dist/short-videos/short-video-viewer/cmp.attachments-inline.svelte.d.ts +7 -0
- package/dist/short-videos/short-video-viewer/cmp.attachments.svelte +68 -0
- package/dist/short-videos/short-video-viewer/cmp.attachments.svelte.d.ts +12 -0
- package/dist/short-videos/short-video-viewer/cmp.product.svelte +168 -0
- package/dist/short-videos/short-video-viewer/cmp.product.svelte.d.ts +13 -0
- package/dist/short-videos/short-video-viewer/cmp.short-video-details.svelte +124 -0
- package/dist/short-videos/short-video-viewer/cmp.short-video-details.svelte.d.ts +13 -0
- package/dist/short-videos/short-video-viewer/cmp.short-video-heading.svelte +86 -0
- package/dist/short-videos/short-video-viewer/cmp.short-video-heading.svelte.d.ts +9 -0
- package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte +133 -0
- package/dist/short-videos/short-video-viewer/cmp.short-video-viewer.svelte.d.ts +15 -0
- package/dist/short-videos/short-video-viewer/description.svelte +46 -0
- package/dist/short-videos/short-video-viewer/description.svelte.d.ts +9 -0
- package/dist/short-videos/short-video-viewer/index.d.ts +9 -0
- package/dist/short-videos/short-video-viewer/index.js +6 -0
- package/dist/short-videos/short-video-viewer/mapper.d.ts +3 -0
- package/dist/short-videos/short-video-viewer/mapper.js +56 -0
- package/dist/short-videos/short-video-viewer/operations.generated.d.ts +56 -0
- package/dist/short-videos/short-video-viewer/operations.generated.js +151 -0
- package/dist/short-videos/short-video-viewer/operations.graphql +53 -0
- package/dist/short-videos/short-video-viewer/short-video-attachments-localization.svelte.d.ts +12 -0
- package/dist/short-videos/short-video-viewer/short-video-attachments-localization.svelte.js +10 -0
- package/dist/short-videos/short-video-viewer/short-video-details-localization.svelte.d.ts +13 -0
- package/dist/short-videos/short-video-viewer/short-video-details-localization.svelte.js +10 -0
- package/dist/short-videos/short-video-viewer/short-video-product-localization.svelte.d.ts +7 -0
- package/dist/short-videos/short-video-viewer/short-video-product-localization.svelte.js +11 -0
- package/dist/short-videos/short-video-viewer/short-video-viewer-localization.svelte.d.ts +13 -0
- package/dist/short-videos/short-video-viewer/short-video-viewer-localization.svelte.js +10 -0
- package/dist/short-videos/short-video-viewer/types.d.ts +40 -0
- package/dist/short-videos/short-video-viewer/types.js +1 -0
- package/dist/short-videos/short-video-viewer/ui-manager.svelte.d.ts +12 -0
- package/dist/short-videos/short-video-viewer/ui-manager.svelte.js +26 -0
- package/dist/short-videos/short-videos-player/action-button.svelte +38 -0
- package/dist/short-videos/short-videos-player/action-button.svelte.d.ts +10 -0
- package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte +91 -0
- package/dist/short-videos/short-videos-player/cmp.short-videos-player.svelte.d.ts +13 -0
- package/dist/short-videos/short-videos-player/controls.svelte +222 -0
- package/dist/short-videos/short-videos-player/controls.svelte.d.ts +15 -0
- package/dist/short-videos/short-videos-player/index.d.ts +31 -0
- package/dist/short-videos/short-videos-player/index.js +40 -0
- package/dist/short-videos/short-videos-player/short-videos-player-localization.svelte.d.ts +8 -0
- package/dist/short-videos/short-videos-player/short-videos-player-localization.svelte.js +6 -0
- package/dist/short-videos/short-videos-player/ui-manager.svelte.d.ts +16 -0
- package/dist/short-videos/short-videos-player/ui-manager.svelte.js +25 -0
- package/dist/streams/layout/cmp.layout.svelte +34 -0
- package/dist/streams/layout/cmp.layout.svelte.d.ts +9 -0
- package/dist/streams/layout/cmp.slot-content.svelte +32 -0
- package/dist/streams/layout/cmp.slot-content.svelte.d.ts +13 -0
- package/dist/streams/layout/cmp.slot.svelte +26 -0
- package/dist/streams/layout/cmp.slot.svelte.d.ts +9 -0
- package/dist/streams/layout/component.d.ts +6 -0
- package/dist/streams/layout/component.js +1 -0
- package/dist/streams/layout/css-values.d.ts +10 -0
- package/dist/streams/layout/css-values.js +1 -0
- package/dist/streams/layout/element-views/cmp.container-stream-element.svelte +16 -0
- package/dist/streams/layout/element-views/cmp.container-stream-element.svelte.d.ts +11 -0
- package/dist/streams/layout/element-views/cmp.image-ref-stream-element.svelte +38 -0
- package/dist/streams/layout/element-views/cmp.image-ref-stream-element.svelte.d.ts +9 -0
- package/dist/streams/layout/element-views/cmp.images-stream-element.svelte +30 -0
- package/dist/streams/layout/element-views/cmp.images-stream-element.svelte.d.ts +9 -0
- package/dist/streams/layout/element-views/cmp.price-stream-element.svelte +97 -0
- package/dist/streams/layout/element-views/cmp.price-stream-element.svelte.d.ts +11 -0
- package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte +6 -0
- package/dist/streams/layout/element-views/cmp.short-video-stream-element.svelte.d.ts +10 -0
- package/dist/streams/layout/element-views/cmp.spacer-stream-element.svelte +45 -0
- package/dist/streams/layout/element-views/cmp.spacer-stream-element.svelte.d.ts +9 -0
- package/dist/streams/layout/element-views/cmp.stream-element.svelte +68 -0
- package/dist/streams/layout/element-views/cmp.stream-element.svelte.d.ts +17 -0
- package/dist/streams/layout/element-views/cmp.text-ref-stream-element.svelte +23 -0
- package/dist/streams/layout/element-views/cmp.text-ref-stream-element.svelte.d.ts +9 -0
- package/dist/streams/layout/element-views/cmp.text-stream-element.svelte +8 -0
- package/dist/streams/layout/element-views/cmp.text-stream-element.svelte.d.ts +7 -0
- package/dist/streams/layout/element-views/data-by-key-accessor.d.ts +3 -0
- package/dist/streams/layout/element-views/data-by-key-accessor.js +55 -0
- package/dist/streams/layout/element-views/index.d.ts +11 -0
- package/dist/streams/layout/element-views/index.js +9 -0
- package/dist/streams/layout/element-views/price-stream-element-localization.svelte.d.ts +9 -0
- package/dist/streams/layout/element-views/price-stream-element-localization.svelte.js +8 -0
- package/dist/streams/layout/element-views/stream-element-localization.svelte.d.ts +8 -0
- package/dist/streams/layout/element-views/stream-element-localization.svelte.js +6 -0
- package/dist/streams/layout/elements.d.ts +51 -0
- package/dist/streams/layout/elements.js +1 -0
- package/dist/streams/layout/enums.d.ts +45 -0
- package/dist/streams/layout/enums.js +54 -0
- package/dist/streams/layout/index.d.ts +19 -0
- package/dist/streams/layout/index.js +15 -0
- package/dist/streams/layout/layout.d.ts +13 -0
- package/dist/streams/layout/layout.js +1 -0
- package/dist/streams/layout/models/index.d.ts +6 -0
- package/dist/streams/layout/models/index.js +1 -0
- package/dist/streams/layout/models/mapper.d.ts +3 -0
- package/dist/streams/layout/models/mapper.js +62 -0
- package/dist/streams/layout/models/stream-layout-blob-model.d.ts +4 -0
- package/dist/streams/layout/models/stream-layout-blob-model.js +1 -0
- package/dist/streams/layout/models/stream-layout-media-item-model.d.ts +6 -0
- package/dist/streams/layout/models/stream-layout-media-item-model.js +1 -0
- package/dist/streams/layout/models/stream-layout-post-header-model.d.ts +11 -0
- package/dist/streams/layout/models/stream-layout-post-header-model.js +1 -0
- package/dist/streams/layout/models/stream-layout-product-model.d.ts +19 -0
- package/dist/streams/layout/models/stream-layout-product-model.js +1 -0
- package/dist/streams/layout/models/stream-layout-short-video-model.d.ts +31 -0
- package/dist/streams/layout/models/stream-layout-short-video-model.js +1 -0
- package/dist/streams/layout/serializer.d.ts +3 -0
- package/dist/streams/layout/serializer.js +6 -0
- package/dist/streams/layout/slot-data-input.d.ts +14 -0
- package/dist/streams/layout/slot-data-input.js +1 -0
- package/dist/streams/layout/slot-data.d.ts +18 -0
- package/dist/streams/layout/slot-data.js +1 -0
- package/dist/streams/layout/slot.d.ts +16 -0
- package/dist/streams/layout/slot.js +1 -0
- package/dist/streams/layout/styles-transformer.d.ts +13 -0
- package/dist/streams/layout/styles-transformer.js +140 -0
- package/dist/streams/layout/styles.d.ts +43 -0
- package/dist/streams/layout/styles.js +1 -0
- package/dist/streams/layout/type-guards.d.ts +8 -0
- package/dist/streams/layout/type-guards.js +21 -0
- package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte +13 -0
- package/dist/streams/stream-page-viewer/cmp.stream-page-viewer.svelte.d.ts +11 -0
- package/dist/streams/stream-page-viewer/index.d.ts +2 -0
- package/dist/streams/stream-page-viewer/index.js +1 -0
- package/dist/streams/stream-page-viewer/mapper.d.ts +3 -0
- package/dist/streams/stream-page-viewer/mapper.js +22 -0
- package/dist/streams/stream-page-viewer/operations.generated.d.ts +10 -0
- package/dist/streams/stream-page-viewer/operations.generated.js +27 -0
- package/dist/streams/stream-page-viewer/operations.graphql +8 -0
- package/dist/streams/stream-page-viewer/stream-page-viewer-localization.svelte.d.ts +13 -0
- package/dist/streams/stream-page-viewer/stream-page-viewer-localization.svelte.js +10 -0
- package/dist/streams/stream-page-viewer/types.d.ts +18 -0
- package/dist/streams/stream-page-viewer/types.js +1 -0
- package/dist/streams/stream-player/action-button.svelte +38 -0
- package/dist/streams/stream-player/action-button.svelte.d.ts +10 -0
- package/dist/streams/stream-player/cmp.stream-player.svelte +164 -0
- package/dist/streams/stream-player/cmp.stream-player.svelte.d.ts +19 -0
- package/dist/streams/stream-player/controls.svelte +236 -0
- package/dist/streams/stream-player/controls.svelte.d.ts +15 -0
- package/dist/streams/stream-player/index.d.ts +37 -0
- package/dist/streams/stream-player/index.js +50 -0
- package/dist/streams/stream-player/mapper.d.ts +3 -0
- package/dist/streams/stream-player/mapper.js +15 -0
- package/dist/streams/stream-player/operations.generated.d.ts +65 -0
- package/dist/streams/stream-player/operations.generated.js +196 -0
- package/dist/streams/stream-player/operations.graphql +35 -0
- package/dist/streams/stream-player/stream-overview.svelte +239 -0
- package/dist/streams/stream-player/stream-overview.svelte.d.ts +17 -0
- package/dist/streams/stream-player/stream-player-buffer.svelte.d.ts +25 -0
- package/dist/streams/stream-player/stream-player-buffer.svelte.js +84 -0
- package/dist/streams/stream-player/stream-player-localization.svelte.d.ts +12 -0
- package/dist/streams/stream-player/stream-player-localization.svelte.js +10 -0
- package/dist/streams/stream-player/types.d.ts +12 -0
- package/dist/streams/stream-player/types.js +1 -0
- package/dist/streams/stream-player/ui-manager.svelte.d.ts +17 -0
- package/dist/streams/stream-player/ui-manager.svelte.js +26 -0
- package/dist/ui/button/cmp.button.svelte +10 -0
- package/dist/ui/button/cmp.button.svelte.d.ts +16 -0
- package/dist/ui/button/index.d.ts +2 -0
- package/dist/ui/button/index.js +2 -0
- package/dist/ui/button/resources/button-base.svelte +84 -0
- package/dist/ui/button/resources/button-base.svelte.d.ts +13 -0
- package/dist/ui/button/resources/button-theme.svelte +204 -0
- package/dist/ui/button/resources/button-theme.svelte.d.ts +10 -0
- package/dist/ui/button/resources/button-types.d.ts +21 -0
- package/dist/ui/button/resources/button-types.js +23 -0
- package/dist/ui/dynamic-component/cmp.dynamic-component.svelte +5 -0
- package/dist/ui/dynamic-component/cmp.dynamic-component.svelte.d.ts +7 -0
- package/dist/ui/dynamic-component/index.d.ts +2 -0
- package/dist/ui/dynamic-component/index.js +2 -0
- package/dist/ui/dynamic-component/types.svelte.d.ts +11 -0
- package/dist/ui/dynamic-component/types.svelte.js +13 -0
- package/dist/ui/icon/cmp.icon.svelte +113 -0
- package/dist/ui/icon/cmp.icon.svelte.d.ts +8 -0
- package/dist/ui/icon/index.d.ts +2 -0
- package/dist/ui/icon/index.js +2 -0
- package/dist/ui/icon/types.d.ts +9 -0
- package/dist/ui/icon/types.js +10 -0
- package/dist/ui/image/cmp.image-round.svelte +41 -0
- package/dist/ui/image/cmp.image-round.svelte.d.ts +11 -0
- package/dist/ui/image/cmp.image-rounded.svelte +71 -0
- package/dist/ui/image/cmp.image-rounded.svelte.d.ts +11 -0
- package/dist/ui/image/cmp.image-stub.svelte +34 -0
- package/dist/ui/image/cmp.image-stub.svelte.d.ts +18 -0
- package/dist/ui/image/cmp.image.svelte +82 -0
- package/dist/ui/image/cmp.image.svelte.d.ts +13 -0
- package/dist/ui/image/image-state.d.ts +6 -0
- package/dist/ui/image/image-state.js +17 -0
- package/dist/ui/image/index.d.ts +4 -0
- package/dist/ui/image/index.js +4 -0
- package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte +84 -0
- package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte.d.ts +11 -0
- package/dist/ui/infinite-scrolling/index.d.ts +1 -0
- package/dist/ui/infinite-scrolling/index.js +1 -0
- package/dist/ui/line-clamp/cmp.line-clamp.svelte +89 -0
- package/dist/ui/line-clamp/cmp.line-clamp.svelte.d.ts +12 -0
- package/dist/ui/line-clamp/index.d.ts +2 -0
- package/dist/ui/line-clamp/index.js +2 -0
- package/dist/ui/line-clamp/line-clamp-localization.svelte.d.ts +9 -0
- package/dist/ui/line-clamp/line-clamp-localization.svelte.js +15 -0
- package/dist/ui/line-clamp/line-clamp-types.d.ts +3 -0
- package/dist/ui/line-clamp/line-clamp-types.js +1 -0
- package/dist/ui/line-clamp/line-clamp-utils.d.ts +8 -0
- package/dist/ui/line-clamp/line-clamp-utils.js +33 -0
- package/dist/ui/loading/cmp.loading.svelte +97 -0
- package/dist/ui/loading/cmp.loading.svelte.d.ts +9 -0
- package/dist/ui/loading/index.d.ts +1 -0
- package/dist/ui/loading/index.js +1 -0
- package/dist/ui/media-item-view/cmp.media-item-view.svelte +91 -0
- package/dist/ui/media-item-view/cmp.media-item-view.svelte.d.ts +13 -0
- package/dist/ui/media-item-view/index.d.ts +1 -0
- package/dist/ui/media-item-view/index.js +1 -0
- package/dist/ui/media-items-gallery/cmp.media-items-gallery.svelte +278 -0
- package/dist/ui/media-items-gallery/cmp.media-items-gallery.svelte.d.ts +13 -0
- package/dist/ui/media-items-gallery/index.d.ts +1 -0
- package/dist/ui/media-items-gallery/index.js +1 -0
- package/dist/ui/media-items-gallery/types.d.ts +12 -0
- package/dist/ui/media-items-gallery/types.js +35 -0
- package/dist/ui/media-playback/index.d.ts +2 -0
- package/dist/ui/media-playback/index.js +2 -0
- package/dist/ui/media-playback/playback-manager.svelte.d.ts +25 -0
- package/dist/ui/media-playback/playback-manager.svelte.js +62 -0
- package/dist/ui/media-playback/volume-manager.svelte.d.ts +10 -0
- package/dist/ui/media-playback/volume-manager.svelte.js +27 -0
- package/dist/ui/player/cmp.player-slider.svelte +161 -0
- package/dist/ui/player/cmp.player-slider.svelte.d.ts +33 -0
- package/dist/ui/player/index.d.ts +4 -0
- package/dist/ui/player/index.js +3 -0
- package/dist/ui/player/player-buffer.svelte.d.ts +28 -0
- package/dist/ui/player/player-buffer.svelte.js +64 -0
- package/dist/ui/player/prevent-slider-scroll.d.ts +5 -0
- package/dist/ui/player/prevent-slider-scroll.js +11 -0
- package/dist/ui/player/types.d.ts +14 -0
- package/dist/ui/player/types.js +1 -0
- package/dist/ui/progress/cmp.progress.svelte +37 -0
- package/dist/ui/progress/cmp.progress.svelte.d.ts +6 -0
- package/dist/ui/progress/index.d.ts +1 -0
- package/dist/ui/progress/index.js +1 -0
- package/dist/ui/proportional-container/cmp.proportional-container.svelte +39 -0
- package/dist/ui/proportional-container/cmp.proportional-container.svelte.d.ts +8 -0
- package/dist/ui/proportional-container/index.d.ts +1 -0
- package/dist/ui/proportional-container/index.js +1 -0
- package/dist/ui/seek-bar/cmp.seek-bar.svelte +63 -0
- package/dist/ui/seek-bar/cmp.seek-bar.svelte.d.ts +12 -0
- package/dist/ui/seek-bar/index.d.ts +1 -0
- package/dist/ui/seek-bar/index.js +1 -0
- package/dist/ui/shadow-dom/_normalize.scss +350 -0
- package/dist/ui/shadow-dom/_reset.scss +189 -0
- package/dist/ui/shadow-dom/index.d.ts +1 -0
- package/dist/ui/shadow-dom/index.js +1 -0
- package/dist/ui/shadow-dom/shadow-host.d.ts +11 -0
- package/dist/ui/shadow-dom/shadow-host.js +45 -0
- package/dist/ui/spotlight-layout/cmp.spotlight-layout.svelte +120 -0
- package/dist/ui/spotlight-layout/cmp.spotlight-layout.svelte.d.ts +18 -0
- package/dist/ui/spotlight-layout/index.d.ts +1 -0
- package/dist/ui/spotlight-layout/index.js +1 -0
- package/dist/ui/time-ago/cmp.time-ago.svelte +69 -0
- package/dist/ui/time-ago/cmp.time-ago.svelte.d.ts +9 -0
- package/dist/ui/time-ago/index.d.ts +2 -0
- package/dist/ui/time-ago/index.js +1 -0
- package/dist/ui/time-ago/time-ago-localization.svelte.d.ts +21 -0
- package/dist/ui/time-ago/time-ago-localization.svelte.js +39 -0
- package/dist/ui/video/cmp.video.svelte +377 -0
- package/dist/ui/video/cmp.video.svelte.d.ts +24 -0
- package/dist/ui/video/index.d.ts +1 -0
- package/dist/ui/video/index.js +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
export class ShortVideoPlayerUiManager {
|
|
2
|
+
detailsCollapsed = $state(true);
|
|
3
|
+
globalCssVariables = $derived.by(() => {
|
|
4
|
+
const values = [
|
|
5
|
+
`--short-video-player--action-button--size: ${this.actionButtonSize}px`,
|
|
6
|
+
`--short-video-player--navigation-button--size: ${this.navigationButtonSize}px`,
|
|
7
|
+
`--short-video-player--controls--offset-horizontal: ${this.controlsOffsetHorizontal}px`,
|
|
8
|
+
`--short-video-player--controls--offset-vertical: ${this.controlsOffsetVertical}px`,
|
|
9
|
+
`--short-video-player--sidebar--available-space: ${(this.viewTotalWidth - this.mainViewColumnWidth) / 2}px`
|
|
10
|
+
];
|
|
11
|
+
return values.join(';');
|
|
12
|
+
});
|
|
13
|
+
isMobileView = $derived.by(() => this.viewTotalWidth <= 576);
|
|
14
|
+
showShortVideoOverlay = $derived.by(() => (this.viewTotalWidth - this.mainViewColumnWidth) / 2 <= 70);
|
|
15
|
+
actionButtonSize = 30;
|
|
16
|
+
navigationButtonSize = 40;
|
|
17
|
+
controlsOffsetHorizontal = 15;
|
|
18
|
+
controlsOffsetVertical = 10;
|
|
19
|
+
viewTotalWidth = $state(0);
|
|
20
|
+
mainViewColumnWidth = $state(0);
|
|
21
|
+
updateDimensions = (dimensions) => {
|
|
22
|
+
this.viewTotalWidth = dimensions.viewTotalWidth;
|
|
23
|
+
this.mainViewColumnWidth = dimensions.mainViewColumnWidth;
|
|
24
|
+
};
|
|
25
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<script lang="ts">import { ProportionalContainer } from '../../ui/proportional-container';
|
|
2
|
+
import { generateStreamLayoutStyles } from './styles-transformer';
|
|
3
|
+
let { model, children } = $props();
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<ProportionalContainer ratio={9 / 16}>
|
|
7
|
+
<div class="stream-page-layout" style={generateStreamLayoutStyles(model.styles)}>
|
|
8
|
+
{@render children()}
|
|
9
|
+
</div>
|
|
10
|
+
</ProportionalContainer>
|
|
11
|
+
|
|
12
|
+
<style>@keyframes fadeIn {
|
|
13
|
+
0% {
|
|
14
|
+
opacity: 1;
|
|
15
|
+
}
|
|
16
|
+
50% {
|
|
17
|
+
opacity: 0.4;
|
|
18
|
+
}
|
|
19
|
+
100% {
|
|
20
|
+
opacity: 1;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
.stream-page-layout {
|
|
24
|
+
width: 100%;
|
|
25
|
+
min-width: 100%;
|
|
26
|
+
max-width: 100%;
|
|
27
|
+
height: 100%;
|
|
28
|
+
min-height: 100%;
|
|
29
|
+
max-height: 100%;
|
|
30
|
+
position: relative;
|
|
31
|
+
border-radius: 0.25rem;
|
|
32
|
+
overflow: hidden;
|
|
33
|
+
container-type: inline-size;
|
|
34
|
+
}</style>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { StreamLayout } from './layout';
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
type Props = {
|
|
4
|
+
model: StreamLayout;
|
|
5
|
+
children: Snippet;
|
|
6
|
+
};
|
|
7
|
+
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type Cmp = ReturnType<typeof Cmp>;
|
|
9
|
+
export default Cmp;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script lang="ts">import { Utils } from '../../core/utils';
|
|
2
|
+
import { StreamElement } from './element-views';
|
|
3
|
+
import { StreamComponentDataType } from './enums';
|
|
4
|
+
let { model, localization, on } = $props();
|
|
5
|
+
const component = $derived.by(() => {
|
|
6
|
+
return model.components.find((c) => { var _a; return c.dataType === ((_a = model.data) === null || _a === void 0 ? void 0 : _a.type); });
|
|
7
|
+
});
|
|
8
|
+
const dataIsFilled = $derived.by(() => {
|
|
9
|
+
if (!model.data) {
|
|
10
|
+
return false;
|
|
11
|
+
}
|
|
12
|
+
switch (model.data.type) {
|
|
13
|
+
case StreamComponentDataType.ShortVideo: {
|
|
14
|
+
return !!model.data.shortVideo;
|
|
15
|
+
}
|
|
16
|
+
case StreamComponentDataType.Product: {
|
|
17
|
+
return !!model.data.product;
|
|
18
|
+
}
|
|
19
|
+
case StreamComponentDataType.Images: {
|
|
20
|
+
return !!model.data.items.length;
|
|
21
|
+
}
|
|
22
|
+
default:
|
|
23
|
+
Utils.assertUnreachable(model.data);
|
|
24
|
+
}
|
|
25
|
+
});
|
|
26
|
+
</script>
|
|
27
|
+
|
|
28
|
+
{#if component && model.data && dataIsFilled}
|
|
29
|
+
{#each component.elements as element (element)}
|
|
30
|
+
<StreamElement model={element} data={model.data} localization={localization} on={on} />
|
|
31
|
+
{/each}
|
|
32
|
+
{/if}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { type IStreamElementLocalization } from './element-views';
|
|
2
|
+
import type { StreamSlot } from './slot';
|
|
3
|
+
type Props = {
|
|
4
|
+
model: StreamSlot;
|
|
5
|
+
localization?: IStreamElementLocalization;
|
|
6
|
+
on?: {
|
|
7
|
+
productClick: (productId: string) => void;
|
|
8
|
+
progress?: (videoId: string, progress: number) => void;
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
12
|
+
type Cmp = ReturnType<typeof Cmp>;
|
|
13
|
+
export default Cmp;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script lang="ts">let { model, children } = $props();
|
|
2
|
+
const computeStyles = (settings) => {
|
|
3
|
+
const values = [`width: ${settings.width}%`, `height: ${settings.height}%`, `top: ${settings.top}%`, `left: ${settings.left}%`];
|
|
4
|
+
return values.join(';');
|
|
5
|
+
};
|
|
6
|
+
export {};
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<div class="stream-layout-slot" style={computeStyles(model)}>
|
|
10
|
+
{@render children()}
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<style>@keyframes fadeIn {
|
|
14
|
+
0% {
|
|
15
|
+
opacity: 1;
|
|
16
|
+
}
|
|
17
|
+
50% {
|
|
18
|
+
opacity: 0.4;
|
|
19
|
+
}
|
|
20
|
+
100% {
|
|
21
|
+
opacity: 1;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
.stream-layout-slot {
|
|
25
|
+
position: absolute;
|
|
26
|
+
}</style>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { StreamSlot } from './slot';
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
type Props = {
|
|
4
|
+
model: StreamSlot;
|
|
5
|
+
children: Snippet;
|
|
6
|
+
};
|
|
7
|
+
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type Cmp = ReturnType<typeof Cmp>;
|
|
9
|
+
export default Cmp;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import { StreamComponentDataType } from './enums';
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { StreamCssValueType } from './enums';
|
|
2
|
+
export type StreamCssValue = DeviceDependentStreamCssValue | PercentStreamCssValue;
|
|
3
|
+
export type DeviceDependentStreamCssValue = {
|
|
4
|
+
type: StreamCssValueType.DDU;
|
|
5
|
+
value: number;
|
|
6
|
+
};
|
|
7
|
+
export type PercentStreamCssValue = {
|
|
8
|
+
type: StreamCssValueType.Pct;
|
|
9
|
+
value: number;
|
|
10
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import { StreamCssValueType } from './enums';
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<script lang="ts">import {} from './stream-element-localization.svelte';
|
|
2
|
+
import { StreamElementStyleDirection } from '../enums';
|
|
3
|
+
import { generateContainerStyles } from '../styles-transformer';
|
|
4
|
+
import { default as StreamElement } from './cmp.stream-element.svelte';
|
|
5
|
+
let { model, data, localization } = $props();
|
|
6
|
+
</script>
|
|
7
|
+
|
|
8
|
+
<div class="container-stream-element" style={generateContainerStyles(model.styles)}>
|
|
9
|
+
{#each model.elements as element (element)}
|
|
10
|
+
<StreamElement
|
|
11
|
+
model={element}
|
|
12
|
+
data={data}
|
|
13
|
+
constainerDirection={model.styles?.direction ?? StreamElementStyleDirection.Vertical}
|
|
14
|
+
localization={localization} />
|
|
15
|
+
{/each}
|
|
16
|
+
</div>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type IStreamElementLocalization } from './stream-element-localization.svelte';
|
|
2
|
+
import type { ContainerStreamElementModel } from '../elements';
|
|
3
|
+
import type { StreamSlotData } from '../slot-data';
|
|
4
|
+
type Props = {
|
|
5
|
+
model: ContainerStreamElementModel;
|
|
6
|
+
data: StreamSlotData;
|
|
7
|
+
localization?: IStreamElementLocalization;
|
|
8
|
+
};
|
|
9
|
+
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
10
|
+
type Cmp = ReturnType<typeof Cmp>;
|
|
11
|
+
export default Cmp;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<script lang="ts">import { getStringValueByKey } from './data-by-key-accessor';
|
|
2
|
+
import { generateImageStyles } from '../styles-transformer';
|
|
3
|
+
let { model, data } = $props();
|
|
4
|
+
const value = $derived(getStringValueByKey(data, model.key));
|
|
5
|
+
</script>
|
|
6
|
+
|
|
7
|
+
<div class="image-ref-stream-element">
|
|
8
|
+
<img class="image-ref-stream-element-image" src={value} alt={model.key} style={generateImageStyles(model.styles)} />
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<style>@keyframes fadeIn {
|
|
12
|
+
0% {
|
|
13
|
+
opacity: 1;
|
|
14
|
+
}
|
|
15
|
+
50% {
|
|
16
|
+
opacity: 0.4;
|
|
17
|
+
}
|
|
18
|
+
100% {
|
|
19
|
+
opacity: 1;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
.image-ref-stream-element {
|
|
23
|
+
width: 100%;
|
|
24
|
+
min-width: 100%;
|
|
25
|
+
max-width: 100%;
|
|
26
|
+
height: 100%;
|
|
27
|
+
min-height: 100%;
|
|
28
|
+
max-height: 100%;
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.image-ref-stream-element-image {
|
|
33
|
+
object-fit: cover;
|
|
34
|
+
min-width: 100%;
|
|
35
|
+
min-height: 100%;
|
|
36
|
+
max-width: 100%;
|
|
37
|
+
max-height: 100%;
|
|
38
|
+
}</style>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { ImageRefStreamElementModel } from '../elements';
|
|
2
|
+
import type { StreamSlotData } from '../slot-data';
|
|
3
|
+
type Props = {
|
|
4
|
+
model: ImageRefStreamElementModel;
|
|
5
|
+
data: StreamSlotData;
|
|
6
|
+
};
|
|
7
|
+
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type Cmp = ReturnType<typeof Cmp>;
|
|
9
|
+
export default Cmp;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<script lang="ts">import { Image } from '../../../ui/image';
|
|
2
|
+
import { ImagesImagesElementMode } from '../enums';
|
|
3
|
+
let { model, data } = $props();
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<div class="images-stream-element">
|
|
7
|
+
{#if data.length > 0}
|
|
8
|
+
{#if model.mode === ImagesImagesElementMode.Single || data.length === 1}
|
|
9
|
+
<Image src={data[0].url} />
|
|
10
|
+
{:else}
|
|
11
|
+
need implement multiple images
|
|
12
|
+
{/if}
|
|
13
|
+
{/if}
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<style>@keyframes fadeIn {
|
|
17
|
+
0% {
|
|
18
|
+
opacity: 1;
|
|
19
|
+
}
|
|
20
|
+
50% {
|
|
21
|
+
opacity: 0.4;
|
|
22
|
+
}
|
|
23
|
+
100% {
|
|
24
|
+
opacity: 1;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
.images-stream-element {
|
|
28
|
+
width: 100%;
|
|
29
|
+
height: 100%;
|
|
30
|
+
}</style>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { ImagesStreamElementModel } from '../elements';
|
|
2
|
+
import type { StreamLayoutBlobModel } from '../models';
|
|
3
|
+
type Props = {
|
|
4
|
+
model: ImagesStreamElementModel;
|
|
5
|
+
data: StreamLayoutBlobModel[];
|
|
6
|
+
};
|
|
7
|
+
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type Cmp = ReturnType<typeof Cmp>;
|
|
9
|
+
export default Cmp;
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
<script lang="ts">var _a;
|
|
2
|
+
import { toPriceRepresentation } from '../../../products/price-helper';
|
|
3
|
+
import { PriceStreamElementLocalization } from './price-stream-element-localization.svelte.js';
|
|
4
|
+
import { mapFlexJustifyContent, mapFontFamily, mapFontWeight, transformColorValue, transformFontSizeValue, transformNumericValue } from '../styles-transformer';
|
|
5
|
+
let { model, data, localization: localizationInit } = $props();
|
|
6
|
+
const localization = $derived(new PriceStreamElementLocalization(localizationInit));
|
|
7
|
+
const lineHeight = 1.2;
|
|
8
|
+
const height = $derived(((_a = model.styles) === null || _a === void 0 ? void 0 : _a.height) || 16);
|
|
9
|
+
const currentPrice = $derived.by(() => {
|
|
10
|
+
if (data.price.salePrice) {
|
|
11
|
+
return toPriceRepresentation(data.price.salePrice, data.price.currency, model.includeCurrency || false);
|
|
12
|
+
}
|
|
13
|
+
return toPriceRepresentation(data.price.price, data.price.currency, model.includeCurrency || false);
|
|
14
|
+
});
|
|
15
|
+
const saveValue = $derived.by(() => {
|
|
16
|
+
if (data.price.salePrice) {
|
|
17
|
+
return toPriceRepresentation(data.price.price - data.price.salePrice, data.price.currency, model.includeCurrency || false);
|
|
18
|
+
}
|
|
19
|
+
return 0;
|
|
20
|
+
});
|
|
21
|
+
const containerStyles = $derived.by(() => {
|
|
22
|
+
var _a, _b;
|
|
23
|
+
const values = [
|
|
24
|
+
`font-family: ${mapFontFamily((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontFamily)};`,
|
|
25
|
+
`justify-content: ${mapFlexJustifyContent((_b = model.styles) === null || _b === void 0 ? void 0 : _b.horizontalAlign)};`,
|
|
26
|
+
`align-items: center;`,
|
|
27
|
+
`height: ${transformNumericValue(height)};`
|
|
28
|
+
];
|
|
29
|
+
return values.join('');
|
|
30
|
+
});
|
|
31
|
+
const priceCustomStyles = $derived.by(() => {
|
|
32
|
+
var _a, _b, _c;
|
|
33
|
+
const values = [
|
|
34
|
+
`font-size: ${transformFontSizeValue(height / lineHeight)};`,
|
|
35
|
+
`line-height: ${lineHeight};`,
|
|
36
|
+
`font-weight: ${mapFontWeight((_a = model.styles) === null || _a === void 0 ? void 0 : _a.fontWeight)};`,
|
|
37
|
+
`color: ${transformColorValue(data.price.salePrice ? (_b = model.styles) === null || _b === void 0 ? void 0 : _b.salePriceColor : (_c = model.styles) === null || _c === void 0 ? void 0 : _c.regularPriceColor)};`
|
|
38
|
+
];
|
|
39
|
+
return values.join('');
|
|
40
|
+
});
|
|
41
|
+
const saveValueCustomStyles = $derived.by(() => {
|
|
42
|
+
var _a, _b;
|
|
43
|
+
const values = [
|
|
44
|
+
`margin-top: ${transformNumericValue((height - height / lineHeight) / 2)};`,
|
|
45
|
+
`font-size: ${transformFontSizeValue(height / 4)};`,
|
|
46
|
+
`font-weight: 500;`,
|
|
47
|
+
`padding: ${transformNumericValue(height / 8)} ${transformNumericValue(height / 4)};`,
|
|
48
|
+
`border-radius: ${transformNumericValue(height / 8)};`,
|
|
49
|
+
`background-color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.saveValueBackgroundColor)};`,
|
|
50
|
+
`color: ${transformColorValue((_b = model.styles) === null || _b === void 0 ? void 0 : _b.saveValueColor)};`
|
|
51
|
+
];
|
|
52
|
+
return values.join('');
|
|
53
|
+
});
|
|
54
|
+
const beforeValueCustomStyles = $derived.by(() => {
|
|
55
|
+
var _a;
|
|
56
|
+
const values = [`font-size: ${transformFontSizeValue(height / 5)};`, `font-weight: 500;`, `color: ${transformColorValue((_a = model.styles) === null || _a === void 0 ? void 0 : _a.beforeValueColor)};`];
|
|
57
|
+
return values.join('');
|
|
58
|
+
});
|
|
59
|
+
</script>
|
|
60
|
+
|
|
61
|
+
<div class="price-stream-element" style={containerStyles}>
|
|
62
|
+
<div class="price-stream-element__price" style={priceCustomStyles}>
|
|
63
|
+
{currentPrice}
|
|
64
|
+
</div>
|
|
65
|
+
{#if data.price.salePrice && !model.excludeBeforePrice}
|
|
66
|
+
<div class="price-stream-element__sale-price">
|
|
67
|
+
<div class="price-stream-element__save" style={saveValueCustomStyles}>
|
|
68
|
+
{localization.saveValue(saveValue)}
|
|
69
|
+
</div>
|
|
70
|
+
<div class="price-stream-element__before-price" style={beforeValueCustomStyles}>
|
|
71
|
+
{localization.beforeValue(toPriceRepresentation(data.price.price, data.price.currency, model.includeCurrency || false))}
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
{/if}
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<style>@keyframes fadeIn {
|
|
78
|
+
0% {
|
|
79
|
+
opacity: 1;
|
|
80
|
+
}
|
|
81
|
+
50% {
|
|
82
|
+
opacity: 0.4;
|
|
83
|
+
}
|
|
84
|
+
100% {
|
|
85
|
+
opacity: 1;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
.price-stream-element {
|
|
89
|
+
display: flex;
|
|
90
|
+
gap: 4cqi;
|
|
91
|
+
}
|
|
92
|
+
.price-stream-element__sale-price {
|
|
93
|
+
display: flex;
|
|
94
|
+
height: 100%;
|
|
95
|
+
flex-direction: column;
|
|
96
|
+
justify-content: space-between;
|
|
97
|
+
}</style>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type IPriceStreamElementLocalization } from './price-stream-element-localization.svelte.js';
|
|
2
|
+
import type { PriceStreamElementModel } from '../elements';
|
|
3
|
+
import type { StreamLayoutProductModel } from '../models';
|
|
4
|
+
type Props = {
|
|
5
|
+
model: PriceStreamElementModel;
|
|
6
|
+
data: StreamLayoutProductModel;
|
|
7
|
+
localization?: IPriceStreamElementLocalization;
|
|
8
|
+
};
|
|
9
|
+
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
10
|
+
type Cmp = ReturnType<typeof Cmp>;
|
|
11
|
+
export default Cmp;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
<script lang="ts">import { ShortVideoViewer } from '../../../short-videos/short-video-viewer';
|
|
2
|
+
import { mapToShortVideoViewerModel } from '../models';
|
|
3
|
+
let { data, on } = $props();
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<ShortVideoViewer model={mapToShortVideoViewerModel(data)} autoplay={false} on={on} />
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { type StreamLayoutShortVideoModel } from '../models';
|
|
2
|
+
type Props = {
|
|
3
|
+
data: StreamLayoutShortVideoModel;
|
|
4
|
+
on?: {
|
|
5
|
+
progress?: (progress: number) => void;
|
|
6
|
+
};
|
|
7
|
+
};
|
|
8
|
+
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
9
|
+
type Cmp = ReturnType<typeof Cmp>;
|
|
10
|
+
export default Cmp;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
<script lang="ts">import { Utils } from '../../../core/utils';
|
|
2
|
+
import { StreamElementStyleDirection } from '../enums';
|
|
3
|
+
import { transformNumericValue } from '../styles-transformer';
|
|
4
|
+
let { model, parentContainerDirection } = $props();
|
|
5
|
+
const styles = $derived.by(() => {
|
|
6
|
+
const values = [];
|
|
7
|
+
if (!model.value) {
|
|
8
|
+
values.push(`flex-grow: 1`);
|
|
9
|
+
}
|
|
10
|
+
else {
|
|
11
|
+
switch (parentContainerDirection) {
|
|
12
|
+
case StreamElementStyleDirection.Vertical: {
|
|
13
|
+
values.push(`height: ${transformNumericValue(model.value)};`);
|
|
14
|
+
values.push(`min-height: ${transformNumericValue(model.value)};`);
|
|
15
|
+
break;
|
|
16
|
+
}
|
|
17
|
+
case StreamElementStyleDirection.Horizontal: {
|
|
18
|
+
values.push(`width: ${transformNumericValue(model.value)};`);
|
|
19
|
+
values.push(`min-width: ${transformNumericValue(model.value)};`);
|
|
20
|
+
break;
|
|
21
|
+
}
|
|
22
|
+
default:
|
|
23
|
+
Utils.assertUnreachable(parentContainerDirection);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
return values.join('');
|
|
27
|
+
});
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<div class="spacer-stream-element" style={styles}> </div>
|
|
31
|
+
|
|
32
|
+
<style>@keyframes fadeIn {
|
|
33
|
+
0% {
|
|
34
|
+
opacity: 1;
|
|
35
|
+
}
|
|
36
|
+
50% {
|
|
37
|
+
opacity: 0.4;
|
|
38
|
+
}
|
|
39
|
+
100% {
|
|
40
|
+
opacity: 1;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
.spacer-stream-element {
|
|
44
|
+
line-height: 0;
|
|
45
|
+
}</style>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { SpacerStreamElementModel } from '../elements';
|
|
2
|
+
import { StreamElementStyleDirection } from '../enums';
|
|
3
|
+
type Props = {
|
|
4
|
+
model: SpacerStreamElementModel;
|
|
5
|
+
parentContainerDirection: StreamElementStyleDirection;
|
|
6
|
+
};
|
|
7
|
+
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type Cmp = ReturnType<typeof Cmp>;
|
|
9
|
+
export default Cmp;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
<script lang="ts">import { ContainerStreamElement, ImageRefStreamElement, ImagesStreamElement, PriceStreamElement, ShortVideoStreamElement, SpacerStreamElement, TextRefStreamElement, TextStreamElement } from '.';
|
|
2
|
+
import { StreamElementLocalization } from './stream-element-localization.svelte';
|
|
3
|
+
import { StreamComponentDataType, StreamElementStyleDirection, StreamElementType } from '../enums';
|
|
4
|
+
let { model, data, constainerDirection = StreamElementStyleDirection.Vertical, localization: localizatoinInit, on } = $props();
|
|
5
|
+
const localization = $derived(new StreamElementLocalization(localizatoinInit));
|
|
6
|
+
const shortVideoModel = $derived.by(() => {
|
|
7
|
+
if (!data) {
|
|
8
|
+
return null;
|
|
9
|
+
}
|
|
10
|
+
switch (data.type) {
|
|
11
|
+
case StreamComponentDataType.ShortVideo: {
|
|
12
|
+
return data.shortVideo;
|
|
13
|
+
}
|
|
14
|
+
default:
|
|
15
|
+
return null;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
const imagesModel = $derived.by(() => {
|
|
19
|
+
if (!data) {
|
|
20
|
+
return null;
|
|
21
|
+
}
|
|
22
|
+
switch (data.type) {
|
|
23
|
+
case StreamComponentDataType.Images: {
|
|
24
|
+
return data.items;
|
|
25
|
+
}
|
|
26
|
+
default:
|
|
27
|
+
return null;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
const productModel = $derived.by(() => {
|
|
31
|
+
if (!data) {
|
|
32
|
+
return null;
|
|
33
|
+
}
|
|
34
|
+
switch (data.type) {
|
|
35
|
+
case StreamComponentDataType.Product: {
|
|
36
|
+
return data.product;
|
|
37
|
+
}
|
|
38
|
+
default:
|
|
39
|
+
return null;
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
{#if model.type === StreamElementType.Container}
|
|
45
|
+
<ContainerStreamElement model={model} data={data} localization={localizatoinInit} />
|
|
46
|
+
{:else if model.type === StreamElementType.Spacer}
|
|
47
|
+
<SpacerStreamElement model={model} parentContainerDirection={constainerDirection} />
|
|
48
|
+
{:else if model.type === StreamElementType.ImageRef}
|
|
49
|
+
<ImageRefStreamElement model={model} data={data} />
|
|
50
|
+
{:else if model.type === StreamElementType.Images && imagesModel?.length}
|
|
51
|
+
<ImagesStreamElement model={model} data={imagesModel} />
|
|
52
|
+
{:else if model.type === StreamElementType.Price && productModel}
|
|
53
|
+
<PriceStreamElement model={model} data={productModel} localization={localization.priceElementLocalization} />
|
|
54
|
+
{:else if model.type === StreamElementType.ShortVideo && shortVideoModel}
|
|
55
|
+
<ShortVideoStreamElement
|
|
56
|
+
data={shortVideoModel}
|
|
57
|
+
on={on
|
|
58
|
+
? {
|
|
59
|
+
progress: (progress: number) => {
|
|
60
|
+
on.progress?.(shortVideoModel.id, progress);
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
: undefined} />
|
|
64
|
+
{:else if model.type === StreamElementType.Text}
|
|
65
|
+
<TextStreamElement model={model} />
|
|
66
|
+
{:else if model.type === StreamElementType.TextRef}
|
|
67
|
+
<TextRefStreamElement model={model} data={data} />
|
|
68
|
+
{/if}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { type IStreamElementLocalization } from './stream-element-localization.svelte';
|
|
2
|
+
import type { StreamElementModel } from '../elements';
|
|
3
|
+
import { StreamElementStyleDirection } from '../enums';
|
|
4
|
+
import type { StreamSlotData } from '../slot-data';
|
|
5
|
+
type Props = {
|
|
6
|
+
model: StreamElementModel;
|
|
7
|
+
data: StreamSlotData;
|
|
8
|
+
constainerDirection?: StreamElementStyleDirection;
|
|
9
|
+
localization?: IStreamElementLocalization;
|
|
10
|
+
on?: {
|
|
11
|
+
productClick: (productId: string) => void;
|
|
12
|
+
progress?: (videoId: string, progress: number) => void;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
16
|
+
type Cmp = ReturnType<typeof Cmp>;
|
|
17
|
+
export default Cmp;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script lang="ts">import { LineClamp } from '../../../ui/line-clamp';
|
|
2
|
+
import { getStringValueByKey } from './data-by-key-accessor';
|
|
3
|
+
import { generateTextStyles } from '../styles-transformer';
|
|
4
|
+
let { model, data } = $props();
|
|
5
|
+
const value = $derived.by(() => {
|
|
6
|
+
const values = [];
|
|
7
|
+
const value = getStringValueByKey(data, model.key);
|
|
8
|
+
if (model.valueBefore) {
|
|
9
|
+
values.push(model.valueBefore);
|
|
10
|
+
}
|
|
11
|
+
if (value) {
|
|
12
|
+
values.push(value);
|
|
13
|
+
}
|
|
14
|
+
if (model.valueAfter) {
|
|
15
|
+
values.push(model.valueAfter);
|
|
16
|
+
}
|
|
17
|
+
return values.join(' ');
|
|
18
|
+
});
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<div class="text-ref-stream-element" style={generateTextStyles(model.styles)}>
|
|
22
|
+
<LineClamp value={value} maxLines={model.styles?.maxLines || 'auto'} />
|
|
23
|
+
</div>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { TextRefStreamElementModel } from '../elements';
|
|
2
|
+
import type { StreamSlotData } from '../slot-data';
|
|
3
|
+
type Props = {
|
|
4
|
+
model: TextRefStreamElementModel;
|
|
5
|
+
data: StreamSlotData;
|
|
6
|
+
};
|
|
7
|
+
declare const Cmp: import("svelte").Component<Props, {}, "">;
|
|
8
|
+
type Cmp = ReturnType<typeof Cmp>;
|
|
9
|
+
export default Cmp;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<script lang="ts">import { LineClamp } from '../../../ui/line-clamp';
|
|
2
|
+
import { generateTextStyles } from '../styles-transformer';
|
|
3
|
+
let { model } = $props();
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<div class="text-stream-element" style={generateTextStyles(model.styles)}>
|
|
7
|
+
<LineClamp value={model.value} maxLines={model.styles?.maxLines || 'auto'} />
|
|
8
|
+
</div>
|