npm - @wix/himalaya-cli - Versions diffs - 0.1386.0 → 0.1388.0 - Mend

@wix/himalaya-cli 0.1386.0 → 0.1388.0

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.

Files changed (71) hide show

package/templates/branded-lite/dev/index.ts CHANGED Viewed

@@ -2622,6 +2622,335 @@ const SCREENS = runtimeSetting({
                                                           "pressFeedback": "scale",
                                                           "haptic": "light"
                                                         }
+                                                      },
+                                                      {
+                                                        "id": "himi_branded_home.videos_section",
+                                                        "body": {
+                                                          "package": "himalaya",
+                                                          "type": "VStack",
+                                                          "props": {
+                                                            "spacing": 10,
+                                                            "alignment": "leading",
+                                                            "children": [
+                                                              {
+                                                                "id": "",
+                                                                "body": {
+                                                                  "package": "himalaya",
+                                                                  "type": "VStack",
+                                                                  "props": {
+                                                                    "spacing": 3,
+                                                                    "alignment": "leading",
+                                                                    "children": [
+                                                                      {
+                                                                        "id": "",
+                                                                        "body": {
+                                                                          "package": "himalaya",
+                                                                          "type": "Text",
+                                                                          "props": {
+                                                                            "text": "Videos",
+                                                                            "style": "title3"
+                                                                          }
+                                                                        }
+                                                                      },
+                                                                      {
+                                                                        "id": "",
+                                                                        "body": {
+                                                                          "package": "himalaya",
+                                                                          "type": "Text",
+                                                                          "props": {
+                                                                            "text": "The latest from our channels",
+                                                                            "style": "footnote",
+                                                                            "color": "textSecondary"
+                                                                          }
+                                                                        }
+                                                                      }
+                                                                    ]
+                                                                  }
+                                                                }
+                                                              },
+                                                              {
+                                                                "id": "himi_branded_home.video_rail",
+                                                                "body": {
+                                                                  "package": "himalaya",
+                                                                  "type": "Carousel",
+                                                                  "props": {
+                                                                    "itemsPath": "$service:himiBrandedHome.homeVideos",
+                                                                    "items": [
+                                                                      {
+                                                                        "id": "",
+                                                                        "body": {
+                                                                          "package": "himalaya",
+                                                                          "type": "VStack",
+                                                                          "props": {
+                                                                            "spacing": 8,
+                                                                            "alignment": "leading",
+                                                                            "children": [
+                                                                              {
+                                                                                "id": "",
+                                                                                "body": {
+                                                                                  "package": "himalaya",
+                                                                                  "type": "ZStack",
+                                                                                  "props": {
+                                                                                    "alignment": "leading",
+                                                                                    "children": [
+                                                                                      {
+                                                                                        "id": "",
+                                                                                        "body": {
+                                                                                          "package": "himalaya",
+                                                                                          "type": "Image",
+                                                                                          "props": {
+                                                                                            "url": "$item.coverUrl",
+                                                                                            "fillWidth": true,
+                                                                                            "height": 158,
+                                                                                            "contentMode": "fill"
+                                                                                          }
+                                                                                        },
+                                                                                        "modifiers": {
+                                                                                          "accessibilityRole": "decorative",
+                                                                                          "hiddenPath": "$item.noCover"
+                                                                                        }
+                                                                                      },
+                                                                                      {
+                                                                                        "id": "",
+                                                                                        "body": {
+                                                                                          "package": "himalaya",
+                                                                                          "type": "ZStack",
+                                                                                          "props": {
+                                                                                            "alignment": "center",
+                                                                                            "children": [
+                                                                                              {
+                                                                                                "id": "",
+                                                                                                "body": {
+                                                                                                  "package": "himalaya",
+                                                                                                  "type": "Icon",
+                                                                                                  "props": {
+                                                                                                    "name": "play",
+                                                                                                    "size": 28,
+                                                                                                    "tint": "accentPrimary"
+                                                                                                  }
+                                                                                                },
+                                                                                                "modifiers": {
+                                                                                                  "accessibilityRole": "decorative"
+                                                                                                }
+                                                                                              }
+                                                                                            ]
+                                                                                          }
+                                                                                        },
+                                                                                        "modifiers": {
+                                                                                          "fillMaxWidth": true,
+                                                                                          "height": 158,
+                                                                                          "background": {
+                                                                                            "token": "accentSurface"
+                                                                                          },
+                                                                                          "hiddenPath": "$item.hasCover"
+                                                                                        }
+                                                                                      },
+                                                                                      {
+                                                                                        "id": "",
+                                                                                        "body": {
+                                                                                          "package": "himalaya",
+                                                                                          "type": "VStack",
+                                                                                          "props": {
+                                                                                            "spacing": 0,
+                                                                                            "alignment": "leading",
+                                                                                            "children": [
+                                                                                              {
+                                                                                                "id": "",
+                                                                                                "body": {
+                                                                                                  "package": "himalaya",
+                                                                                                  "type": "Spacer",
+                                                                                                  "props": {}
+                                                                                                }
+                                                                                              },
+                                                                                              {
+                                                                                                "id": "",
+                                                                                                "body": {
+                                                                                                  "package": "himalaya",
+                                                                                                  "type": "HStack",
+                                                                                                  "props": {
+                                                                                                    "spacing": 8,
+                                                                                                    "children": [
+                                                                                                      {
+                                                                                                        "id": "",
+                                                                                                        "body": {
+                                                                                                          "package": "himalaya",
+                                                                                                          "type": "Icon",
+                                                                                                          "props": {
+                                                                                                            "name": "play",
+                                                                                                            "size": 14,
+                                                                                                            "tint": "textOnAccent"
+                                                                                                          }
+                                                                                                        },
+                                                                                                        "modifiers": {
+                                                                                                          "accessibilityRole": "decorative"
+                                                                                                        }
+                                                                                                      },
+                                                                                                      {
+                                                                                                        "id": "",
+                                                                                                        "body": {
+                                                                                                          "package": "himalaya",
+                                                                                                          "type": "VStack",
+                                                                                                          "props": {
+                                                                                                            "spacing": 1,
+                                                                                                            "alignment": "leading",
+                                                                                                            "children": [
+                                                                                                              {
+                                                                                                                "id": "",
+                                                                                                                "body": {
+                                                                                                                  "package": "himalaya",
+                                                                                                                  "type": "Text",
+                                                                                                                  "props": {
+                                                                                                                    "text": "$item.title",
+                                                                                                                    "style": "bodyEmphasis",
+                                                                                                                    "color": "textOnAccent",
+                                                                                                                    "maxLines": 1
+                                                                                                                  }
+                                                                                                                }
+                                                                                                              },
+                                                                                                              {
+                                                                                                                "id": "",
+                                                                                                                "body": {
+                                                                                                                  "package": "himalaya",
+                                                                                                                  "type": "Text",
+                                                                                                                  "props": {
+                                                                                                                    "text": "$item.meta",
+                                                                                                                    "style": "caption",
+                                                                                                                    "color": "textOnAccent",
+                                                                                                                    "maxLines": 1,
+                                                                                                                    "collapseWhenEmpty": true
+                                                                                                                  }
+                                                                                                                }
+                                                                                                              }
+                                                                                                            ]
+                                                                                                          }
+                                                                                                        }
+                                                                                                      }
+                                                                                                    ]
+                                                                                                  }
+                                                                                                },
+                                                                                                "modifiers": {
+                                                                                                  "background": {
+                                                                                                    "token": "accentPrimary"
+                                                                                                  },
+                                                                                                  "cornerRadius": 10,
+                                                                                                  "padding": {
+                                                                                                    "leading": 10,
+                                                                                                    "trailing": 12,
+                                                                                                    "top": 6,
+                                                                                                    "bottom": 6
+                                                                                                  }
+                                                                                                }
+                                                                                              }
+                                                                                            ]
+                                                                                          }
+                                                                                        },
+                                                                                        "modifiers": {
+                                                                                          "height": 158,
+                                                                                          "fillMaxWidth": true,
+                                                                                          "padding": {
+                                                                                            "leading": 10,
+                                                                                            "trailing": 10,
+                                                                                            "bottom": 10
+                                                                                          },
+                                                                                          "hiddenPath": "$item.captionBelow"
+                                                                                        }
+                                                                                      }
+                                                                                    ]
+                                                                                  }
+                                                                                },
+                                                                                "modifiers": {
+                                                                                  "fillMaxWidth": true,
+                                                                                  "height": 158,
+                                                                                  "cornerRadius": 12
+                                                                                }
+                                                                              },
+                                                                              {
+                                                                                "id": "",
+                                                                                "body": {
+                                                                                  "package": "himalaya",
+                                                                                  "type": "VStack",
+                                                                                  "props": {
+                                                                                    "spacing": 2,
+                                                                                    "alignment": "leading",
+                                                                                    "children": [
+                                                                                      {
+                                                                                        "id": "",
+                                                                                        "body": {
+                                                                                          "package": "himalaya",
+                                                                                          "type": "Text",
+                                                                                          "props": {
+                                                                                            "text": "$item.title",
+                                                                                            "style": "bodyEmphasis",
+                                                                                            "maxLines": 2
+                                                                                          }
+                                                                                        }
+                                                                                      },
+                                                                                      {
+                                                                                        "id": "",
+                                                                                        "body": {
+                                                                                          "package": "himalaya",
+                                                                                          "type": "Text",
+                                                                                          "props": {
+                                                                                            "text": "$item.meta",
+                                                                                            "style": "caption",
+                                                                                            "color": "textSecondary",
+                                                                                            "maxLines": 1,
+                                                                                            "collapseWhenEmpty": true
+                                                                                          }
+                                                                                        }
+                                                                                      }
+                                                                                    ]
+                                                                                  }
+                                                                                },
+                                                                                "modifiers": {
+                                                                                  "hiddenPath": "$item.captionOnImage"
+                                                                                }
+                                                                              }
+                                                                            ]
+                                                                          }
+                                                                        },
+                                                                        "modifiers": {
+                                                                          "width": 280,
+                                                                          "onTap": {
+                                                                            "actionId": "himi.open",
+                                                                            "params": {
+                                                                              "screenId": "himi_video",
+                                                                              "id": "$item.id",
+                                                                              "channelId": "$item.channelId"
+                                                                            }
+                                                                          },
+                                                                          "pressFeedback": "scale",
+                                                                          "haptic": "light",
+                                                                          "accessibilityLabel": "$item.accessibilityLabel"
+                                                                        }
+                                                                      }
+                                                                    ]
+                                                                  }
+                                                                }
+                                                              },
+                                                              {
+                                                                "id": "himi_branded_home.videos_all",
+                                                                "body": {
+                                                                  "package": "himalaya",
+                                                                  "type": "Button",
+                                                                  "props": {
+                                                                    "title": "See all videos",
+                                                                    "style": "plain",
+                                                                    "action": {
+                                                                      "actionId": "himi.open",
+                                                                      "params": {
+                                                                        "screenId": "himi_videos"
+                                                                      }
+                                                                    }
+                                                                  }
+                                                                }
+                                                              }
+                                                            ]
+                                                          }
+                                                        },
+                                                        "modifiers": {
+                                                          "hiddenPath": "$service:himiBrandedHome.noHomeVideos"
+                                                        }
                                                       }
                                                     ]
                                                   }
@@ -2961,6 +3290,7 @@ const SCREENS = runtimeSetting({
             "verticals": "[\"store\",\"bookings\",\"restaurants\",\"programs\",\"plans\",\"feed\",\"members\",\"forum\",\"coupons\",\"notifications\",\"loyalty\",\"reviews\",\"portfolio\",\"reservations\",\"invoices\",\"badges\",\"notifsettings\",\"events\",\"blog\",\"groups\",\"cms\",\"donations\",\"giftCards\",\"videos\",\"podcasts\",\"forms\",\"galleries\",\"inbox\",\"faq\"]",
             "homeModules": "[{\"id\":\"member_progress\",\"label\":\"This week's schedule\",\"dataSource\":\"member.bookings.schedule\",\"emptyWhen\":[\"hideMemberProgress\"]},{\"id\":\"up_next\",\"label\":\"Up next\",\"dataSource\":\"member.bookings\",\"emptyWhen\":[\"hideNextBooking\",\"hidePersonalError\"]},{\"id\":\"saved\",\"label\":\"Saved on this device\",\"dataSource\":\"device.saved_items\",\"emptyWhen\":[\"noSavedContent\"]},{\"id\":\"section_0\",\"label\":\"Discover 1\",\"dataSource\":\"classic.section0\",\"emptyWhen\":[\"hideFeaturedSkeleton\"]},{\"id\":\"section_1\",\"label\":\"Featured products\",\"dataSource\":\"classic.section1\"}]",
             "ownerDefaultLayout": "",
+            "videoCaption": "overlay",
             "weeklyGoal": "2"
           }
         }
@@ -69337,6 +69667,358 @@ const SCREENS = runtimeSetting({
                 "hiddenPath": "$service:himiBrandedVideos.notMockUnavailable"
               }
             },
+            {
+              "id": "himi_videos.loading",
+              "body": {
+                "package": "himalaya",
+                "type": "ZStack",
+                "props": {
+                  "alignment": "center",
+                  "children": []
+                }
+              },
+              "modifiers": {
+                "height": 158,
+                "background": {
+                  "token": "surfaceSecondary"
+                },
+                "border": {
+                  "width": 1,
+                  "color": {
+                    "token": "border"
+                  }
+                },
+                "cornerRadius": 8,
+                "hiddenPath": "$service:himiBrandedVideos.notLoading"
+              }
+            },
+            {
+              "id": "himi_videos.latest_section",
+              "body": {
+                "package": "himalaya",
+                "type": "VStack",
+                "props": {
+                  "spacing": 10,
+                  "alignment": "leading",
+                  "children": [
+                    {
+                      "id": "",
+                      "body": {
+                        "package": "himalaya",
+                        "type": "VStack",
+                        "props": {
+                          "spacing": 3,
+                          "alignment": "leading",
+                          "children": [
+                            {
+                              "id": "",
+                              "body": {
+                                "package": "himalaya",
+                                "type": "Text",
+                                "props": {
+                                  "text": "Latest videos",
+                                  "style": "title3"
+                                }
+                              }
+                            }
+                          ]
+                        }
+                      }
+                    },
+                    {
+                      "id": "himi_videos.latest",
+                      "body": {
+                        "package": "himalaya",
+                        "type": "Carousel",
+                        "props": {
+                          "itemsPath": "$service:himiBrandedVideos.latestVideos",
+                          "items": [
+                            {
+                              "id": "",
+                              "body": {
+                                "package": "himalaya",
+                                "type": "VStack",
+                                "props": {
+                                  "spacing": 8,
+                                  "alignment": "leading",
+                                  "children": [
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "ZStack",
+                                        "props": {
+                                          "alignment": "leading",
+                                          "children": [
+                                            {
+                                              "id": "",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "Image",
+                                                "props": {
+                                                  "url": "$item.coverUrl",
+                                                  "fillWidth": true,
+                                                  "height": 158,
+                                                  "contentMode": "fill"
+                                                }
+                                              },
+                                              "modifiers": {
+                                                "accessibilityRole": "decorative",
+                                                "hiddenPath": "$item.noCover"
+                                              }
+                                            },
+                                            {
+                                              "id": "",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "ZStack",
+                                                "props": {
+                                                  "alignment": "center",
+                                                  "children": [
+                                                    {
+                                                      "id": "",
+                                                      "body": {
+                                                        "package": "himalaya",
+                                                        "type": "Icon",
+                                                        "props": {
+                                                          "name": "play",
+                                                          "size": 28,
+                                                          "tint": "accentPrimary"
+                                                        }
+                                                      },
+                                                      "modifiers": {
+                                                        "accessibilityRole": "decorative"
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              },
+                                              "modifiers": {
+                                                "fillMaxWidth": true,
+                                                "height": 158,
+                                                "background": {
+                                                  "token": "accentSurface"
+                                                },
+                                                "hiddenPath": "$item.hasCover"
+                                              }
+                                            },
+                                            {
+                                              "id": "",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "VStack",
+                                                "props": {
+                                                  "spacing": 0,
+                                                  "alignment": "leading",
+                                                  "children": [
+                                                    {
+                                                      "id": "",
+                                                      "body": {
+                                                        "package": "himalaya",
+                                                        "type": "Spacer",
+                                                        "props": {}
+                                                      }
+                                                    },
+                                                    {
+                                                      "id": "",
+                                                      "body": {
+                                                        "package": "himalaya",
+                                                        "type": "HStack",
+                                                        "props": {
+                                                          "spacing": 8,
+                                                          "children": [
+                                                            {
+                                                              "id": "",
+                                                              "body": {
+                                                                "package": "himalaya",
+                                                                "type": "Icon",
+                                                                "props": {
+                                                                  "name": "play",
+                                                                  "size": 14,
+                                                                  "tint": "textOnAccent"
+                                                                }
+                                                              },
+                                                              "modifiers": {
+                                                                "accessibilityRole": "decorative"
+                                                              }
+                                                            },
+                                                            {
+                                                              "id": "",
+                                                              "body": {
+                                                                "package": "himalaya",
+                                                                "type": "VStack",
+                                                                "props": {
+                                                                  "spacing": 1,
+                                                                  "alignment": "leading",
+                                                                  "children": [
+                                                                    {
+                                                                      "id": "",
+                                                                      "body": {
+                                                                        "package": "himalaya",
+                                                                        "type": "Text",
+                                                                        "props": {
+                                                                          "text": "$item.title",
+                                                                          "style": "bodyEmphasis",
+                                                                          "color": "textOnAccent",
+                                                                          "maxLines": 1
+                                                                        }
+                                                                      }
+                                                                    },
+                                                                    {
+                                                                      "id": "",
+                                                                      "body": {
+                                                                        "package": "himalaya",
+                                                                        "type": "Text",
+                                                                        "props": {
+                                                                          "text": "$item.meta",
+                                                                          "style": "caption",
+                                                                          "color": "textOnAccent",
+                                                                          "maxLines": 1,
+                                                                          "collapseWhenEmpty": true
+                                                                        }
+                                                                      }
+                                                                    }
+                                                                  ]
+                                                                }
+                                                              }
+                                                            }
+                                                          ]
+                                                        }
+                                                      },
+                                                      "modifiers": {
+                                                        "background": {
+                                                          "token": "accentPrimary"
+                                                        },
+                                                        "cornerRadius": 10,
+                                                        "padding": {
+                                                          "leading": 10,
+                                                          "trailing": 12,
+                                                          "top": 6,
+                                                          "bottom": 6
+                                                        }
+                                                      }
+                                                    }
+                                                  ]
+                                                }
+                                              },
+                                              "modifiers": {
+                                                "height": 158,
+                                                "fillMaxWidth": true,
+                                                "padding": {
+                                                  "leading": 10,
+                                                  "trailing": 10,
+                                                  "bottom": 10
+                                                },
+                                                "hiddenPath": "$item.captionBelow"
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "modifiers": {
+                                        "fillMaxWidth": true,
+                                        "height": 158,
+                                        "cornerRadius": 12
+                                      }
+                                    },
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "VStack",
+                                        "props": {
+                                          "spacing": 2,
+                                          "alignment": "leading",
+                                          "children": [
+                                            {
+                                              "id": "",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "Text",
+                                                "props": {
+                                                  "text": "$item.title",
+                                                  "style": "bodyEmphasis",
+                                                  "maxLines": 2
+                                                }
+                                              }
+                                            },
+                                            {
+                                              "id": "",
+                                              "body": {
+                                                "package": "himalaya",
+                                                "type": "Text",
+                                                "props": {
+                                                  "text": "$item.meta",
+                                                  "style": "caption",
+                                                  "color": "textSecondary",
+                                                  "maxLines": 1,
+                                                  "collapseWhenEmpty": true
+                                                }
+                                              }
+                                            }
+                                          ]
+                                        }
+                                      },
+                                      "modifiers": {
+                                        "hiddenPath": "$item.captionOnImage"
+                                      }
+                                    }
+                                  ]
+                                }
+                              },
+                              "modifiers": {
+                                "width": 280,
+                                "onTap": {
+                                  "actionId": "himi.open",
+                                  "params": {
+                                    "screenId": "himi_video",
+                                    "id": "$item.id",
+                                    "channelId": "$item.channelId"
+                                  }
+                                },
+                                "pressFeedback": "scale",
+                                "haptic": "light",
+                                "accessibilityLabel": "$item.accessibilityLabel"
+                              }
+                            }
+                          ]
+                        }
+                      }
+                    }
+                  ]
+                }
+              },
+              "modifiers": {
+                "hiddenPath": "$service:himiBrandedVideos.noLatestVideos"
+              }
+            },
+            {
+              "id": "",
+              "body": {
+                "package": "himalaya",
+                "type": "VStack",
+                "props": {
+                  "spacing": 3,
+                  "alignment": "leading",
+                  "children": [
+                    {
+                      "id": "",
+                      "body": {
+                        "package": "himalaya",
+                        "type": "Text",
+                        "props": {
+                          "text": "Channels",
+                          "style": "title3"
+                        }
+                      }
+                    }
+                  ]
+                }
+              },
+              "modifiers": {
+                "hiddenPath": "$service:himiBrandedVideos.noChannels"
+              }
+            },
             {
               "id": "himi_videos.rows.collection.toolbar",
               "body": {
@@ -69369,7 +70051,7 @@ const SCREENS = runtimeSetting({
                         "package": "himalaya",
                         "type": "SearchField",
                         "props": {
-                          "placeholder": "Search",
+                          "placeholder": "Search channels",
                           "value": "$service:himiBrandedVideos.collection.query",
                           "debounceMs": 200,
                           "onChange": {
@@ -70060,6 +70742,73 @@ const SCREENS = runtimeSetting({
                                                   "spacing": 8,
                                                   "alignment": "leading",
                                                   "children": [
+                                                    {
+                                                      "id": "",
+                                                      "body": {
+                                                        "package": "himalaya",
+                                                        "type": "VStack",
+                                                        "props": {
+                                                          "spacing": 0,
+                                                          "children": [
+                                                            {
+                                                              "id": "himi_videos.rows.collection.grid.$item.collectionId/image",
+                                                              "body": {
+                                                                "package": "himalaya",
+                                                                "type": "Image",
+                                                                "props": {
+                                                                  "url": "$item.collectionImage",
+                                                                  "contentDescription": "$item.collectionTitle",
+                                                                  "contentMode": "fill",
+                                                                  "height": 112,
+                                                                  "fillWidth": true
+                                                                }
+                                                              },
+                                                              "modifiers": {
+                                                                "cornerRadius": 12,
+                                                                "hiddenPath": "$item.collectionNoImage"
+                                                              }
+                                                            },
+                                                            {
+                                                              "id": "",
+                                                              "body": {
+                                                                "package": "himalaya",
+                                                                "type": "ZStack",
+                                                                "props": {
+                                                                  "alignment": "center",
+                                                                  "children": [
+                                                                    {
+                                                                      "id": "",
+                                                                      "body": {
+                                                                        "package": "himalaya",
+                                                                        "type": "Icon",
+                                                                        "props": {
+                                                                          "name": "photo",
+                                                                          "size": 28,
+                                                                          "tint": "accentPrimary"
+                                                                        }
+                                                                      },
+                                                                      "modifiers": {
+                                                                        "accessibilityRole": "decorative"
+                                                                      }
+                                                                    }
+                                                                  ]
+                                                                }
+                                                              },
+                                                              "modifiers": {
+                                                                "height": 112,
+                                                                "fillMaxWidth": true,
+                                                                "cornerRadius": 12,
+                                                                "background": {
+                                                                  "token": "surfaceSecondary"
+                                                                },
+                                                                "accessibilityLabel": "No image available",
+                                                                "hiddenPath": "$item.collectionHasImage"
+                                                              }
+                                                            }
+                                                          ]
+                                                        }
+                                                      }
+                                                    },
                                                     {
                                                       "id": "",
                                                       "body": {
@@ -70604,6 +71353,73 @@ const SCREENS = runtimeSetting({
                                                   "spacing": 8,
                                                   "alignment": "leading",
                                                   "children": [
+                                                    {
+                                                      "id": "",
+                                                      "body": {
+                                                        "package": "himalaya",
+                                                        "type": "VStack",
+                                                        "props": {
+                                                          "spacing": 0,
+                                                          "children": [
+                                                            {
+                                                              "id": "himi_videos.rows.collection.compact-grid.$item.collectionId/image",
+                                                              "body": {
+                                                                "package": "himalaya",
+                                                                "type": "Image",
+                                                                "props": {
+                                                                  "url": "$item.collectionImage",
+                                                                  "contentDescription": "$item.collectionTitle",
+                                                                  "contentMode": "fill",
+                                                                  "height": 80,
+                                                                  "fillWidth": true
+                                                                }
+                                                              },
+                                                              "modifiers": {
+                                                                "cornerRadius": 12,
+                                                                "hiddenPath": "$item.collectionNoImage"
+                                                              }
+                                                            },
+                                                            {
+                                                              "id": "",
+                                                              "body": {
+                                                                "package": "himalaya",
+                                                                "type": "ZStack",
+                                                                "props": {
+                                                                  "alignment": "center",
+                                                                  "children": [
+                                                                    {
+                                                                      "id": "",
+                                                                      "body": {
+                                                                        "package": "himalaya",
+                                                                        "type": "Icon",
+                                                                        "props": {
+                                                                          "name": "photo",
+                                                                          "size": 28,
+                                                                          "tint": "accentPrimary"
+                                                                        }
+                                                                      },
+                                                                      "modifiers": {
+                                                                        "accessibilityRole": "decorative"
+                                                                      }
+                                                                    }
+                                                                  ]
+                                                                }
+                                                              },
+                                                              "modifiers": {
+                                                                "height": 80,
+                                                                "fillMaxWidth": true,
+                                                                "cornerRadius": 12,
+                                                                "background": {
+                                                                  "token": "surfaceSecondary"
+                                                                },
+                                                                "accessibilityLabel": "No image available",
+                                                                "hiddenPath": "$item.collectionHasImage"
+                                                              }
+                                                            }
+                                                          ]
+                                                        }
+                                                      }
+                                                    },
                                                     {
                                                       "id": "",
                                                       "body": {
@@ -71161,6 +71977,73 @@ const SCREENS = runtimeSetting({
                                         "spacing": 8,
                                         "alignment": "leading",
                                         "children": [
+                                          {
+                                            "id": "",
+                                            "body": {
+                                              "package": "himalaya",
+                                              "type": "VStack",
+                                              "props": {
+                                                "spacing": 0,
+                                                "children": [
+                                                  {
+                                                    "id": "himi_videos.rows.collection.preview.$item.collectionId/image",
+                                                    "body": {
+                                                      "package": "himalaya",
+                                                      "type": "Image",
+                                                      "props": {
+                                                        "url": "$item.collectionImage",
+                                                        "contentDescription": "$item.collectionTitle",
+                                                        "contentMode": "fill",
+                                                        "height": 112,
+                                                        "fillWidth": true
+                                                      }
+                                                    },
+                                                    "modifiers": {
+                                                      "cornerRadius": 12,
+                                                      "hiddenPath": "$item.collectionNoImage"
+                                                    }
+                                                  },
+                                                  {
+                                                    "id": "",
+                                                    "body": {
+                                                      "package": "himalaya",
+                                                      "type": "ZStack",
+                                                      "props": {
+                                                        "alignment": "center",
+                                                        "children": [
+                                                          {
+                                                            "id": "",
+                                                            "body": {
+                                                              "package": "himalaya",
+                                                              "type": "Icon",
+                                                              "props": {
+                                                                "name": "photo",
+                                                                "size": 28,
+                                                                "tint": "accentPrimary"
+                                                              }
+                                                            },
+                                                            "modifiers": {
+                                                              "accessibilityRole": "decorative"
+                                                            }
+                                                          }
+                                                        ]
+                                                      }
+                                                    },
+                                                    "modifiers": {
+                                                      "height": 112,
+                                                      "fillMaxWidth": true,
+                                                      "cornerRadius": 12,
+                                                      "background": {
+                                                        "token": "surfaceSecondary"
+                                                      },
+                                                      "accessibilityLabel": "No image available",
+                                                      "hiddenPath": "$item.collectionHasImage"
+                                                    }
+                                                  }
+                                                ]
+                                              }
+                                            }
+                                          },
                                           {
                                             "id": "",
                                             "body": {
@@ -71400,7 +72283,10 @@ const SCREENS = runtimeSetting({
           "bottom": 28
         },
         "onAppear": {
-          "actionId": "tier5.himiBrandedVideos.load"
+          "actionId": "tier5.himiBrandedVideos.load",
+          "params": {
+            "videoCaption": "overlay"
+          }
         }
       }
     },
@@ -71484,32 +72370,112 @@ const SCREENS = runtimeSetting({
                       "id": "",
                       "body": {
                         "package": "himalaya",
-                        "type": "VStack",
+                        "type": "HStack",
                         "props": {
-                          "spacing": 4,
-                          "alignment": "leading",
+                          "spacing": 12,
                           "children": [
                             {
                               "id": "",
                               "body": {
                                 "package": "himalaya",
-                                "type": "Text",
+                                "type": "Image",
                                 "props": {
-                                  "text": "$item.title",
-                                  "style": "bodyEmphasis"
+                                  "url": "$item.coverUrl",
+                                  "width": 112,
+                                  "height": 63,
+                                  "contentMode": "fill"
                                 }
+                              },
+                              "modifiers": {
+                                "accessibilityRole": "decorative",
+                                "cornerRadius": 8,
+                                "hiddenPath": "$item.noCover"
                               }
                             },
                             {
                               "id": "",
                               "body": {
                                 "package": "himalaya",
-                                "type": "Text",
+                                "type": "ZStack",
                                 "props": {
-                                  "text": "$item.subtitle",
-                                  "style": "caption",
-                                  "color": "textSecondary",
-                                  "collapseWhenEmpty": true
+                                  "alignment": "center",
+                                  "children": [
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "Icon",
+                                        "props": {
+                                          "name": "play",
+                                          "size": 20,
+                                          "tint": "accentPrimary"
+                                        }
+                                      },
+                                      "modifiers": {
+                                        "accessibilityRole": "decorative"
+                                      }
+                                    }
+                                  ]
+                                }
+                              },
+                              "modifiers": {
+                                "width": 112,
+                                "height": 63,
+                                "background": {
+                                  "token": "accentSurface"
+                                },
+                                "cornerRadius": 8,
+                                "hiddenPath": "$item.hasCover"
+                              }
+                            },
+                            {
+                              "id": "",
+                              "body": {
+                                "package": "himalaya",
+                                "type": "VStack",
+                                "props": {
+                                  "spacing": 4,
+                                  "alignment": "leading",
+                                  "children": [
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "Text",
+                                        "props": {
+                                          "text": "$item.title",
+                                          "style": "bodyEmphasis",
+                                          "maxLines": 2
+                                        }
+                                      }
+                                    },
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "Text",
+                                        "props": {
+                                          "text": "$item.meta",
+                                          "style": "caption",
+                                          "color": "textSecondary",
+                                          "collapseWhenEmpty": true
+                                        }
+                                      }
+                                    },
+                                    {
+                                      "id": "",
+                                      "body": {
+                                        "package": "himalaya",
+                                        "type": "Text",
+                                        "props": {
+                                          "text": "$item.subtitle",
+                                          "style": "caption",
+                                          "color": "textSecondary",
+                                          "collapseWhenEmpty": true
+                                        }
+                                      }
+                                    }
+                                  ]
                                 }
                               }
                             }
@@ -71522,10 +72488,10 @@ const SCREENS = runtimeSetting({
                         },
                         "cornerRadius": 12,
                         "padding": {
-                          "leading": 16,
+                          "leading": 10,
                           "trailing": 16,
-                          "top": 12,
-                          "bottom": 12
+                          "top": 10,
+                          "bottom": 10
                         },
                         "onTap": {
                           "actionId": "himi.open",