@clickview/lite 0.0.24-rc.4 → 0.0.24

package/dist/scripts/6.chunk.js

@@ -1,24 +1,30 @@
 (window["webpackJsonp_clickview_lite"] = window["webpackJsonp_clickview_lite"] || []).push([[6],{
 
-/***/ "../../libs/shared/src/components/actions/ActionButton.tsx":
-/*!*****************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/actions/ActionButton.tsx ***!
-  \*****************************************************************************************************/
-/*! exports provided: ActionButton */
+/***/ "../../libs/shared/src/apps/playlists/components/playlist-list/PlaylistItem.tsx":
+/*!**************************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/playlists/components/playlist-list/PlaylistItem.tsx ***!
+  \**************************************************************************************************************************/
+/*! exports provided: PlaylistItem */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ActionButton", function() { return ActionButton; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PlaylistItem", function() { return PlaylistItem; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-bootstrap */ "react-bootstrap");
-/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_bootstrap__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
-/* harmony import */ var _analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../analytics/src/AnalyticsHelper */ "../../libs/analytics/src/AnalyticsHelper.ts");
-/* harmony import */ var _icon_button_IconButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icon-button/IconButton */ "../../libs/shared/src/components/icon-button/IconButton.tsx");
-/* harmony import */ var _tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../tooltip/Tooltip */ "../../libs/shared/src/components/tooltip/Tooltip.tsx");
-/* harmony import */ var _app_link_AppLink__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
+/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! moment */ "moment");
+/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _utils_ImageHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../utils/ImageHelper */ "../../libs/shared/src/utils/ImageHelper.ts");
+/* harmony import */ var _utils_AudienceHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../utils/AudienceHelper */ "../../libs/shared/src/utils/AudienceHelper.ts");
+/* harmony import */ var _enums_Images__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../enums/Images */ "../../libs/shared/src/enums/Images.ts");
+/* harmony import */ var _components_text_Text__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../components/text/Text */ "../../libs/shared/src/components/text/Text.tsx");
+/* harmony import */ var _components_app_link_AppLink__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../components/app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
+/* harmony import */ var _components_thumbnails_base_BaseThumbnail__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../components/thumbnails/base/BaseThumbnail */ "../../libs/shared/src/components/thumbnails/base/BaseThumbnail.tsx");
+/* harmony import */ var _components_thumbnails_base_ThumbnailFallback__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../components/thumbnails/base/ThumbnailFallback */ "../../libs/shared/src/components/thumbnails/base/ThumbnailFallback.tsx");
+/* harmony import */ var _components_audience_label_AudienceLabel__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../components/audience-label/AudienceLabel */ "../../libs/shared/src/components/audience-label/AudienceLabel.tsx");
+/* harmony import */ var _PlaylistOwnerAvatar__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./PlaylistOwnerAvatar */ "../../libs/shared/src/apps/playlists/components/playlist-list/PlaylistOwnerAvatar.tsx");
+/* harmony import */ var _playlist_scss__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./playlist.scss */ "../../libs/shared/src/apps/playlists/components/playlist-list/playlist.scss");
+/* harmony import */ var _playlist_scss__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(_playlist_scss__WEBPACK_IMPORTED_MODULE_11__);
 
 
 
@@ -26,1355 +32,390 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-function ActionButton(props) {
-  var className = 'ml-2';
-  if (props.className) className += " ".concat(props.className);
-  var buttonContent = props.showSpinner ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Spinner"], {
-    as: 'span',
-    animation: 'border',
-    role: 'status',
-    size: 'sm'
-  }) : props.children;
 
-  if (props.tooltip) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_5__["Tooltip"], {
-      title: props.tooltip
-    }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_icon_button_IconButton__WEBPACK_IMPORTED_MODULE_4__["IconButton"], {
-      appLink: props.appLink,
-      svgName: props.svgName,
-      onClick: props.onClick,
-      className: className,
-      analyticsData: props.analyticsData,
-      analyticsOptions: props.analyticsOptions
-    }, buttonContent)));
-  }
-
-  if (props.svgName) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_icon_button_IconButton__WEBPACK_IMPORTED_MODULE_4__["IconButton"], {
-      onClick: props.onClick,
-      appLink: props.appLink,
-      svgName: props.svgName,
-      className: className,
-      analyticsData: props.analyticsData,
-      analyticsOptions: props.analyticsOptions
-    }, buttonContent);
-  }
-
-  if (props.appLink) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_app_link_AppLink__WEBPACK_IMPORTED_MODULE_6__["AppLink"], {
-    onClick: props.onClick,
-    appLink: props.appLink,
-    className: className,
-    analyticsData: props.analyticsData,
-    analyticsOptions: props.analyticsOptions
-  }, buttonContent);
 
-  function onClickButton(e) {
-    if (props.analyticsData && props.analyticsOptions) _analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_3__["AnalyticsHelper"].logUserAction(props.analyticsData, props.analyticsOptions);
-    if (_common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__["FunctionHelper"].isFunction(props.onClick)) props.onClick(e);
-  }
 
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("button", {
-    onClick: onClickButton,
-    className: className
-  }, buttonContent);
-}
-
-/***/ }),
-
-/***/ "../../libs/shared/src/components/actions/Actions.tsx":
-/*!************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/actions/Actions.tsx ***!
-  \************************************************************************************************/
-/*! exports provided: Actions */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Actions", function() { return Actions; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _ActionsDropdown__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./ActionsDropdown */ "../../libs/shared/src/components/actions/ActionsDropdown.tsx");
-/* harmony import */ var _ActionButton__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./ActionButton */ "../../libs/shared/src/components/actions/ActionButton.tsx");
-/* harmony import */ var _actions_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./actions.scss */ "../../libs/shared/src/components/actions/actions.scss");
-/* harmony import */ var _actions_scss__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_actions_scss__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _icon_button_IconButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../icon-button/IconButton */ "../../libs/shared/src/components/icon-button/IconButton.tsx");
 
 
+var namespace = 'playlists.playlistItem';
 
+function getBgColourClassName(playlist, classNames) {
+  var bgClassName = classNames[playlist.name.charCodeAt(0) % classNames.length];
+  return "".concat(_playlist_scss__WEBPACK_IMPORTED_MODULE_11___default.a.playlistItem, " ").concat(bgClassName);
+}
 
+function PlaylistItem(props) {
+  var _a, _b;
 
-function Actions(props) {
-  var buttonActions = [];
-  var moreActions = [];
-  props.actions.forEach(function (a) {
-    if (a.button) buttonActions.push(a);else moreActions.push(a);
+  var imageUrl = _utils_ImageHelper__WEBPACK_IMPORTED_MODULE_2__["ImageHelper"].createUrl(props.data.cover && props.data.cover.url, {
+    size: _enums_Images__WEBPACK_IMPORTED_MODULE_4__["ImageSize"].Medium,
+    resizeType: _enums_Images__WEBPACK_IMPORTED_MODULE_4__["ResizeType"].Cover
   });
-  var className = 'd-flex';
-  if (props.className) className += " ".concat(props.className);
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+  var audiences = props.data.subjectPresentationAudiences && props.data.subjectPresentationAudiences.data;
+  var filteredAudiences = audiences && props.presentationAudiences && _utils_AudienceHelper__WEBPACK_IMPORTED_MODULE_3__["AudienceHelper"].getSortedPresentationAudiences(audiences, props.presentationAudiences);
+  var mergedAudience = filteredAudiences && _utils_AudienceHelper__WEBPACK_IMPORTED_MODULE_3__["AudienceHelper"].getMergedPresentationAudienceString(filteredAudiences);
+  var count = !!props.showCount && !!props.data.videos && props.data.videos.count;
+  var lastUpdatedDate = !!props.showLastUpdated && props.data.contentModifiedDate && moment__WEBPACK_IMPORTED_MODULE_1__["utc"](props.data.contentModifiedDate);
+  var className = _playlist_scss__WEBPACK_IMPORTED_MODULE_11___default.a.playlistItem;
+  var showImage = !!imageUrl || !!props.showFallbackImage;
+  if (showImage) className += " ".concat(_playlist_scss__WEBPACK_IMPORTED_MODULE_11___default.a.playlistItemGradient);
+  if (!showImage && props.bgColourClassNames) className += " ".concat(getBgColourClassName(props.data, props.bgColourClassNames));
+  var analyticsData = Object.assign(Object.assign({}, props.analyticsData), {
+    id: (_a = props.data) === null || _a === void 0 ? void 0 : _a.id,
+    name: (_b = props.data) === null || _b === void 0 ? void 0 : _b.name
+  });
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_text_Text__WEBPACK_IMPORTED_MODULE_5__["LanguageNamespaceContext"].Provider, {
+    value: namespace
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_app_link_AppLink__WEBPACK_IMPORTED_MODULE_6__["AppLink"], {
+    appLink: props.appLink,
+    analyticsData: analyticsData,
+    analyticsOptions: props.analyticsOptions
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_thumbnails_base_BaseThumbnail__WEBPACK_IMPORTED_MODULE_7__["BaseThumbnail"], {
+    data: imageUrl,
     className: className
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, !!buttonActions.length && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
-    className: _actions_scss__WEBPACK_IMPORTED_MODULE_3___default.a.buttonList
-  }, buttonActions.map(function (a, idx) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], {
-      key: idx
-    }, a.label ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_ActionButton__WEBPACK_IMPORTED_MODULE_2__["ActionButton"], {
-      appLink: a.appLink,
-      onClick: a.onClick,
-      svgName: a.svgName,
-      className: a.className,
-      tooltip: a.tooltip,
-      showSpinner: a.showSpinner,
-      analyticsData: a.analyticsData,
-      analyticsOptions: a.analyticsOptions
-    }, a.label) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_icon_button_IconButton__WEBPACK_IMPORTED_MODULE_4__["IconButton"], {
-      appLink: a.appLink,
-      onClick: a.onClick,
-      svgName: a.svgName,
-      className: a.className,
-      analyticsData: a.analyticsData,
-      analyticsOptions: a.analyticsOptions
-    }));
-  })), props.sortComponent ? props.sortComponent : '', !!moreActions.length && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_ActionsDropdown__WEBPACK_IMPORTED_MODULE_1__["ActionsDropdown"], {
-    actions: moreActions,
-    className: !!buttonActions.length && 'ml-2',
-    dropdownToggleClassName: props.actionsDropdownClassName
-  })));
+  }, !!props.showFallbackImage && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_thumbnails_base_ThumbnailFallback__WEBPACK_IMPORTED_MODULE_8__["ThumbnailFallback"], {
+    type: _components_thumbnails_base_ThumbnailFallback__WEBPACK_IMPORTED_MODULE_8__["ThumbnailFallbackType"].Playlist
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "text-white ".concat(_playlist_scss__WEBPACK_IMPORTED_MODULE_11___default.a.playlistMetadata)
+  }, Number.isInteger(count) && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_text_Text__WEBPACK_IMPORTED_MODULE_5__["Text"], {
+    phrase: 'videos',
+    options: {
+      smartCount: count
+    }
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("h5", {
+    className: "".concat(_playlist_scss__WEBPACK_IMPORTED_MODULE_11___default.a.playlistName, " text-shadow mb-0")
+  }, props.data.name), function () {
+    if (!lastUpdatedDate) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
+    if (lastUpdatedDate.isBefore(moment__WEBPACK_IMPORTED_MODULE_1__["utc"]().subtract(1, 'month'))) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_text_Text__WEBPACK_IMPORTED_MODULE_5__["Text"], {
+      phrase: 'notUpdatedRecently'
+    });
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_text_Text__WEBPACK_IMPORTED_MODULE_5__["Text"], {
+      phrase: 'lastUpdated',
+      options: {
+        timeAgo: lastUpdatedDate.fromNow()
+      }
+    });
+  }(), !!audiences && !!audiences.length && !!mergedAudience && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_audience_label_AudienceLabel__WEBPACK_IMPORTED_MODULE_9__["AudienceLabel"], {
+    audience: mergedAudience,
+    border: 'white'
+  })), !!props.showOwner && !!props.imageCdnUrl && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: _playlist_scss__WEBPACK_IMPORTED_MODULE_11___default.a.ownerAvatarContainer
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_PlaylistOwnerAvatar__WEBPACK_IMPORTED_MODULE_10__["PlaylistOwnerAvatar"], {
+    playlist: props.data,
+    currentUser: props.currentUser,
+    imageCdnUrl: props.imageCdnUrl
+  })))));
 }
 
 /***/ }),
 
-/***/ "../../libs/shared/src/components/actions/ActionsDropdown.tsx":
-/*!********************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/actions/ActionsDropdown.tsx ***!
-  \********************************************************************************************************/
-/*! exports provided: ActionsDropdown */
+/***/ "../../libs/shared/src/apps/playlists/components/playlist-list/PlaylistOwnerAvatar.tsx":
+/*!*********************************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/playlists/components/playlist-list/PlaylistOwnerAvatar.tsx ***!
+  \*********************************************************************************************************************************/
+/*! exports provided: PlaylistOwnerAvatar */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ActionsDropdown", function() { return ActionsDropdown; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PlaylistOwnerAvatar", function() { return PlaylistOwnerAvatar; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-bootstrap */ "react-bootstrap");
-/* harmony import */ var react_bootstrap__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_bootstrap__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _common_src_react_utils_RandomHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../common/src/react/utils/RandomHelper */ "../../libs/common/src/react/utils/RandomHelper.ts");
-/* harmony import */ var _analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../analytics/src/AnalyticsHelper */ "../../libs/analytics/src/AnalyticsHelper.ts");
-/* harmony import */ var _svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../svg-container/SvgContainer */ "../../libs/shared/src/components/svg-container/SvgContainer.tsx");
-/* harmony import */ var _app_link_AppLink__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
-/* harmony import */ var _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
-/* harmony import */ var _actions_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./actions.scss */ "../../libs/shared/src/components/actions/actions.scss");
-/* harmony import */ var _actions_scss__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_actions_scss__WEBPACK_IMPORTED_MODULE_7__);
-/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
-
+/* harmony import */ var _components_avatar_Avatar__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../components/avatar/Avatar */ "../../libs/shared/src/components/avatar/Avatar.tsx");
+/* harmony import */ var _utils_UserHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../utils/UserHelper */ "../../libs/shared/src/utils/UserHelper.ts");
+/* harmony import */ var _components_clickview_avatar_ClickViewAvatar__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../components/clickview-avatar/ClickViewAvatar */ "../../libs/shared/src/components/clickview-avatar/ClickViewAvatar.tsx");
 
 
 
 
+function PlaylistOwnerAvatar(props) {
+  var _a, _b;
 
+  var owner = props.playlist.owner;
+  if (!owner || !props.currentUser) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
+  var currentUserIsOwner = props.playlist.owner.id === props.currentUser.id; // TODO: Replace this with actual property.
 
-
-
-
-function getDropdownItemClassName(actionClassName) {
-  var className = 'dropdown-item';
-  if (actionClassName) className += " ".concat(actionClassName);
-  return className;
-}
-
-function ActionsDropdownItem(props) {
-  if (props.action.appLink) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_app_link_AppLink__WEBPACK_IMPORTED_MODULE_5__["AppLink"], {
-    appLink: props.action.appLink,
-    onClick: props.action.onClick,
-    className: getDropdownItemClassName(props.action.className),
-    analyticsData: props.action.analyticsData,
-    analyticsOptions: props.action.analyticsOptions
-  }, props.action.label);
-
-  function onClick(e) {
-    if (props.action.analyticsData && props.action.analyticsOptions) _analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_3__["AnalyticsHelper"].logUserAction(props.action.analyticsData, props.action.analyticsOptions);
-    if (_common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_8__["FunctionHelper"].isFunction(props.action.onClick)) props.action.onClick(e);
-  }
-
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
-    className: "cursor-pointer ".concat(getDropdownItemClassName(props.action.className)),
-    onClick: onClick
-  }, props.action.label);
-}
-
-ActionsDropdown.defaultProps = {
-  dropdownToggleClassName: 'btn btn-light'
-};
-function ActionsDropdown(props) {
-  if (!props.actions || !props.actions.length) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null); // Generate unique id to avoid collisions.
-
-  var dropdownToggleId = "actions-dropdown-".concat(_common_src_react_utils_RandomHelper__WEBPACK_IMPORTED_MODULE_2__["RandomHelper"].getRandomInt());
-  var dropdownToggleClassName = "px-0 ".concat(_actions_scss__WEBPACK_IMPORTED_MODULE_7___default.a.dropdownToggle);
-  if (props.dropdownToggleClassName) dropdownToggleClassName += " ".concat(props.dropdownToggleClassName);
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Dropdown"], {
-    className: props.className ? props.className : '',
-    alignRight: true
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Dropdown"].Toggle, {
-    as: 'button',
-    type: 'button',
-    id: dropdownToggleId,
-    className: dropdownToggleClassName
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_4__["SvgContainer"], {
-    svgName: _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_6__["cvSvgLibrary"].More,
-    size: _svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_4__["SvgContainerSize"].Small
-  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_bootstrap__WEBPACK_IMPORTED_MODULE_1__["Dropdown"].Menu, null, props.actions.map(function (a, idx) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ActionsDropdownItem, {
-      key: idx,
-      action: a
-    });
-  })));
+  var isClickViewPlaylist = !!((_a = props.playlist.cover) === null || _a === void 0 ? void 0 : _a.url);
+  if (isClickViewPlaylist) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_clickview_avatar_ClickViewAvatar__WEBPACK_IMPORTED_MODULE_3__["ClickViewAvatar"], null);
+  if (currentUserIsOwner) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
+  var url = typeof owner.avatar === 'string' ? owner.avatar : (_b = owner.avatar) === null || _b === void 0 ? void 0 : _b.url;
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_avatar_Avatar__WEBPACK_IMPORTED_MODULE_1__["Avatar"], {
+    imageUrl: url,
+    imageCdnUrl: props.imageCdnUrl,
+    initials: _utils_UserHelper__WEBPACK_IMPORTED_MODULE_2__["UserHelper"].getInitials(owner.name, owner.surname)
+  });
 }
 
 /***/ }),
 
-/***/ "../../libs/shared/src/components/actions/actions.scss":
-/*!*************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/actions/actions.scss ***!
-  \*************************************************************************************************/
+/***/ "../../libs/shared/src/apps/playlists/components/playlist-list/playlist.scss":
+/*!***********************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/playlists/components/playlist-list/playlist.scss ***!
+  \***********************************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"buttonList":"cv--buttonList--2v9CT","dropdownToggle":"cv--dropdownToggle--AYBvQ"};
+module.exports = {"playlistItem":"cv--playlistItem--6o0Z2","playlistItemGradient":"cv--playlistItemGradient--2JLPt","playlistMetadata":"cv--playlistMetadata--3MCKL","playlistName":"cv--playlistName--1Ukz7","partialHeading":"cv--partialHeading--13tO6","ownerAvatarContainer":"cv--ownerAvatarContainer--CwjTl"};
 
 /***/ }),
 
-/***/ "../../libs/shared/src/components/div-button/DivButton.tsx":
-/*!*****************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/div-button/DivButton.tsx ***!
-  \*****************************************************************************************************/
-/*! exports provided: DivButton */
+/***/ "../../libs/shared/src/components/audience-label/AudienceLabel.tsx":
+/*!*************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/audience-label/AudienceLabel.tsx ***!
+  \*************************************************************************************************************/
+/*! exports provided: AudienceLabel, AudienceLabelList */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "DivButton", function() { return DivButton; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AudienceLabel", function() { return AudienceLabel; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AudienceLabelList", function() { return AudienceLabelList; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _audience_label_scss__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./audience-label.scss */ "../../libs/shared/src/components/audience-label/audience-label.scss");
+/* harmony import */ var _audience_label_scss__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_audience_label_scss__WEBPACK_IMPORTED_MODULE_1__);
 
-/**
- * This element lets us use `div` elements as buttons without losing the accessibility of
- * a regular HTML button element
- */
 
-function DivButton(props) {
+function AudienceLabel(props) {
+  if (!props.audience) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
   return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    role: 'button',
-    tabIndex: 0,
-    className: "".concat(props.className ? props.className : '', " cursor-pointer"),
-    onKeyDown: function onKeyDown(e) {
-      return e.key === 'Enter' && props.onClick(e);
-    },
-    onClick: props.onClick,
-    style: props.style ? props.style : {}
-  }, props.children);
-}
-
-/***/ }),
-
-/***/ "../../libs/shared/src/components/tags/TagItem.tsx":
-/*!*********************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/tags/TagItem.tsx ***!
-  \*********************************************************************************************/
-/*! exports provided: TagItem */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TagItem", function() { return TagItem; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _app_link_AppLink__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
-/* harmony import */ var _tags_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./tags.scss */ "../../libs/shared/src/components/tags/tags.scss");
-/* harmony import */ var _tags_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_tags_scss__WEBPACK_IMPORTED_MODULE_2__);
-
-
-
-function TagItem(_ref) {
-  var tag = _ref.tag,
-      appLink = _ref.appLink,
-      disabled = _ref.disabled;
-  var classNames = 'badge-pill tag py-1 px-2 my-1 mr-1';
-  if (appLink && !disabled) classNames += ' cursor-pointer';
-  if (disabled) classNames += ' ' + _tags_scss__WEBPACK_IMPORTED_MODULE_2___default.a.disabled;
-  return appLink ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_app_link_AppLink__WEBPACK_IMPORTED_MODULE_1__["AppLink"], {
-    appLink: appLink,
-    className: classNames
-  }, tag.name) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
-    className: classNames
-  }, tag.name);
+    className: "border rounded-pill d-inline-block px-2 mt-1 ".concat('border-' + props.border)
+  }, props.audience.name);
 }
-
-/***/ }),
-
-/***/ "../../libs/shared/src/components/tags/TagList.tsx":
-/*!*********************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/tags/TagList.tsx ***!
-  \*********************************************************************************************/
-/*! exports provided: TagList */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "TagList", function() { return TagList; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
-/* harmony import */ var _TagItem__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./TagItem */ "../../libs/shared/src/components/tags/TagItem.tsx");
-/* harmony import */ var _tags_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./tags.scss */ "../../libs/shared/src/components/tags/tags.scss");
-/* harmony import */ var _tags_scss__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_tags_scss__WEBPACK_IMPORTED_MODULE_3__);
-
-
-
-
-function TagList(_ref) {
-  var tags = _ref.tags,
-      getAppLink = _ref.getAppLink;
-  if (!tags || !tags.data) return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null);
-  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: _tags_scss__WEBPACK_IMPORTED_MODULE_3___default.a.tagList
-  }, tags.data.map(function (tag) {
-    var appLink = _common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_1__["FunctionHelper"].isFunction(getAppLink) ? getAppLink(tag) : null;
-    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_TagItem__WEBPACK_IMPORTED_MODULE_2__["TagItem"], {
-      key: tag.id,
-      tag: tag,
-      appLink: appLink
-    });
+function AudienceLabelList(props) {
+  if (!props.audiences || !props.audiences.length) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, props.audiences.map(function (a, idx) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
+      key: idx,
+      className: _audience_label_scss__WEBPACK_IMPORTED_MODULE_1___default.a.audienceLabelListItem
+    }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](AudienceLabel, {
+      audience: a,
+      border: props.border
+    }));
   }));
 }
 
 /***/ }),
 
-/***/ "../../libs/shared/src/components/tags/tags.scss":
-/*!*******************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/tags/tags.scss ***!
-  \*******************************************************************************************/
+/***/ "../../libs/shared/src/components/audience-label/audience-label.scss":
+/*!***************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/audience-label/audience-label.scss ***!
+  \***************************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"tagList":"cv--tagList--yvetE","disabled":"cv--disabled--3ZfKv"};
+module.exports = {"audienceLabelListItem":"cv--audienceLabelListItem--2YGVO"};
 
 /***/ }),
 
-/***/ "../../libs/shared/src/components/video-owner-text/VideoOwnerText.tsx":
-/*!****************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/video-owner-text/VideoOwnerText.tsx ***!
-  \****************************************************************************************************************/
-/*! exports provided: VideoOwnerText */
+/***/ "../../libs/shared/src/components/clickview-avatar/ClickViewAvatar.tsx":
+/*!*****************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/clickview-avatar/ClickViewAvatar.tsx ***!
+  \*****************************************************************************************************************/
+/*! exports provided: ClickViewAvatar */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VideoOwnerText", function() { return VideoOwnerText; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ClickViewAvatar", function() { return ClickViewAvatar; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _svgs_clickview_logo_ClickViewLogo__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../svgs/clickview-logo/ClickViewLogo */ "../../libs/shared/src/components/svgs/clickview-logo/ClickViewLogo.tsx");
+/* harmony import */ var _clickview_avatar_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./clickview-avatar.scss */ "../../libs/shared/src/components/clickview-avatar/clickview-avatar.scss");
+/* harmony import */ var _clickview_avatar_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_clickview_avatar_scss__WEBPACK_IMPORTED_MODULE_2__);
 
-function VideoOwnerText(props) {
-  var _a, _b, _c, _d;
-
-  if (!props.owner) return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null);
-  var name = props.owner.name;
-  if (props.owner.surname) name += " ".concat(props.owner.surname.substr(0, 1)).toUpperCase();
-  var customer = (_b = (_a = props.owner.customers) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b[0];
-  var customerName = (_d = (_c = customer) === null || _c === void 0 ? void 0 : _c.name, _d !== null && _d !== void 0 ? _d : '');
-  if (customerName) name += ', ';
-  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("small", {
-    className: 'clamp-1'
-  }, name, customerName && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("em", null, customerName), customerName === 'ClickView' && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, "CV Icon"));
-}
-
-/***/ }),
-
-/***/ "../../libs/shared/src/components/widgets/fixed-widget/index.ts":
-/*!**********************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/fixed-widget/index.ts ***!
-  \**********************************************************************************************************/
-/*! exports provided: FixedWidget, initialWidgetState, FixedWidgetReducer, lazyWidgetInit, PartialFixedWidget */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _FixedWidget__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./FixedWidget */ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidget.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FixedWidget", function() { return _FixedWidget__WEBPACK_IMPORTED_MODULE_0__["FixedWidget"]; });
-
-/* harmony import */ var _FixedWidgetReducer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./FixedWidgetReducer */ "../../libs/shared/src/components/widgets/fixed-widget/FixedWidgetReducer.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "initialWidgetState", function() { return _FixedWidgetReducer__WEBPACK_IMPORTED_MODULE_1__["initialWidgetState"]; });
-
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "FixedWidgetReducer", function() { return _FixedWidgetReducer__WEBPACK_IMPORTED_MODULE_1__["FixedWidgetReducer"]; });
 
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "lazyWidgetInit", function() { return _FixedWidgetReducer__WEBPACK_IMPORTED_MODULE_1__["lazyWidgetInit"]; });
-
-/* harmony import */ var _PartialFixedWidget__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./PartialFixedWidget */ "../../libs/shared/src/components/widgets/fixed-widget/PartialFixedWidget.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PartialFixedWidget", function() { return _PartialFixedWidget__WEBPACK_IMPORTED_MODULE_2__["PartialFixedWidget"]; });
-
-
-
-
-
-/***/ }),
-
-/***/ "../../libs/shared/src/components/widgets/items/clip-widget-item/ClipWidgetItem.tsx":
-/*!******************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/items/clip-widget-item/ClipWidgetItem.tsx ***!
-  \******************************************************************************************************************************/
-/*! exports provided: ClipWidgetItem */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ClipWidgetItem", function() { return ClipWidgetItem; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _app_link_AppLink__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
-/* harmony import */ var _thumbnails_video_VideoThumbnail__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../thumbnails/video/VideoThumbnail */ "../../libs/shared/src/components/thumbnails/video/VideoThumbnail.tsx");
-/* harmony import */ var _enums_ThumbnailSize__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../enums/ThumbnailSize */ "../../libs/shared/src/enums/ThumbnailSize.ts");
-/* harmony import */ var _enums_ThumbnailTextPosition__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../enums/ThumbnailTextPosition */ "../../libs/shared/src/enums/ThumbnailTextPosition.ts");
-/* harmony import */ var _video_owner_text_VideoOwnerText__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../video-owner-text/VideoOwnerText */ "../../libs/shared/src/components/video-owner-text/VideoOwnerText.tsx");
-/* harmony import */ var _clip_widget_item_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./clip-widget-item.scss */ "../../libs/shared/src/components/widgets/items/clip-widget-item/clip-widget-item.scss");
-/* harmony import */ var _clip_widget_item_scss__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_clip_widget_item_scss__WEBPACK_IMPORTED_MODULE_6__);
-
-
-
-
-
-
-
-var ClipWidgetItem = react__WEBPACK_IMPORTED_MODULE_0___default.a.memo(function (props) {
-  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: "flex-shrink-0 px-1 ".concat(_clip_widget_item_scss__WEBPACK_IMPORTED_MODULE_6___default.a.item)
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: 'row m-0 border rounded p-2 h-100'
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: 'col-6 p-0'
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_thumbnails_video_VideoThumbnail__WEBPACK_IMPORTED_MODULE_2__["VideoThumbnail"], {
-    video: props.video,
-    appLink: props.appLink,
-    type: 'static',
-    videoType: 'clip',
-    clip: props.data,
-    size: _enums_ThumbnailSize__WEBPACK_IMPORTED_MODULE_3__["ThumbnailSize"].Small,
-    textPosition: _enums_ThumbnailTextPosition__WEBPACK_IMPORTED_MODULE_4__["ThumbnailTextPosition"].Independent,
-    preload: true
-  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: 'col-6 p-0'
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: 'pl-3'
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_app_link_AppLink__WEBPACK_IMPORTED_MODULE_1__["AppLink"], {
-    appLink: props.appLink
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h3", {
-    className: 'h6 mb-1 clamp-2'
-  }, props.data.name)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_video_owner_text_VideoOwnerText__WEBPACK_IMPORTED_MODULE_5__["VideoOwnerText"], {
-    owner: props.data.owner
-  })))));
-});
-
-/***/ }),
-
-/***/ "../../libs/shared/src/components/widgets/items/clip-widget-item/clip-widget-item.scss":
-/*!*********************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/items/clip-widget-item/clip-widget-item.scss ***!
-  \*********************************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-module.exports = {"item":"cv--item--pYl_b","thumbnail":"cv--thumbnail--92H1z","smallItemIconWidth":"cv--smallItemIconWidth--3DbAB","smallItemInfoWidth":"cv--smallItemInfoWidth--1D2_c","smallProgressBarContainer":"cv--smallProgressBarContainer--1gwy8","smallItemNameWidth":"cv--smallItemNameWidth--3TPSf"};
-
-/***/ }),
-
-/***/ "../../libs/shared/src/components/widgets/items/interactive-widget-item/InteractiveWidgetItem.tsx":
-/*!********************************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/items/interactive-widget-item/InteractiveWidgetItem.tsx ***!
-  \********************************************************************************************************************************************/
-/*! exports provided: InteractiveWidgetItem */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "InteractiveWidgetItem", function() { return InteractiveWidgetItem; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _app_link_AppLink__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
-/* harmony import */ var _thumbnails_video_VideoThumbnail__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../thumbnails/video/VideoThumbnail */ "../../libs/shared/src/components/thumbnails/video/VideoThumbnail.tsx");
-/* harmony import */ var _enums_ThumbnailSize__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../enums/ThumbnailSize */ "../../libs/shared/src/enums/ThumbnailSize.ts");
-/* harmony import */ var _enums_ThumbnailTextPosition__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../enums/ThumbnailTextPosition */ "../../libs/shared/src/enums/ThumbnailTextPosition.ts");
-/* harmony import */ var _text_Text__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../text/Text */ "../../libs/shared/src/components/text/Text.tsx");
-/* harmony import */ var _video_owner_text_VideoOwnerText__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../video-owner-text/VideoOwnerText */ "../../libs/shared/src/components/video-owner-text/VideoOwnerText.tsx");
-/* harmony import */ var _interactive_widget_item_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./interactive-widget-item.scss */ "../../libs/shared/src/components/widgets/items/interactive-widget-item/interactive-widget-item.scss");
-/* harmony import */ var _interactive_widget_item_scss__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_interactive_widget_item_scss__WEBPACK_IMPORTED_MODULE_7__);
-
-
-
-
-
-
-
-
-var namespace = 'shared.interactiveWidgetItem';
-var InteractiveWidgetItem = react__WEBPACK_IMPORTED_MODULE_0___default.a.memo(function (props) {
-  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: "flex-shrink-0 px-1 ".concat(_interactive_widget_item_scss__WEBPACK_IMPORTED_MODULE_7___default.a.item)
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: 'row m-0 border rounded p-2 h-100'
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: 'col-6 p-0'
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_thumbnails_video_VideoThumbnail__WEBPACK_IMPORTED_MODULE_2__["VideoThumbnail"], {
-    video: props.video,
-    interactive: props.data,
-    appLink: props.appLink,
-    type: 'static',
-    videoType: 'interactive',
-    size: _enums_ThumbnailSize__WEBPACK_IMPORTED_MODULE_3__["ThumbnailSize"].Small,
-    textPosition: _enums_ThumbnailTextPosition__WEBPACK_IMPORTED_MODULE_4__["ThumbnailTextPosition"].Independent,
-    preload: true
-  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: 'col-6 p-0'
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: 'pl-3'
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_app_link_AppLink__WEBPACK_IMPORTED_MODULE_1__["AppLink"], {
-    appLink: props.appLink
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h3", {
-    className: 'h6 mb-1 clamp-2'
-  }, props.data.name)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_video_owner_text_VideoOwnerText__WEBPACK_IMPORTED_MODULE_6__["VideoOwnerText"], {
-    owner: props.data.owner
-  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_app_link_AppLink__WEBPACK_IMPORTED_MODULE_1__["AppLink"], {
-    className: 'info-link',
-    appLink: props.appLink
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_text_Text__WEBPACK_IMPORTED_MODULE_5__["Text"], {
-    namespace: namespace,
-    phrase: 'previewQuestions'
-  }))))));
-});
-
-/***/ }),
-
-/***/ "../../libs/shared/src/components/widgets/items/interactive-widget-item/interactive-widget-item.scss":
-/*!***********************************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/items/interactive-widget-item/interactive-widget-item.scss ***!
-  \***********************************************************************************************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-module.exports = {"item":"cv--item--2An5o","thumbnail":"cv--thumbnail--Wvc5s","smallItemIconWidth":"cv--smallItemIconWidth--2IdDd","smallItemInfoWidth":"cv--smallItemInfoWidth--1Iat7","smallProgressBarContainer":"cv--smallProgressBarContainer--17I8T"};
-
-/***/ }),
-
-/***/ "./src/shared/components/immersive-reader/ImmersiveReader.tsx":
-/*!********************************************************************!*\
-  !*** ./src/shared/components/immersive-reader/ImmersiveReader.tsx ***!
-  \********************************************************************/
-/*! exports provided: ImmersiveReader */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ImmersiveReader", function() { return ImmersiveReader; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _microsoft_immersive_reader_sdk__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @microsoft/immersive-reader-sdk */ "@microsoft/immersive-reader-sdk");
-/* harmony import */ var _microsoft_immersive_reader_sdk__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_microsoft_immersive_reader_sdk__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _libs_common_src_react__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../libs/common/src/react */ "../../libs/common/src/react/index.ts");
-/* harmony import */ var _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../libs/common/src/backbone/services/LanguageService */ "../../libs/common/src/backbone/services/LanguageService.tsx");
-/* harmony import */ var _libs_shared_src_flight_requests_ConfigRequests__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../libs/shared/src/flight-requests/ConfigRequests */ "../../libs/shared/src/flight-requests/ConfigRequests.ts");
-/* harmony import */ var _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../../libs/analytics/src/AnalyticsHelper */ "../../libs/analytics/src/AnalyticsHelper.ts");
-/* harmony import */ var _immersive_reader_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./immersive-reader.scss */ "./src/shared/components/immersive-reader/immersive-reader.scss");
-/* harmony import */ var _immersive_reader_scss__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_immersive_reader_scss__WEBPACK_IMPORTED_MODULE_6__);
-
-
-
-
-
-
-
-var namespace = 'shared.immersiveReader';
-function ImmersiveReader(props) {
-  var config = _libs_common_src_react__WEBPACK_IMPORTED_MODULE_2__["Flight"].useBasicFetch(_libs_shared_src_flight_requests_ConfigRequests__WEBPACK_IMPORTED_MODULE_4__["ConfigRequests"].config);
-  var immersiveReaderResponse = _libs_common_src_react__WEBPACK_IMPORTED_MODULE_2__["Flight"].useBasicFetch({
-    url: '/api/integrations/token/immersive-reader',
-    key: 'immersive:reader:token'
-  });
-  if (!config.data || !immersiveReaderResponse.data) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
-  if (!props.title) props.title = _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_3__["LanguageService"].getPhrase(namespace, 'titleFallback');
-
-  function launchImmersiveReader() {
-    _libs_analytics_src_AnalyticsHelper__WEBPACK_IMPORTED_MODULE_5__["AnalyticsHelper"].logUserAction(props.analyticsData, props.analyticsOptions);
-    var content = {
-      title: props.title,
-      chunks: [{
-        content: props.text
-      }]
-    };
-    var _immersiveReaderRespo = immersiveReaderResponse.data,
-        subdomain = _immersiveReaderRespo.subdomain,
-        token = _immersiveReaderRespo.token;
-    var options = {
-      uiZIndex: 5000 // Should always appear above our content
-
-    };
-    _microsoft_immersive_reader_sdk__WEBPACK_IMPORTED_MODULE_1__["launchAsync"](token, subdomain, content, options);
-  }
 
+function ClickViewAvatar() {
   return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "".concat(_immersive_reader_scss__WEBPACK_IMPORTED_MODULE_6___default.a.button, " ").concat(props.className || ''),
-    onClick: launchImmersiveReader
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("svg", {
-    viewBox: '0 0 40 37'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("path", {
-    d: 'M37.4,0.9 L37.4,9.6 L35.4,9.6 L35.4,2.9 L24.4,2.9 C22.9,3.3 20,4.5 20,6 L20,17.2 L18,17.2 L18,6 C18,5 15.6,3.6 13.8,2.9 L2,2.9 L2,29 L12.4,29 L12.4,31 L0,31 L0,0.9 L14.1,0.9 L14.3,1 C15,1.2 17.5,2.2 18.9,3.7 C20.5,1.9 23.5,1.1 23.9,1 L24.1,1 L37.4,1 L37.4,0.9 Z',
-    fill: '#000000'
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("path", {
-    d: 'M27.4,37 L25.8,37 L18.4,29.4 L14,29.4 L14,21 L18.4,20.9 L26.1,13 L27.4,13 L27.4,37 Z M16,27.4 L19.2,27.4 L25.3,33.7 L25.3,16.6 L19.2,22.9 L15.9,22.9 L15.9,27.4 L16,27.4 Z',
-    fill: '#0197F2'
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("path", {
-    d: 'M31.3,32.7 L29.6,31.7 C29.6,31.7 31.7,28.3 31.7,25.2 C31.7,21.9 29.6,18.5 29.6,18.4 L31.3,17.4 C31.4,17.6 33.7,21.3 33.7,25.2 C33.7,28.8 31.4,32.6 31.3,32.7 Z',
-    fill: '#0197F2'
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("path", {
-    d: 'M36.4,36.2 L34.8,35 C34.8,35 38,30.8 38,25.2 C38,19.6 34.8,15.4 34.8,15.4 L36.4,14.2 C36.5,14.4 40,19 40,25.3 C40,31.5 36.5,36 36.4,36.2 Z',
-    fill: '#0197F2'
-  })));
+    className: _clickview_avatar_scss__WEBPACK_IMPORTED_MODULE_2__["avatar"]
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_svgs_clickview_logo_ClickViewLogo__WEBPACK_IMPORTED_MODULE_1__["ClickViewPlayLogo"], null));
 }
 
 /***/ }),
 
-/***/ "./src/shared/components/immersive-reader/immersive-reader.scss":
-/*!**********************************************************************!*\
-  !*** ./src/shared/components/immersive-reader/immersive-reader.scss ***!
-  \**********************************************************************/
+/***/ "../../libs/shared/src/components/clickview-avatar/clickview-avatar.scss":
+/*!*******************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/clickview-avatar/clickview-avatar.scss ***!
+  \*******************************************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"button":"cv--button--10_KK"};
+module.exports = {"avatar":"cv--avatar--1IfFN"};
 
 /***/ }),
 
-/***/ "./src/shared/components/play-page/PlayPage.tsx":
-/*!******************************************************!*\
-  !*** ./src/shared/components/play-page/PlayPage.tsx ***!
-  \******************************************************/
-/*! exports provided: onUpdateViewport, PlayPage */
+/***/ "../../libs/shared/src/utils/AudienceHelper.ts":
+/*!*****************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/utils/AudienceHelper.ts ***!
+  \*****************************************************************************************/
+/*! exports provided: AudienceHelper */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "onUpdateViewport", function() { return onUpdateViewport; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PlayPage", function() { return PlayPage; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _libs_common_src_react_hooks_useViewModel__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../libs/common/src/react/hooks/useViewModel */ "../../libs/common/src/react/hooks/useViewModel.ts");
-/* harmony import */ var _libs_common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../libs/common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
-/* harmony import */ var _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../libs/common/src/backbone/services/LanguageService */ "../../libs/common/src/backbone/services/LanguageService.tsx");
-/* harmony import */ var _libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/text/Text */ "../../libs/shared/src/components/text/Text.tsx");
-/* harmony import */ var _libs_shared_src_components_actions_Actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/actions/Actions */ "../../libs/shared/src/components/actions/Actions.tsx");
-/* harmony import */ var _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../../../libs/shared/src/utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
-/* harmony import */ var _libs_shared_src_hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../../../libs/shared/src/hooks/UseGetMediaQueryString */ "../../libs/shared/src/hooks/UseGetMediaQueryString.ts");
-/* harmony import */ var _libs_shared_src_enums_MediaQueries__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../../../libs/shared/src/enums/MediaQueries */ "../../libs/shared/src/enums/MediaQueries.ts");
-/* harmony import */ var _libs_shared_src_components_widgets_fixed_widget__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/widgets/fixed-widget */ "../../libs/shared/src/components/widgets/fixed-widget/index.ts");
-/* harmony import */ var _libs_shared_src_enums_WidgetContents__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../../../../libs/shared/src/enums/WidgetContents */ "../../libs/shared/src/enums/WidgetContents.ts");
-/* harmony import */ var _libs_shared_src_components_widgets_items_interactive_widget_item_InteractiveWidgetItem__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/widgets/items/interactive-widget-item/InteractiveWidgetItem */ "../../libs/shared/src/components/widgets/items/interactive-widget-item/InteractiveWidgetItem.tsx");
-/* harmony import */ var _libs_shared_src_components_widgets_items_clip_widget_item_ClipWidgetItem__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/widgets/items/clip-widget-item/ClipWidgetItem */ "../../libs/shared/src/components/widgets/items/clip-widget-item/ClipWidgetItem.tsx");
-/* harmony import */ var shared_components_resources_Resources__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! shared/components/resources/Resources */ "./src/shared/components/resources/Resources.tsx");
-/* harmony import */ var shared_components_video_details_VideoDetails__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! shared/components/video-details/VideoDetails */ "./src/shared/components/video-details/VideoDetails.tsx");
-/* harmony import */ var shared_hooks_useWindowListeners__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! shared/hooks/useWindowListeners */ "./src/shared/hooks/useWindowListeners.ts");
-/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
-/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
-/* harmony import */ var shared_constants_LiteViewModels__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! shared/constants/LiteViewModels */ "./src/shared/constants/LiteViewModels.ts");
-/* harmony import */ var shared_components_synopsis_Synopsis__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! shared/components/synopsis/Synopsis */ "./src/shared/components/synopsis/Synopsis.tsx");
-/* harmony import */ var _VideoTitle__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! ./VideoTitle */ "./src/shared/components/play-page/VideoTitle.tsx");
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "AudienceHelper", function() { return AudienceHelper; });
+/* harmony import */ var _common_src_react_utils_ArrayHelper__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../common/src/react/utils/ArrayHelper */ "../../libs/common/src/react/utils/ArrayHelper.ts");
 
+var DIGIT_REGEX = /([0-9]+)/ig;
+var NAME_REGEX = /(^\w+)/ig;
+var COUNT_OFFSET = 1;
 
-
-
-
-
-var namespace = 'shared.playPage';
-var getPhrase = _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_3__["LanguageService"].encloseNamespace(namespace); // TODO: Add analytics to these actions
-
-var getActions = function getActions(video, isMobile) {
-  return [{
-    label: getPhrase('makeInteractive'),
-    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_6__["cvSvgLibrary"].Plus,
-    className: !isMobile ? 'btn btn-light ml-2' : '',
-    button: !isMobile
-  }, {
-    label: getPhrase('addToPlaylist'),
-    appLink: {
-      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_17__["AppChannels"].PLAYLISTS,
-      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_16__["Actions"].Playlists.ADD_TO_PLAYLIST,
-      args: [video.id]
-    },
-    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_6__["cvSvgLibrary"].AddToPlaylists,
-    className: !isMobile ? 'btn btn-light ml-2' : '',
-    button: !isMobile
-  }, {
-    label: getPhrase('share'),
-    appLink: {
-      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_17__["AppChannels"].DEFAULT,
-      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_16__["Actions"].Default.SHARE,
-      args: [video.id],
-      params: {
-        entityType: 'video'
-      }
-    },
-    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_6__["cvSvgLibrary"].Share2,
-    className: !isMobile ? 'btn btn-light ml-2' : '',
-    button: !isMobile
-  }, {
-    label: getPhrase('createClip') // TODO: Add appLink
-
-  }, {
-    label: getPhrase('viewCurriculumLinks') // TODO: Add appLink
-
-  }];
-};
-
-function onUpdateViewport(playerRef, setPlayerData) {
-  if (!playerRef.current) return;
-  var rect = playerRef.current.getBoundingClientRect();
-  var left = window.pageXOffset || document.documentElement.scrollLeft;
-  var top = window.pageYOffset || document.documentElement.scrollTop;
+function processAudienceRanges(audienceValues) {
   /**
-   * Only show floating player
-   * if the normal player is no longer in view
+   * Lookahead by increments of offset
    */
+  var offset = COUNT_OFFSET;
+  var initialVal, nextVal;
+  var isContinguous = false;
+  var ranges = []; // Audience values need to be in ascending order
 
-  if (rect.top < -rect.height) {
-    setPlayerData('viewportPosition', null);
-    return;
-  }
-
-  setPlayerData('viewportPosition', {
-    top: top + rect.top,
-    left: left + rect.left,
-    width: rect.width
+  audienceValues = audienceValues.sort(function (a, b) {
+    return a - b;
   });
-}
-function PlayPage(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
-
-  var video = props.video,
-      glanceTheme = props.glanceTheme;
-  var hasGlanceData = ((_a = video.glance) === null || _a === void 0 ? void 0 : _a.content) && video.glance.format === 'text/markdown';
-  var rating = video.rating,
-      productionYear = video.productionYear,
-      interactives = video.interactives,
-      resources = video.resources,
-      productionCompanies = video.productionCompanies,
-      distributors = video.distributors,
-      producers = video.producers,
-      directors = video.directors,
-      tags = video.tags; // tslint:disable-next-line
-
-  var hasPPDD = !!((_b = productionCompanies.data) === null || _b === void 0 ? void 0 : _b.length) || !!((_c = distributors.data) === null || _c === void 0 ? void 0 : _c.length) || !!((_d = producers.data) === null || _d === void 0 ? void 0 : _d.length) || !!((_e = directors.data) === null || _e === void 0 ? void 0 : _e.length);
-  var hasBadges = !!((_f = rating) === null || _f === void 0 ? void 0 : _f.value) || !!productionYear || !!((_g = interactives.data) === null || _g === void 0 ? void 0 : _g.length) || !!((_h = resources.data) === null || _h === void 0 ? void 0 : _h.length);
-  var hasDetails = !!video.description || hasBadges || hasPPDD || !!((_j = tags.data) === null || _j === void 0 ? void 0 : _j.length);
-
-  var _useViewModel = Object(_libs_common_src_react_hooks_useViewModel__WEBPACK_IMPORTED_MODULE_1__["useViewModel"])(shared_constants_LiteViewModels__WEBPACK_IMPORTED_MODULE_18__["ViewModelKeys"].WEB_PLAYER_DATA),
-      _useViewModel2 = _slicedToArray(_useViewModel, 2),
-      setPlayerData = _useViewModel2[1];
-
-  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState(hasGlanceData),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      showSynopsis = _React$useState2[0],
-      setShowSynopsis = _React$useState2[1];
-
-  var mediaQuery = Object(_libs_shared_src_hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_7__["useGetMediaQueryString"])();
-  var isMobile = mediaQuery === _libs_shared_src_enums_MediaQueries__WEBPACK_IMPORTED_MODULE_8__["MediaQueryStrings"].XS; // Get reference to the player dom element
-
-  var player = react__WEBPACK_IMPORTED_MODULE_0___default.a.useRef(null); // Memoize so we don't call throttle repeatedly
-
-  var throttledOnUpdateViewport = react__WEBPACK_IMPORTED_MODULE_0___default.a.useMemo(function () {
-    return _libs_common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_2__["FunctionHelper"].throttle(function () {
-      return onUpdateViewport(player, setPlayerData);
-    }, 100, {
-      leading: true,
-      trailing: false
-    });
-  }, []);
-  Object(shared_hooks_useWindowListeners__WEBPACK_IMPORTED_MODULE_15__["useOnScroll"])(throttledOnUpdateViewport);
-  Object(shared_hooks_useWindowListeners__WEBPACK_IMPORTED_MODULE_15__["useOnResize"])(throttledOnUpdateViewport);
-  var playerRef = react__WEBPACK_IMPORTED_MODULE_0___default.a.useCallback(function (node) {
-    if (!node) return;
-    player.current = node;
-    throttledOnUpdateViewport();
-  }, []);
-  react__WEBPACK_IMPORTED_MODULE_0___default.a.useEffect(function () {
-    setPlayerData('isOnPlayPage', true); // Clear the position when this component is closed
-
-    return function () {
-      setPlayerData('viewportPosition', null);
-      setPlayerData('isOnPlayPage', false);
-    };
-  }, []);
-  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_4__["LanguageNamespaceContext"].Provider, {
-    value: namespace
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: 'embed-responsive embed-responsive-16by9 mb-3',
-    ref: playerRef
-  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: 'd-flex justify-content-between align-items-center pb-3'
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_VideoTitle__WEBPACK_IMPORTED_MODULE_20__["VideoTitle"], {
-    video: video,
-    setFavourite: props.setFavourite
-  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_actions_Actions__WEBPACK_IMPORTED_MODULE_5__["Actions"], {
-    actions: getActions(video, isMobile)
-  })), showSynopsis ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(shared_components_synopsis_Synopsis__WEBPACK_IMPORTED_MODULE_19__["Synopsis"], {
-    theme: glanceTheme,
-    video: video,
-    hasGlanceData: hasGlanceData,
-    hasDetails: hasDetails,
-    onClickFullDescription: function onClickFullDescription() {
-      return setShowSynopsis(false);
-    }
-  }) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(shared_components_video_details_VideoDetails__WEBPACK_IMPORTED_MODULE_14__["VideoDetailsWithScrollbar"], {
-    video: video,
-    hasGlanceData: hasGlanceData,
-    hasBadges: hasBadges,
-    hasPPDD: hasPPDD,
-    onClickShowSynopsis: function onClickShowSynopsis() {
-      return setShowSynopsis(true);
-    }
-  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(shared_components_resources_Resources__WEBPACK_IMPORTED_MODULE_13__["Resources"], {
-    video: video
-  }), !!((_l = (_k = video.interactives) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.length) && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: 'mx-n1'
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_widgets_fixed_widget__WEBPACK_IMPORTED_MODULE_9__["FixedWidget"], {
-    name: getPhrase('interactives', {
-      count: video.interactives.data.length
-    }),
-    contents: _libs_shared_src_enums_WidgetContents__WEBPACK_IMPORTED_MODULE_10__["WidgetContents"].Interactives,
-    collection: video.interactives.data,
-    prefetched: true,
-    childComponent: function childComponent(itemProps) {
-      return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_widgets_items_interactive_widget_item_InteractiveWidgetItem__WEBPACK_IMPORTED_MODULE_11__["InteractiveWidgetItem"], Object.assign({}, itemProps, {
-        video: video
-      }));
-    },
-    analyticsData: {
-      widgetId: 'interactives'
-    }
-  })), !!((_o = (_m = video.clips) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.length) && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
-    className: 'mx-n1'
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_widgets_fixed_widget__WEBPACK_IMPORTED_MODULE_9__["FixedWidget"], {
-    name: getPhrase('clips', {
-      count: video.interactives.data.length
-    }),
-    contents: _libs_shared_src_enums_WidgetContents__WEBPACK_IMPORTED_MODULE_10__["WidgetContents"].Clips,
-    collection: video.clips.data,
-    prefetched: true,
-    childComponent: function childComponent(itemProps) {
-      return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_widgets_items_clip_widget_item_ClipWidgetItem__WEBPACK_IMPORTED_MODULE_12__["ClipWidgetItem"], Object.assign({}, itemProps, {
-        video: video
-      }));
-    },
-    analyticsData: {
-      widgetId: 'clips'
-    }
-  })));
-}
-
-/***/ }),
+  var i, j;
 
-/***/ "./src/shared/components/play-page/VideoTitle.tsx":
-/*!********************************************************!*\
-  !*** ./src/shared/components/play-page/VideoTitle.tsx ***!
-  \********************************************************/
-/*! exports provided: VideoTitle */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VideoTitle", function() { return VideoTitle; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _libs_common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../libs/common/src/backbone/utils/FunctionHelper */ "../../libs/common/src/backbone/utils/FunctionHelper.ts");
-/* harmony import */ var _libs_common_src_react_utils_TextHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../libs/common/src/react/utils/TextHelper */ "../../libs/common/src/react/utils/TextHelper.ts");
-/* harmony import */ var _libs_shared_src_components_series_link_SeriesLink__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/series-link/SeriesLink */ "../../libs/shared/src/components/series-link/SeriesLink.tsx");
-/* harmony import */ var _libs_shared_src_components_favourite_button_FavouriteButton__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/favourite-button/FavouriteButton */ "../../libs/shared/src/components/favourite-button/FavouriteButton.tsx");
-/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
-/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
-/* harmony import */ var _play_page_scss__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./play-page.scss */ "./src/shared/components/play-page/play-page.scss");
-/* harmony import */ var _play_page_scss__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_play_page_scss__WEBPACK_IMPORTED_MODULE_7__);
-
-
-
-
-
-
-
-
-function VideoTitle(props) {
-  var video = props.video;
-  var appLink = {
-    application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_6__["AppChannels"].DEFAULT,
-    action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_5__["Actions"].Default.SERIES,
-    args: video.series ? [video.series.id, _libs_common_src_react_utils_TextHelper__WEBPACK_IMPORTED_MODULE_2__["TextHelper"].slugify(video.series.name)] : []
-  };
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, !!video.series && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_series_link_SeriesLink__WEBPACK_IMPORTED_MODULE_3__["SeriesLink"], {
-    video: video,
-    appLink: appLink,
-    className: "".concat(_play_page_scss__WEBPACK_IMPORTED_MODULE_7___default.a.series, " clamp-1")
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: 'd-flex align-items-center'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("h1", {
-    className: 'h3 d-inline-block m-0'
-  }, video.name), !!_libs_common_src_backbone_utils_FunctionHelper__WEBPACK_IMPORTED_MODULE_1__["FunctionHelper"].isFunction(props.setFavourite) && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_favourite_button_FavouriteButton__WEBPACK_IMPORTED_MODULE_4__["FavouriteButton"], {
-    setFavourite: props.setFavourite,
-    video: video,
-    className: 'd-inline-block ml-2 align-text-bottom'
-  })));
-}
-
-/***/ }),
-
-/***/ "./src/shared/components/play-page/play-page.scss":
-/*!********************************************************!*\
-  !*** ./src/shared/components/play-page/play-page.scss ***!
-  \********************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-module.exports = {"series":"cv--series--2vEW0"};
-
-/***/ }),
-
-/***/ "./src/shared/components/resources/Resources.tsx":
-/*!*******************************************************!*\
-  !*** ./src/shared/components/resources/Resources.tsx ***!
-  \*******************************************************/
-/*! exports provided: Resources */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Resources", function() { return Resources; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/text/Text */ "../../libs/shared/src/components/text/Text.tsx");
+  for (i = 0; i < audienceValues.length; i++) {
+    j = i + 1; // Set our lower boundary to compare against
 
+    if (!isContinguous) initialVal = audienceValues[i];
+    nextVal = audienceValues[j];
+    /**
+     * Where the next number is also the next incremental value
+     * we're going to continue iterating until the next value
+     * is no longer contiguos.
+     */
 
-function Resources(props) {
-  var video = props.video;
-  if (!video.resources || !video.resources.data || !video.resources.data.length) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: 'pb-3'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("h2", {
-    className: 'h4'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_1__["Text"], {
-    phrase: 'resources',
-    options: {
-      count: video.resources.data.length
+    if (audienceValues[i] + offset === nextVal) {
+      isContinguous = true;
+    } else if (isContinguous) {
+      /**
+       * Where we were tracking a contiguous set, format appropriately
+       * and store the vals
+       */
+      ranges.push("".concat(initialVal, " - ").concat(audienceValues[i]));
+      isContinguous = false;
+    } else {
+      /**
+       * Where the values arent contiguous, just store the current value
+       */
+      ranges.push("".concat(audienceValues[i]));
+      isContinguous = false;
     }
-  })), video.resources.data.map(function (r, i) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-      key: i
-    }, r.name);
-  }));
-}
-
-/***/ }),
-
-/***/ "./src/shared/components/synopsis/Synopsis.tsx":
-/*!*****************************************************!*\
-  !*** ./src/shared/components/synopsis/Synopsis.tsx ***!
-  \*****************************************************/
-/*! exports provided: Synopsis */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Synopsis", function() { return Synopsis; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var marked__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! marked */ "marked");
-/* harmony import */ var marked__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(marked__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../libs/common/src/backbone */ "../../libs/common/src/backbone/index.ts");
-/* harmony import */ var _libs_common_src_react_hooks_useViewModel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../libs/common/src/react/hooks/useViewModel */ "../../libs/common/src/react/hooks/useViewModel.ts");
-/* harmony import */ var _libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/text/Text */ "../../libs/shared/src/components/text/Text.tsx");
-/* harmony import */ var _libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/div-button/DivButton */ "../../libs/shared/src/components/div-button/DivButton.tsx");
-/* harmony import */ var _libs_shared_src_utils_ImageHelper__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../../../libs/shared/src/utils/ImageHelper */ "../../libs/shared/src/utils/ImageHelper.ts");
-/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
-/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
-/* harmony import */ var shared_constants_LiteViewModels__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! shared/constants/LiteViewModels */ "./src/shared/constants/LiteViewModels.ts");
-/* harmony import */ var _synopsis_scss__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./synopsis.scss */ "./src/shared/components/synopsis/synopsis.scss");
-/* harmony import */ var _synopsis_scss__WEBPACK_IMPORTED_MODULE_10___default = /*#__PURE__*/__webpack_require__.n(_synopsis_scss__WEBPACK_IMPORTED_MODULE_10__);
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-
-
-
-
-
-
-
-
-
-
-
-var namespace = 'shared.synopsis';
-function Synopsis(props) {
-  var _a;
-
-  var video = props.video,
-      theme = props.theme,
-      hasGlanceData = props.hasGlanceData,
-      hasDetails = props.hasDetails,
-      onClickFullDescription = props.onClickFullDescription;
-
-  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0__["useState"](''),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      markdownHTML = _React$useState2[0],
-      setMarkdownHTML = _React$useState2[1];
-
-  var _useViewModel = Object(_libs_common_src_react_hooks_useViewModel__WEBPACK_IMPORTED_MODULE_3__["useViewModel"])(shared_constants_LiteViewModels__WEBPACK_IMPORTED_MODULE_9__["ViewModelKeys"].WEB_PLAYER_DATA),
-      _useViewModel2 = _slicedToArray(_useViewModel, 2),
-      setPlayerData = _useViewModel2[1];
-
-  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
-    if (!hasGlanceData) return;
-    var html = marked__WEBPACK_IMPORTED_MODULE_1__(video.glance.content); // Add styling to any tags
+  }
 
-    var wrappedTags = html.split('a href="cv-tag://').join('a class="badge-pill tag mr-1 my-1 px-2 py-1" href="cv-tag://');
-    setMarkdownHTML(wrappedTags);
-  }, [(_a = video.glance) === null || _a === void 0 ? void 0 : _a.content]);
-  /**
-   * If we don't have a glance, or our glance is not markdown
-   * we tell the PlayPage to render the description instead and return.
-   */
+  return ranges;
+}
 
-  if (!hasGlanceData && hasDetails) {
-    onClickFullDescription();
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
-  }
+var AudienceHelper = {
   /**
-   * Because the markdown is injected as a HTML string, we cannot attach click event handlers directly onto
-   * the links that we want to. Instead, we attach one click handler to the entire markdown container, meaning
-   * click events bubble up, and we can use `event.target` to see which element was clicked.
+   * This is needed to sort an object's audiences, as they are not sorted by the backend.
+   * To do this, we take the presentation audiences (sorted) and filter them by the object's
+   * audiences, leaving behind a sorted array of object audiences.
    */
-
-
-  function onClickMarkDown(event) {
-    event.preventDefault();
-    var href = event.target.getAttribute('href'); // Ignore click events that do not have a href
-
-    if (!href) return; // When a timestamp is clicked, we update the player time
-
-    if (href.includes('cv-timestamp://')) {
-      var time = href.split('cv-timestamp://')[1];
-      setPlayerData('startTime', time);
-      return;
-    } // When a tag is clicked, we navigate to search results for that tag
-
-
-    if (href.includes('cv-tag://')) {
-      var tag = href.split('cv-tag://')[1];
-      _libs_common_src_backbone__WEBPACK_IMPORTED_MODULE_2__["Core"].AppLinkHelper.trigger({
-        application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_7__["AppChannels"].SEARCH,
-        action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_8__["Actions"].Search.HOME,
-        params: {
-          tag: tag
-        }
-      });
-      return;
-    }
-  }
-
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "rounded border px-3 mb-3 position-relative d-flex align-items-center justify-content-center ".concat(_synopsis_scss__WEBPACK_IMPORTED_MODULE_10___default.a.container)
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "".concat(_synopsis_scss__WEBPACK_IMPORTED_MODULE_10___default.a.content, " py-5")
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("h2", null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_4__["Text"], {
-    namespace: namespace,
-    phrase: 'videoAtAGlance'
-  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    onClick: onClickMarkDown,
-    dangerouslySetInnerHTML: {
-      __html: markdownHTML
-    }
-  }), hasDetails && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_5__["DivButton"], {
-    onClick: props.onClickFullDescription,
-    className: 'cursor-pointer d-inline-block'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("strong", null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_4__["Text"], {
-    namespace: namespace,
-    phrase: 'showFullDescription'
-  })))), theme ? Object.keys(theme.data).map(function (imageDataKey) {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-      key: theme.data[imageDataKey].fileId,
-      className: "".concat(_synopsis_scss__WEBPACK_IMPORTED_MODULE_10___default.a[imageDataKey], " ").concat(_synopsis_scss__WEBPACK_IMPORTED_MODULE_10___default.a.background),
-      style: {
-        backgroundImage: "url('".concat(_libs_shared_src_utils_ImageHelper__WEBPACK_IMPORTED_MODULE_6__["ImageHelper"].createUrl(theme.data[imageDataKey].url, {
-          format: 'png'
-        }), "')")
-      }
+  getSortedPresentationAudiences: function getSortedPresentationAudiences(objectAudiences, presentationAudiences) {
+    var objectAudienceIds = objectAudiences.map(function (audience) {
+      return audience.id.toString();
     });
-  }) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null));
-}
-
-/***/ }),
-
-/***/ "./src/shared/components/synopsis/synopsis.scss":
-/*!******************************************************!*\
-  !*** ./src/shared/components/synopsis/synopsis.scss ***!
-  \******************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-module.exports = {"container":"cv--container--1XOYA","content":"cv--content--UcxNO","background":"cv--background--3gpaY","topLeft":"cv--topLeft--2s7I6","bottomLeft":"cv--bottomLeft--23UKL","topRight":"cv--topRight--ec_-l","bottomRight":"cv--bottomRight--1xMKp"};
-
-/***/ }),
-
-/***/ "./src/shared/components/video-details/VideoDetails.tsx":
-/*!**************************************************************!*\
-  !*** ./src/shared/components/video-details/VideoDetails.tsx ***!
-  \**************************************************************/
-/*! exports provided: VideoDetailsWithScrollbar */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VideoDetailsWithScrollbar", function() { return VideoDetailsWithScrollbar; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_custom_scrollbars__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-custom-scrollbars */ "react-custom-scrollbars");
-/* harmony import */ var react_custom_scrollbars__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_custom_scrollbars__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../../libs/common/src/backbone/services/LanguageService */ "../../libs/common/src/backbone/services/LanguageService.tsx");
-/* harmony import */ var _libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/text/Text */ "../../libs/shared/src/components/text/Text.tsx");
-/* harmony import */ var _libs_shared_src_components_badges_BadgeListContainer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/badges/BadgeListContainer */ "../../libs/shared/src/components/badges/BadgeListContainer.tsx");
-/* harmony import */ var _libs_shared_src_components_badges_Badge__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/badges/Badge */ "../../libs/shared/src/components/badges/Badge.tsx");
-/* harmony import */ var _libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/div-button/DivButton */ "../../libs/shared/src/components/div-button/DivButton.tsx");
-/* harmony import */ var _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../../../../../libs/analytics/src/interfaces */ "../../libs/analytics/src/interfaces/index.ts");
-/* harmony import */ var shared_components_immersive_reader_ImmersiveReader__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! shared/components/immersive-reader/ImmersiveReader */ "./src/shared/components/immersive-reader/ImmersiveReader.tsx");
-/* harmony import */ var _video_details_scss__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./video-details.scss */ "./src/shared/components/video-details/video-details.scss");
-/* harmony import */ var _video_details_scss__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(_video_details_scss__WEBPACK_IMPORTED_MODULE_9__);
-/* harmony import */ var _libs_shared_src_components_tags_TagList__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/tags/TagList */ "../../libs/shared/src/components/tags/TagList.tsx");
-/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
-/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
-
-
-
-
-
-
-
-
-
-
-
+    /**
+     * Remove audiences that aren't relevant for the user's current presentation
+     */
 
+    var filteredAudiences = presentationAudiences.filter(function (presAudience) {
+      return objectAudienceIds.includes(presAudience.masterId.toString());
+    });
+    return filteredAudiences;
+  },
+  getMergedPresentationAudienceString: function getMergedPresentationAudienceString(presentationAudiences) {
+    if (presentationAudiences.length === 1) return presentationAudiences[0];
+    /**
+     * Create a string with all of the audiences
+     */
 
-var namespace = 'shared.videoDetails';
-var getPhrase = _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_2__["LanguageService"].encloseNamespace(namespace); // 368 is the min height of Video at a glance which is defined as $glanceHeight in synopsis.scss
+    var valuesStr = presentationAudiences.map(function (a) {
+      return a.name;
+    }).join(',');
+    /**
+     * Extract all the numbers and  matches from the string
+     * Where there aren't matches, just return the first Audience.
+     */
 
-var MIN_GLANCE_HEIGHT = 368; // px
+    var valMatches = valuesStr.match(DIGIT_REGEX);
+    var nameMatches = valuesStr.match(NAME_REGEX);
+    if (!valMatches || !nameMatches) return presentationAudiences[0];
+    var audienceValues = valMatches.map(function (l) {
+      return +l;
+    }) || [];
+    /**
+     * Build set of logical audience ranges
+     */
 
-function CommaList(props) {
-  var label = props.label,
-      items = props.items,
-      className = props.className;
-  var hasItems = items && items.data && items.data.length;
-  if (!hasItems) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
-  var commaSeperated = items.data.map(function (i) {
-    return i.name;
-  }).join(', ');
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: className
-  }, label, ": ", commaSeperated);
-}
+    var audienceRange = processAudienceRanges(audienceValues);
+    /**
+     * Get matches name
+     */
 
-function VideoDetailsWithScrollbar(props) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var audienceName = nameMatches[0];
+    return {
+      name: "".concat(audienceName, " ").concat(audienceRange.join(' , '))
+    };
+  },
 
-  var video = props.video,
-      hasGlanceData = props.hasGlanceData,
-      hasBadges = props.hasBadges,
-      hasPPDD = props.hasPPDD,
-      onClickShowSynopsis = props.onClickShowSynopsis;
-  if (!hasBadges && !hasPPDD && !((_b = (_a = video.tags) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) && !video.description) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_3__["LanguageNamespaceContext"].Provider, {
-    value: namespace
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: 'rounded border p-3 mb-3'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_custom_scrollbars__WEBPACK_IMPORTED_MODULE_1___default.a, {
-    autoHeight: true,
-    autoHeightMax: MIN_GLANCE_HEIGHT
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: video.description ? 'pb-2' : ''
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("h2", {
-    className: 'h6'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_3__["Text"], {
-    phrase: 'details'
-  })), hasBadges && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_badges_BadgeListContainer__WEBPACK_IMPORTED_MODULE_4__["BadgeListContainer"], {
-    className: 'pb-1'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_badges_Badge__WEBPACK_IMPORTED_MODULE_5__["Badge"], {
-    type: _libs_shared_src_components_badges_Badge__WEBPACK_IMPORTED_MODULE_5__["BadgeType"].Rating,
-    data: video.rating
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_badges_Badge__WEBPACK_IMPORTED_MODULE_5__["Badge"], {
-    type: _libs_shared_src_components_badges_Badge__WEBPACK_IMPORTED_MODULE_5__["BadgeType"].ProductionYear,
-    data: video.productionYear
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_badges_Badge__WEBPACK_IMPORTED_MODULE_5__["Badge"], {
-    type: _libs_shared_src_components_badges_Badge__WEBPACK_IMPORTED_MODULE_5__["BadgeType"].Interactive,
-    data: video.interactives
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_badges_Badge__WEBPACK_IMPORTED_MODULE_5__["Badge"], {
-    type: _libs_shared_src_components_badges_Badge__WEBPACK_IMPORTED_MODULE_5__["BadgeType"].Resources,
-    data: video.resources
-  })), hasPPDD && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: 'pb-2'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](CommaList, {
-    label: getPhrase('productionCompanies', {
-      smartCount: (_d = (_c = video.productionCompanies) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.length
-    }),
-    items: video.productionCompanies
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](CommaList, {
-    label: getPhrase('distributors', {
-      smartCount: (_f = (_e = video.distributors) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.length
-    }),
-    items: video.distributors
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](CommaList, {
-    label: getPhrase('producers', {
-      smartCount: (_h = (_g = video.producers) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.length
-    }),
-    items: video.producers
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](CommaList, {
-    label: getPhrase('directors', {
-      smartCount: (_k = (_j = video.directors) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.length
-    }),
-    items: video.directors
-  })), !!((_m = (_l = video.tags) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.length) && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_tags_TagList__WEBPACK_IMPORTED_MODULE_10__["TagList"], {
-    tags: video.tags,
-    getAppLink: function getAppLink(tag) {
-      return {
-        application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_11__["AppChannels"].SEARCH,
-        action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_12__["Actions"].Search.HOME,
-        params: {
-          tag: tag.name
+  /**
+   * This function assumes the members array passed in is ordered by `name`.
+   */
+  sortMembersWithDuplicateNamesByAudience: function sortMembersWithDuplicateNamesByAudience(members) {
+    // Returns the lowest level audience out of an array of audience objects by looking at the name
+    var getLowestAudience = function getLowestAudience(audiences) {
+      if (!audiences.length) return null;
+      var lowestAudience;
+      var lowestAudienceDigit;
+      audiences.forEach(function (audience) {
+        var digit = +_common_src_react_utils_ArrayHelper__WEBPACK_IMPORTED_MODULE_0__["ArrayHelper"].first(audience.name.match(DIGIT_REGEX));
+
+        if (!lowestAudience) {
+          lowestAudience = audience;
+          lowestAudienceDigit = digit;
+          return;
         }
-      };
-    }
-  })), !!video.description && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "d-flex align-items-center ".concat(hasBadges || hasPPDD || ((_p = (_o = video.tags) === null || _o === void 0 ? void 0 : _o.data) === null || _p === void 0 ? void 0 : _p.length) ? 'pt-2' : '')
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("h2", {
-    className: 'h6 mb-1'
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_3__["Text"], {
-    phrase: 'description'
-  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](shared_components_immersive_reader_ImmersiveReader__WEBPACK_IMPORTED_MODULE_8__["ImmersiveReader"], {
-    text: video.description,
-    title: video.name,
-    className: 'pl-2',
-    analyticsOptions: {
-      location: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_7__["LocationContext"].PlayPage,
-      entity: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_7__["EntityType"].Video,
-      actionType: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_7__["UserAction"].Click,
-      descriptor: _libs_analytics_src_interfaces__WEBPACK_IMPORTED_MODULE_7__["ClickDescriptor"].LaunchImmersiveReader
-    },
-    analyticsData: {
-      id: video.id,
-      type: 'description'
-    }
-  })), video.description && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("p", {
-    className: 'mb-0'
-  }, video.description)), hasGlanceData && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_6__["DivButton"], {
-    className: "".concat(_video_details_scss__WEBPACK_IMPORTED_MODULE_9___default.a.showGlance, " cursor-pointer d-inline-block"),
-    onClick: onClickShowSynopsis,
-    role: 'button',
-    tabIndex: 0
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("strong", null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_3__["Text"], {
-    phrase: 'showGlance'
-  }))))));
-}
 
-/***/ }),
-
-/***/ "./src/shared/components/video-details/video-details.scss":
-/*!****************************************************************!*\
-  !*** ./src/shared/components/video-details/video-details.scss ***!
-  \****************************************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-// extracted by mini-css-extract-plugin
-module.exports = {"showGlance":"cv--showGlance--2fhqC"};
+        if (digit < lowestAudienceDigit) lowestAudience = audience;
+      });
+      return lowestAudience;
+    }; // This is used to track how many times a member's name appears in the collection
 
-/***/ }),
 
-/***/ "./src/shared/hooks/useWindowListeners.ts":
-/*!************************************************!*\
-  !*** ./src/shared/hooks/useWindowListeners.ts ***!
-  \************************************************/
-/*! exports provided: useOnScroll, useOnResize */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useOnScroll", function() { return useOnScroll; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "useOnResize", function() { return useOnResize; });
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+    var nameCountMap = {};
+    var sorted = [];
+    members.forEach(function (member) {
+      if (!nameCountMap[member.name]) {
+        nameCountMap[member.name] = 1;
+        sorted.push(member);
+        return;
+      }
 
+      sorted.push(member);
+      nameCountMap[member.name]++; // Take the slice of duplicates that we want to sort by audience
 
-function createUseWindowListener(event) {
-  return function useWindowListener(callback) {
-    /**
-     * Memoize the callback so it's the same function
-     * when we call removeEventListener
-     */
-    var memoCallback = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](callback, []);
-    react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](function () {
-      window.addEventListener(event, memoCallback);
-      return function () {
-        return window.removeEventListener(event, memoCallback);
-      };
-    }, []);
-  };
-}
+      var slice = sorted.splice(sorted.length - nameCountMap[member.name]); // Sort the slice by lowest audience
 
-var useOnScroll = createUseWindowListener('scroll');
-var useOnResize = createUseWindowListener('resize');
+      var sortedSlice = slice.sort(function (a, b) {
+        var firstObjLowestAudience = getLowestAudience(a.subjectPresentationAudiences.data);
+        var secondObjLowestAudience = getLowestAudience(b.subjectPresentationAudiences.data);
+        if (!firstObjLowestAudience && secondObjLowestAudience) return 1;
+        if (!secondObjLowestAudience) return -1;
+        var comparison = firstObjLowestAudience.name.localeCompare(secondObjLowestAudience.name);
+        if (comparison === 0) return comparison;
+        return comparison > 0 ? -1 : 1;
+      });
+      sorted = sorted.concat(sortedSlice);
+    });
+    return sorted;
+  }
+};
 
 /***/ })