+ {navArrows && (
+
+ )}
+
+
+
+
+
+ )
+}
+
+function ProductHeader({ product }: { product: TagExtended }) {
+ if (!product || !product.tag) return <>
+
+ return
+
+
+
+
+
+
+ {products.map(product => (
+
+
+
+ ))}
+
+ ![]()
(window.location.href = product.custom_url)}
+ draggable="false"
+ highlight="false"
+ src={product.image_small_url}
+ class="inline-product-img"
+ />
+
+
+
+ {getTitleFromProductTag(product.tag)}
+}
+
+function getColorFromProductTag(tag: string) {
+ const color = tag.split("|")[1]
+ return color ? color.trim() : ""
+}
+
+function getTitleFromProductTag(tag: string) {
+ const tile = tag.split("|")[0]
+ return tile ? tile.trim() : ""
+}
+
+function ProductDescription({ product }: { product: TagExtended }) {
+ if (!product) return <>
+
+ return {getColorFromProductTag(product.tag)}
+}
+
+export function stripMetaCurrencySymbols(price: string) {
+ // eslint-disable-next-line no-useless-escape
+ const pattern = /[^\$\€\£\¥\₹\₩\₽\฿\₫\d\.,]/g
+ if (!price) return ""
+ return price.replace(pattern, "").trim()
+}
+
+function ProductPrice({ product }: { product: TagExtended }) {
+ if (!product || !product.price) return <>
+ const { price } = product
+
+ return {stripMetaCurrencySymbols(price)}
+}
+
+function ProductCTA({ product, tile }: { product: TagExtended; tile: Tile }) {
+ const { custom_url, cta_text = "Buy Now" } = product
+ const buttonText = cta_text
+
+ return (
+
+ {buttonText}
+
+ )
+}
+function MobileProductCTA({ product, tile }: { product: TagExtended; tile: Tile }) {
+ const { custom_url } = product
+
+ return (
+
+ )
+}
diff --git a/src/libs/vertical-expanded-tiles/inline-swiper.tsx b/src/libs/vertical-expanded-tiles/inline-swiper.tsx
new file mode 100644
index 0000000..c7229e1
--- /dev/null
+++ b/src/libs/vertical-expanded-tiles/inline-swiper.tsx
@@ -0,0 +1,294 @@
+import { ISdk } from "../../types"
+import {
+ initializeSwiper,
+ refreshSwiper,
+ setSwiperLoadingStatus,
+ isSwiperLoading,
+ updateSwiperInstance
+} from "../extensions/swiper"
+import type { Swiper } from "swiper"
+import { enableTileImages, loadAllUnloadedTiles } from "../../libs"
+
+declare const sdk: ISdk
+const ids = new Set
+
+
+ )
+}
+
+export function ProductWrapper({
+ products,
+ selectedProductId,
+ component
+}: {
+ products: TagExtended[]
+ selectedProductId: string
+ component: IProductsComponent
+}) {
+ const tileId = component?.getTileId()
+ const tile = sdk.getTileById(tileId)
+
+ if (!tile) {
+ throw new Error("No tile found")
+ }
+
+ return (
+ <>
+ {products.map(product => {
+ const { id, image_small_url, is_cross_seller } = product
+
+ return (
+
+
+ )
+ })}
+
+ )
+}
+
+export function ProductImages({
+ products,
+ selectedProduct,
+ component
+}: {
+ products: TagExtended[]
+ selectedProduct: TagExtended
+ component: IProductsComponent
+}) {
+ return (
+ <>
+
+ 
+
+
+
+
+ )
+}
+
+export default function ProductsTemplate(sdk: ISdk, component?: IProductsComponent) {
+ const tileId = component && component.getTileId()
+
+ if (!tileId) {
+ console.warn("No tile id found in ProductsTemplate")
+ return <>
+ }
+
+ const tile = sdk.getTileById(tileId)
+ const selectedProductState = sdk.getSelectedProduct()
+
+ if (!tile) {
+ throw new Error("No tile found")
+ }
+
+ const products: TagExtended[] = (tile.tags_extended || []).filter(({ type }) => type === "product")
+
+ if (!products.length) {
+ return <>
+ }
+
+ const selectedProductById = selectedProductState
+ ? products.find(({ id }) => id == selectedProductState.id.toString())
+ : null
+
+ const selectedProduct: TagExtended = selectedProductById || products[0]
+
+ return (
+ <>
+
+
+
+ {selectedProduct && (
+
+
+
+
+ )
+}
+
+function Description({ tile, renderConfig, widgetId }: { widgetId: string; tile: Tile; renderConfig: RenderConfig }) {
+ if (!renderConfig.renderDescription) {
+ return <>
+ }
+
+ return (
+
+
+
+
+ {renderConfig.renderCaption && (
+
+ )
+}
+
+function getUsernameOrTerm(tile: Tile) {
+ const contentTags = tile.tags_extended?.filter(
+ tag => tag.type === "content" && tag.publicly_visible && tag.tag.includes("@")
+ )
+
+ const displayedItem = tile.user ?? (tile.terms && tile.terms.length ? tile.terms[0] : "")
+
+ return contentTags?.length ? contentTags[0].tag : `@${displayedItem.length ? displayedItem : "nosto"}`
+}
+
+function UserInfoTemplate(props: UserInfoTemplateProps) {
+ const { tile, renderConfig } = props
+ const { avatar, user } = tile
+
+ if (!renderConfig.renderUserInfo) {
+ return <>
+ }
+
+ const tileAvatar = (
+
+
+
+
+ )}
+
+ {renderConfig.renderTimephrase && (
+ {tile.message}
+
+ {video ? (
+ <>
+ togglePlayPause(sdk)} />
+
+
+ )
+}
+
+export function VerticalExpandedTile({ tile, sdk }: ExpandedTileProps) {
+ const { show_shopspots, show_products, show_timestamp } = sdk.getExpandedTileConfig()
+
+ const shopspotEnabled = sdk.isComponentLoaded("shopspots") && show_shopspots && !!tile.hotspots?.length
+
+ let productsEnabled = false
+
+ if (sdk.isComponentLoaded("products") && show_products && sdk.getProductTagsFromTile(tile)?.length) {
+ productsEnabled = true
+ }
+
+ const sharingToolsEnabled = false
+
+ return (
+ <>
+
+
+
+
+ )
+}
+
+export function IconSection({ tile, sdk }: { tile: Tile; sdk: ISdk }) {
+ const parent = sdk.getNodeId()
+ const bottomSectionIconContent = []
+
+ bottomSectionIconContent.push(
+
+
+
+ {tile.media === "video" ? (
+
+
+
+ )
+}
+
+export function ShopSpotTemplate({ sdk, shopspotEnabled, parent, tileId }: ShopspotProps) {
+ return shopspotEnabled ? (
+ <>
+ {...bottomSectionIconContent}
+
+ {shopspotEnabled ? (
+
+
+ ) : (
+ <>
+ )
+}
+
+function AutoplayProgress() {
+ return (
+
+
+ )
+}
diff --git a/src/libs/vertical-expanded-tiles/video.templates.tsx b/src/libs/vertical-expanded-tiles/video.templates.tsx
new file mode 100644
index 0000000..2c92ef2
--- /dev/null
+++ b/src/libs/vertical-expanded-tiles/video.templates.tsx
@@ -0,0 +1,231 @@
+import { getMutatedId } from "../extensions"
+import { Tile, createElement, createFragment } from "../../"
+import { storyAutoplayProgress } from "./expanded-swiper.loader"
+import { ImageTemplate, ShopSpotTemplate } from "./tile.template"
+import { EmbedYoutube } from "./embed-youtube.template"
+import { ISdk } from "../../types"
+
+type OnLoad = (event: Event) => void
+
+function getVideoData(tile: Tile) {
+ if (tile.video_files?.length) {
+ return tile.video_files[0]
+ }
+
+ if (tile.video && tile.video.standard_resolution) {
+ return {
+ width: "auto",
+ height: "auto",
+ mime: "video/mp4",
+ url: tile.video.standard_resolution.url
+ }
+ }
+
+ console.error("Failed to find video data")
+
+ return
+}
+
+export function handlePauseAutoplay(swiperId: string) {
+ const swiperInstance = window.ugc.swiperContainer[swiperId].instance
+ if (swiperInstance) {
+ swiperInstance?.autoplay?.stop()
+ } else {
+ console.error(`Swiper instance for id ${swiperId} not found`)
+ }
+}
+
+export function handlePlayAutoplay(swiperId: string) {
+ const swiperInstance = window.ugc.swiperContainer[swiperId].instance
+ if (swiperInstance) {
+ swiperInstance?.autoplay?.start()
+ } else {
+ console.error(`Swiper instance for id ${swiperId} not found`)
+ }
+}
+
+export function UgcVideoTemplate({
+ tile,
+ onLoad,
+ swiperId,
+ controls = true
+}: {
+ tile: Tile
+ onLoad: OnLoad
+ swiperId: string
+ controls?: boolean
+}) {
+ const videoData = getVideoData(tile)
+ if (!videoData) {
+ return <>
+ }
+
+ const { url, width, height, mime } = videoData
+
+ return (
+
+ )
+}
+
+export function TikTokTemplate({ tile, onLoad }: { tile: Tile; onLoad: OnLoad }) {
+ const tiktokId = tile.tiktok_id
+
+ return (
+
+ )
+}
+
+export function VideoErrorFallbackTemplate({
+ tile,
+ defaultHidden = true,
+ sdk
+}: {
+ tile: Tile
+ parent?: string
+ defaultHidden?: boolean
+ sdk: ISdk
+}) {
+ const originalImageUrl = tile.image
+ const fallbackCss = `video-fallback-content${defaultHidden ? " hidden" : ""}`
+
+ return (
+
+
+
+
+
+ )
+}
+
+export function SourceVideoContent({
+ tile,
+ onLoad,
+ swiperId,
+ controls
+}: {
+ tile: Tile
+ onLoad: OnLoad
+ swiperId: string
+ controls?: boolean
+}) {
+ // handle unplayable tiktok source
+ // TODO handle vide_source "tiktok"
+ if (tile.source === "tiktok" || tile.video_source === "tiktok") {
+ return
+
+
+
+
+ {
+ const imageFiller = sdk.querySelector(`.image-filler[data-tile-id="${tile.id}"]`)
+ if (imageFiller) {
+ imageFiller.classList.add("blurred")
+ }
+
+ const arrowIcon = sdk.querySelector(`.play-icon[data-tile-id="${tile.id}"]`)
+ if (arrowIcon) {
+ arrowIcon.style.display = "none"
+ }
+
+ const videoElement = event.target as HTMLVideoElement
+ videoElement.style.display = "inherit"
+ }}
+ tile={tile}
+ controls={controls}
+ />
+
+ )
+}
diff --git a/src/types/core/sdk.ts b/src/types/core/sdk.ts
index 31b90f9..8c8f970 100644
--- a/src/types/core/sdk.ts
+++ b/src/types/core/sdk.ts
@@ -1,12 +1,19 @@
import { EventMapping, EventName } from "../../events"
import { MyWidgetSettings } from "../loader"
-import { Sdk } from "../types"
-import { ClaimConfig, ExpandedTileOptions, InlineTileOptions, Style, WidgetOptions, WidgetResponse } from "../widgets"
+import {
+ ClaimConfig,
+ ExpandedTileOptions,
+ ExpandedTileVariant,
+ InlineTileOptions,
+ Style,
+ WidgetOptions,
+ WidgetResponse
+} from "../widgets"
import { Content, Hotspot, Product, Tile } from "./tile"
type HTMLResult = string | HTMLElement
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export type Template = (sdk: Sdk, component: any) => HTMLResult
+export type Template = (sdk: ISdk, component: any) => HTMLResult
export interface ISdk {
querySelector:
+
+
+
+
+ {
+ window.location.href = tile.original_url || tile.original_link
+ }}
+ data-tile-id={tile.id}
+ class="image-filler"
+ style={{ "background-image": `url('${tile.image}')` }}>
+
+ {shopspotEnabled ?
+