@clickview/lite 0.0.24-rc.4 → 0.0.24

package/dist/scripts/12.chunk.js

@@ -1,76 +1,532 @@
 (window["webpackJsonp_clickview_lite"] = window["webpackJsonp_clickview_lite"] || []).push([[12],{
 
-/***/ "../../libs/shared/src/apps/subjects/components/preferences/footer/PreferenceFooter.tsx":
-/*!**********************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/subjects/components/preferences/footer/PreferenceFooter.tsx ***!
-  \**********************************************************************************************************************************/
-/*! exports provided: PreferenceFooter */
+/***/ "../../libs/shared/src/components/actions/ActionButton.tsx":
+/*!*****************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/actions/ActionButton.tsx ***!
+  \*****************************************************************************************************/
+/*! exports provided: ActionButton */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "PreferenceFooter", function() { return PreferenceFooter; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ActionButton", function() { return ActionButton; });
 /* 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 _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../enums/MediaQueries */ "../../libs/shared/src/enums/MediaQueries.ts");
-/* harmony import */ var _hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../hooks/UseGetMediaQueryString */ "../../libs/shared/src/hooks/UseGetMediaQueryString.ts");
-/* harmony import */ var _preference_footer_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./preference-footer.scss */ "../../libs/shared/src/apps/subjects/components/preferences/footer/preference-footer.scss");
-/* harmony import */ var _preference_footer_scss__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_preference_footer_scss__WEBPACK_IMPORTED_MODULE_3__);
+/* 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");
 
 
 
 
-PreferenceFooter.defaultProps = {
-  justify: 'between'
+
+
+
+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");
+
+
+
+
+
+function Actions(props) {
+  var buttonActions = [];
+  var moreActions = [];
+  props.actions.forEach(function (a) {
+    if (a.button) buttonActions.push(a);else moreActions.push(a);
+  });
+  var className = 'd-flex';
+  if (props.className) className += " ".concat(props.className);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    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
+  })));
+}
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/actions/ActionsDropdown.tsx":
+/*!********************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/actions/ActionsDropdown.tsx ***!
+  \********************************************************************************************************/
+/*! exports provided: ActionsDropdown */
+/***/ (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 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");
+
+
+
+
+
+
+
+
+
+
+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 PreferenceFooter(props) {
-  var mediaQuery = Object(_hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_2__["useGetMediaQueryString"])();
-  var widthClass = mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_1__["MediaQueryStrings"].SM || mediaQuery === _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_1__["MediaQueryStrings"].XS ? 'w-100' : 'w-75';
-  var justifyClass = "justify-content-".concat(props.justify);
+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
+    });
+  })));
+}
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/actions/actions.scss":
+/*!*************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/actions/actions.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"};
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/curriculum-links/CurriculumLinks.tsx":
+/*!*****************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/curriculum-links/CurriculumLinks.tsx ***!
+  \*****************************************************************************************************************/
+/*! exports provided: CurriculumLinks */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CurriculumLinks", function() { return CurriculumLinks; });
+/* 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 _text_Text__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../text/Text */ "../../libs/shared/src/components/text/Text.tsx");
+/* harmony import */ var _enums_CurriculumType__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../enums/CurriculumType */ "../../libs/shared/src/enums/CurriculumType.ts");
+/* harmony import */ var _app_link_AppLink__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../app-link/AppLink */ "../../libs/shared/src/components/app-link/AppLink.tsx");
+/* harmony import */ var _curriculum_links_scss__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./curriculum-links.scss */ "../../libs/shared/src/components/curriculum-links/curriculum-links.scss");
+/* harmony import */ var _curriculum_links_scss__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_curriculum_links_scss__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _div_button_DivButton__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../div-button/DivButton */ "../../libs/shared/src/components/div-button/DivButton.tsx");
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+
+
+
+
+
+
+
+var namespace = 'shared.curriculumLinks';
+
+function CurriculumLeaf(props) {
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_app_link_AppLink__WEBPACK_IMPORTED_MODULE_4__["AppLink"], {
+    appLink: null,
+    className: 'd-flex'
+  }, props.leaf.name && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h5", {
+    className: "".concat(_curriculum_links_scss__WEBPACK_IMPORTED_MODULE_5___default.a.curriculumCode, " align-self-start text-nowrap font-size-normal badge-pill tag py-1 px-2 my-0 mr-1")
+  }, props.leaf.name), props.leaf.description && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", {
+    className: 'm-0 align-self-center'
+  }, props.leaf.description));
+}
+
+function CurriculumSubject(props) {
+  var _structure;
+
+  var structure = (_structure = {}, _defineProperty(_structure, _enums_CurriculumType__WEBPACK_IMPORTED_MODULE_3__["CurriculumType"].Subject, null), _defineProperty(_structure, _enums_CurriculumType__WEBPACK_IMPORTED_MODULE_3__["CurriculumType"].Audience, null), _defineProperty(_structure, _enums_CurriculumType__WEBPACK_IMPORTED_MODULE_3__["CurriculumType"].Area, []), _defineProperty(_structure, _enums_CurriculumType__WEBPACK_IMPORTED_MODULE_3__["CurriculumType"].Leaf, []), _structure);
+  props.linkSet.forEach(function (curriculumObj) {
+    if (Array.isArray(structure[curriculumObj.type])) structure[curriculumObj.type].push(curriculumObj);else structure[curriculumObj.type] = curriculumObj;
+  });
+  var areaText = structure[_enums_CurriculumType__WEBPACK_IMPORTED_MODULE_3__["CurriculumType"].Area].map(function (ca) {
+    return ca.name;
+  }).join(' - ').toUpperCase();
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h3", {
+    className: 'font-size-normal font-weight-500 mb-2'
+  }, structure[_enums_CurriculumType__WEBPACK_IMPORTED_MODULE_3__["CurriculumType"].Audience].name, " - ", structure[_enums_CurriculumType__WEBPACK_IMPORTED_MODULE_3__["CurriculumType"].Subject].name), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'ml-1 mr-2'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h4", {
+    className: "".concat(_curriculum_links_scss__WEBPACK_IMPORTED_MODULE_5___default.a.area, " text-muted mb-2 font-weight-normal")
+  }, areaText), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
+    className: 'list-unstyled'
+  }, structure[_enums_CurriculumType__WEBPACK_IMPORTED_MODULE_3__["CurriculumType"].Leaf].map(function (leaf) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
+      key: leaf.id,
+      className: 'mb-2'
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(CurriculumLeaf, {
+      leaf: leaf
+    }));
+  }))));
+}
+
+function CurriculumLinks(props) {
+  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'rounded border p-3 mb-3'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_custom_scrollbars__WEBPACK_IMPORTED_MODULE_1___default.a, {
+    autoHeight: true,
+    autoHeightMax: props.height
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
+    className: 'mb-2 d-flex justify-content-between align-items-center'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("h2", {
+    className: 'h6 mb-0'
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_text_Text__WEBPACK_IMPORTED_MODULE_2__["Text"], {
+    namespace: namespace,
+    phrase: 'curriculumLinks'
+  })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_div_button_DivButton__WEBPACK_IMPORTED_MODULE_6__["DivButton"], {
+    className: 'text-muted',
+    onClick: props.onClickSeeLess
+  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_text_Text__WEBPACK_IMPORTED_MODULE_2__["Text"], {
+    namespace: namespace,
+    phrase: 'seeLess'
+  }))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("ul", {
+    className: 'list-unstyled m-0'
+  }, props.curriculumLinks.map(function (linkSet, i) {
+    return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
+      key: "linkset-".concat(i),
+      className: _curriculum_links_scss__WEBPACK_IMPORTED_MODULE_5___default.a.curriculumSet
+    }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(CurriculumSubject, {
+      linkSet: linkSet
+    }));
+  }))));
+}
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/curriculum-links/curriculum-links.scss":
+/*!*******************************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/curriculum-links/curriculum-links.scss ***!
+  \*******************************************************************************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+// extracted by mini-css-extract-plugin
+module.exports = {"curriculumSet":"cv--curriculumSet--rYMeg","area":"cv--area--F-oQE","curriculumCode":"cv--curriculumCode--TOD1n"};
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/div-button/DivButton.tsx":
+/*!*****************************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/div-button/DivButton.tsx ***!
+  \*****************************************************************************************************/
+/*! exports provided: DivButton */
+/***/ (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 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__);
+
+/**
+ * This element lets us use `div` elements as buttons without losing the accessibility of
+ * a regular HTML button element
+ */
+
+function DivButton(props) {
   return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "".concat(widthClass, " ").concat(justifyClass, " ").concat(_preference_footer_scss__WEBPACK_IMPORTED_MODULE_3___default.a.preferenceFooter, " d-flex px-3")
+    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/apps/subjects/components/preferences/footer/preference-footer.scss":
-/*!************************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/subjects/components/preferences/footer/preference-footer.scss ***!
-  \************************************************************************************************************************************/
+/***/ "../../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);
+}
+
+/***/ }),
+
+/***/ "../../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
+    });
+  }));
+}
+
+/***/ }),
+
+/***/ "../../libs/shared/src/components/tags/tags.scss":
+/*!*******************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/tags/tags.scss ***!
+  \*******************************************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"preferenceFooter":"cv--preferenceFooter--P29kw"};
+module.exports = {"tagList":"cv--tagList--yvetE","disabled":"cv--disabled--3ZfKv"};
 
 /***/ }),
 
-/***/ "../../libs/shared/src/apps/subjects/components/preferences/index.ts":
-/*!***************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/subjects/components/preferences/index.ts ***!
-  \***************************************************************************************************************/
-/*! exports provided: PreferenceFooter, PreferencesNav, PreferenceItem, SubjectPreferenceGrid, SubjectPreferenceItem */
+/***/ "../../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 */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony import */ var _footer_PreferenceFooter__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./footer/PreferenceFooter */ "../../libs/shared/src/apps/subjects/components/preferences/footer/PreferenceFooter.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PreferenceFooter", function() { return _footer_PreferenceFooter__WEBPACK_IMPORTED_MODULE_0__["PreferenceFooter"]; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "VideoOwnerText", function() { return VideoOwnerText; });
+/* 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 _nav_PreferencesNav__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./nav/PreferencesNav */ "../../libs/shared/src/apps/subjects/components/preferences/nav/PreferencesNav.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PreferencesNav", function() { return _nav_PreferencesNav__WEBPACK_IMPORTED_MODULE_1__["PreferencesNav"]; });
+function VideoOwnerText(props) {
+  var _a, _b, _c, _d;
 
-/* harmony import */ var _subject_preference_grid_SubjectPreferenceGrid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./subject-preference-grid/SubjectPreferenceGrid */ "../../libs/shared/src/apps/subjects/components/preferences/subject-preference-grid/SubjectPreferenceGrid.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SubjectPreferenceGrid", function() { return _subject_preference_grid_SubjectPreferenceGrid__WEBPACK_IMPORTED_MODULE_2__["SubjectPreferenceGrid"]; });
+  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 _subject_preference_item_SubjectPreferenceItem__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./subject-preference-item/SubjectPreferenceItem */ "../../libs/shared/src/apps/subjects/components/preferences/subject-preference-item/SubjectPreferenceItem.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "SubjectPreferenceItem", function() { return _subject_preference_item_SubjectPreferenceItem__WEBPACK_IMPORTED_MODULE_3__["SubjectPreferenceItem"]; });
+/* 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 import */ var _preference_item_PreferenceItem__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./preference-item/PreferenceItem */ "../../libs/shared/src/apps/subjects/components/preferences/preference-item/PreferenceItem.tsx");
-/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "PreferenceItem", function() { return _preference_item_PreferenceItem__WEBPACK_IMPORTED_MODULE_4__["PreferenceItem"]; });
+/* 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"]; });
 
 
 
@@ -78,145 +534,312 @@ __webpack_require__.r(__webpack_exports__);
 
 /***/ }),
 
-/***/ "../../libs/shared/src/apps/subjects/components/preferences/preference-item/PreferenceItem.tsx":
-/*!*****************************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/subjects/components/preferences/preference-item/PreferenceItem.tsx ***!
-  \*****************************************************************************************************************************************/
-/*! exports provided: PreferenceItem */
+/***/ "../../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__, "PreferenceItem", function() { return PreferenceItem; });
+/* 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 _PreferenceItemStatus__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./PreferenceItemStatus */ "../../libs/shared/src/apps/subjects/components/preferences/preference-item/PreferenceItemStatus.tsx");
-/* harmony import */ var _preference_item_scss__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./preference-item.scss */ "../../libs/shared/src/apps/subjects/components/preferences/preference-item/preference-item.scss");
-/* harmony import */ var _preference_item_scss__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_preference_item_scss__WEBPACK_IMPORTED_MODULE_2__);
+/* 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__);
 
 
 
-function PreferenceItem(props) {
-  function getContainerClass() {
-    var baseClass = _preference_item_scss__WEBPACK_IMPORTED_MODULE_2___default.a.preferenceItem;
-    if (props.extraClasses) baseClass += ' ' + props.extraClasses;
-    if (props.isDisabled) baseClass += ' ' + _preference_item_scss__WEBPACK_IMPORTED_MODULE_2___default.a.disabled;
-    if (props.isSelected && !props.isExpandable) baseClass += ' ' + _preference_item_scss__WEBPACK_IMPORTED_MODULE_2___default.a.selected;
-    if (props.hideStatus) baseClass += ' ' + _preference_item_scss__WEBPACK_IMPORTED_MODULE_2___default.a.noBorder;
-    return baseClass;
-  }
 
-  var caretClass = "".concat(_preference_item_scss__WEBPACK_IMPORTED_MODULE_2___default.a.expandCaret, " ").concat(props.expand ? _preference_item_scss__WEBPACK_IMPORTED_MODULE_2___default.a.up : _preference_item_scss__WEBPACK_IMPORTED_MODULE_2___default.a.down);
-  return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("li", {
-    className: getContainerClass(),
-    onClick: props.onClick,
-    "aria-checked": props.isSelected,
-    "aria-haspopup": props.isExpandable,
-    role: props.isExpandable ? 'button' : 'checkbox',
-    style: {
-      backgroundImage: "url(".concat(props.imageUrl, ")")
-    },
-    tabIndex: 0
+
+
+
+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: "".concat(_preference_item_scss__WEBPACK_IMPORTED_MODULE_2___default.a.textBox, " p-2")
-  }, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("p", {
-    className: 'm-0 text-truncate'
-  }, props.name, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("span", {
-    className: props.isExpandable ? caretClass : ''
-  })), !props.hideStatus && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, props.isExpandable ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_PreferenceItemStatus__WEBPACK_IMPORTED_MODULE_1__["ExpandableItemStatus"], {
-    selectedChildrenCount: props.selectedChildCount
-  }) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_PreferenceItemStatus__WEBPACK_IMPORTED_MODULE_1__["SelectableItemStatus"], {
-    selected: props.isSelected,
-    radioButton: props.radioButton
-  }))));
-}
+    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/apps/subjects/components/preferences/preference-item/PreferenceItemStatus.tsx":
+/***/ "../../libs/shared/src/components/widgets/items/interactive-widget-item/interactive-widget-item.scss":
 /*!***********************************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/subjects/components/preferences/preference-item/PreferenceItemStatus.tsx ***!
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/components/widgets/items/interactive-widget-item/interactive-widget-item.scss ***!
   \***********************************************************************************************************************************************/
-/*! exports provided: ExpandableItemStatus, SelectableItemStatus */
+/*! 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"};
+
+/***/ }),
+
+/***/ "../../libs/shared/src/enums/CurriculumType.ts":
+/*!*****************************************************************************************!*\
+  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/enums/CurriculumType.ts ***!
+  \*****************************************************************************************/
+/*! exports provided: CurriculumType */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "ExpandableItemStatus", function() { return ExpandableItemStatus; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SelectableItemStatus", function() { return SelectableItemStatus; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "CurriculumType", function() { return CurriculumType; });
+var CurriculumType;
+
+(function (CurriculumType) {
+  CurriculumType["Subject"] = "CurriculumSubject";
+  CurriculumType["Audience"] = "CurriculumAudience";
+  CurriculumType["Area"] = "CurriculumArea";
+  CurriculumType["Leaf"] = "CurriculumLeaf";
+})(CurriculumType || (CurriculumType = {}));
+
+/***/ }),
+
+/***/ "./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 _components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../components/svg-container/SvgContainer */ "../../libs/shared/src/components/svg-container/SvgContainer.tsx");
-/* harmony import */ var _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../utils/SvgHelper */ "../../libs/shared/src/utils/SvgHelper.ts");
-/* harmony import */ var _preference_item_scss__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./preference-item.scss */ "../../libs/shared/src/apps/subjects/components/preferences/preference-item/preference-item.scss");
-/* harmony import */ var _preference_item_scss__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_preference_item_scss__WEBPACK_IMPORTED_MODULE_3__);
+/* 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 ExpandableItemStatus = function ExpandableItemStatus(props) {
-  if (!props.selectedChildrenCount) return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "".concat(_preference_item_scss__WEBPACK_IMPORTED_MODULE_3___default.a.itemStatus, " ").concat(_preference_item_scss__WEBPACK_IMPORTED_MODULE_3___default.a.green)
-  }, props.selectedChildrenCount);
-};
-var SelectableItemStatus = function SelectableItemStatus(props) {
-  var svg;
-  if (props.selected) svg = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_1__["SvgContainer"], {
-    svgName: _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_2__["cvSvgLibrary"].Check
-  });else if (!props.radioButton) svg = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_svg_container_SvgContainer__WEBPACK_IMPORTED_MODULE_1__["SvgContainer"], {
-    svgName: _utils_SvgHelper__WEBPACK_IMPORTED_MODULE_2__["cvSvgLibrary"].Plus
-  });else svg = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, "\xA0");
+
+
+
+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);
+  }
+
   return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    className: "".concat(_preference_item_scss__WEBPACK_IMPORTED_MODULE_3___default.a.itemStatus, " ").concat(props.selected ? _preference_item_scss__WEBPACK_IMPORTED_MODULE_3___default.a.green : _preference_item_scss__WEBPACK_IMPORTED_MODULE_3___default.a.unchecked)
-  }, svg);
-};
+    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'
+  })));
+}
 
 /***/ }),
 
-/***/ "../../libs/shared/src/apps/subjects/components/preferences/preference-item/preference-item.scss":
-/*!*******************************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/subjects/components/preferences/preference-item/preference-item.scss ***!
-  \*******************************************************************************************************************************************/
+/***/ "./src/shared/components/immersive-reader/immersive-reader.scss":
+/*!**********************************************************************!*\
+  !*** ./src/shared/components/immersive-reader/immersive-reader.scss ***!
+  \**********************************************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 // extracted by mini-css-extract-plugin
-module.exports = {"preferenceItem":"cv--preferenceItem--1LDb6","expandCaret":"cv--expandCaret--3QEWB","down":"cv--down--2y-iF","up":"cv--up--1kGNY","disabled":"cv--disabled--2w4FH","selected":"cv--selected--1lSYv","noBorder":"cv--noBorder--3Mxuo","textBox":"cv--textBox--3HCeK","itemStatus":"cv--itemStatus--2msq4","unchecked":"cv--unchecked--2VQLv","green":"cv--green--AHd64"};
+module.exports = {"button":"cv--button--10_KK"};
 
 /***/ }),
 
-/***/ "../../libs/shared/src/apps/subjects/components/preferences/subject-preference-grid/SubjectPreferenceGrid.tsx":
-/*!********************************************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/subjects/components/preferences/subject-preference-grid/SubjectPreferenceGrid.tsx ***!
-  \********************************************************************************************************************************************************/
-/*! exports provided: SubjectPreferenceGrid */
+/***/ "./src/shared/components/play-page/PlayPage.tsx":
+/*!******************************************************!*\
+  !*** ./src/shared/components/play-page/PlayPage.tsx ***!
+  \******************************************************/
+/*! exports provided: onUpdateViewport, PlayPage */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SubjectPreferenceGrid", function() { return SubjectPreferenceGrid; });
+/* 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 _common_src_react_utils_ArrayHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../../common/src/react/utils/ArrayHelper */ "../../libs/common/src/react/utils/ArrayHelper.ts");
-/* harmony import */ var _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../enums/MediaQueries */ "../../libs/shared/src/enums/MediaQueries.ts");
-/* harmony import */ var _hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../../../hooks/UseGetMediaQueryString */ "../../libs/shared/src/hooks/UseGetMediaQueryString.ts");
-/* harmony import */ var ___WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./.. */ "../../libs/shared/src/apps/subjects/components/preferences/index.ts");
-/* harmony import */ var _contexts_SubjectPreferencesContext__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../contexts/SubjectPreferencesContext */ "../../libs/shared/src/apps/subjects/contexts/SubjectPreferencesContext.ts");
-/* harmony import */ var _subject_preference_grid_scss__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./subject-preference-grid.scss */ "../../libs/shared/src/apps/subjects/components/preferences/subject-preference-grid/subject-preference-grid.scss");
-/* harmony import */ var _subject_preference_grid_scss__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_subject_preference_grid_scss__WEBPACK_IMPORTED_MODULE_6__);
-var __rest = undefined && undefined.__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) {
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  }
+/* 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 _libs_shared_src_components_curriculum_links_CurriculumLinks__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/curriculum-links/CurriculumLinks */ "../../libs/shared/src/components/curriculum-links/CurriculumLinks.tsx");
+/* harmony import */ var shared_components_resources_Resources__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! shared/components/resources/Resources */ "./src/shared/components/resources/Resources.tsx");
+/* harmony import */ var shared_components_video_details_VideoDetails__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! shared/components/video-details/VideoDetails */ "./src/shared/components/video-details/VideoDetails.tsx");
+/* harmony import */ var shared_hooks_useWindowListeners__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! shared/hooks/useWindowListeners */ "./src/shared/hooks/useWindowListeners.ts");
+/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
+/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
+/* harmony import */ var shared_constants_LiteViewModels__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! shared/constants/LiteViewModels */ "./src/shared/constants/LiteViewModels.ts");
+/* harmony import */ var shared_components_synopsis_Synopsis__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! shared/components/synopsis/Synopsis */ "./src/shared/components/synopsis/Synopsis.tsx");
+/* harmony import */ var _VideoTitle__WEBPACK_IMPORTED_MODULE_21__ = __webpack_require__(/*! ./VideoTitle */ "./src/shared/components/play-page/VideoTitle.tsx");
+/* harmony import */ var shared_constants_MinimumGlanceHeight__WEBPACK_IMPORTED_MODULE_22__ = __webpack_require__(/*! shared/constants/MinimumGlanceHeight */ "./src/shared/constants/MinimumGlanceHeight.ts");
+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; }
+
+
 
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
 
 
 
@@ -226,218 +849,683 @@ var __rest = undefined && undefined.__rest || function (s, e) {
 
 
 
-function useGetRowItemCapacity() {
-  var viewportWidth = Object(_hooks_UseGetMediaQueryString__WEBPACK_IMPORTED_MODULE_3__["useGetMediaQueryString"])();
 
-  switch (viewportWidth) {
-    case _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_2__["MediaQueryStrings"].LG:
-    default:
-      return 5;
 
-    case _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_2__["MediaQueryStrings"].MD:
-      return 4;
 
-    case _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_2__["MediaQueryStrings"].SM:
-      return 3;
 
-    case _enums_MediaQueries__WEBPACK_IMPORTED_MODULE_2__["MediaQueryStrings"].XS:
-      return 2;
+
+
+
+
+
+
+
+
+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, isIPad, isMobile) {
+  return [{
+    label: getPhrase('makeInteractive'),
+    svgName: _libs_shared_src_utils_SvgHelper__WEBPACK_IMPORTED_MODULE_6__["cvSvgLibrary"].Plus,
+    className: !isIPad ? 'btn btn-light ml-2' : '',
+    button: !isIPad
+  }, {
+    label: getPhrase('addToPlaylist'),
+    appLink: {
+      application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_18__["AppChannels"].PLAYLISTS,
+      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_17__["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_18__["AppChannels"].DEFAULT,
+      action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_17__["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
+
+  }];
+};
+
+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;
+  /**
+   * Only show floating player
+   * if the normal player is no longer in view
+   */
+
+  if (rect.top < -rect.height) {
+    setPlayerData('viewportPosition', null);
+    return;
   }
+
+  setPlayerData('viewportPosition', {
+    top: top + rect.top,
+    left: left + rect.left,
+    width: rect.width
+  });
 }
+function PlayPage(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+
+  var video = props.video,
+      glanceTheme = props.glanceTheme,
+      curriculumLinks = props.curriculumLinks;
+  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_19__["ViewModelKeys"].WEB_PLAYER_DATA),
+      _useViewModel2 = _slicedToArray(_useViewModel, 2),
+      setPlayerData = _useViewModel2[1];
+
+  var _React$useState = react__WEBPACK_IMPORTED_MODULE_0___default.a.useState(hasGlanceData ? 'synopsis' : 'details'),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      detailsView = _React$useState2[0],
+      setDetailsView = _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;
+  var isIPad = mediaQuery === _libs_shared_src_enums_MediaQueries__WEBPACK_IMPORTED_MODULE_8__["MediaQueryStrings"].SM || mediaQuery === _libs_shared_src_enums_MediaQueries__WEBPACK_IMPORTED_MODULE_8__["MediaQueryStrings"].MD || isMobile; // 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_16__["useOnScroll"])(throttledOnUpdateViewport);
+  Object(shared_hooks_useWindowListeners__WEBPACK_IMPORTED_MODULE_16__["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
 
-function isDisabled(subject, expandedSubject) {
-  if (!expandedSubject || subject.id === expandedSubject.id) return false;
-  if (expandedSubject.children.find(function (child) {
-    return child.id === subject.id;
-  })) return false;
-  return true;
+    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_21__["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, isIPad, isMobile)
+  })), detailsView === 'synopsis' && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(shared_components_synopsis_Synopsis__WEBPACK_IMPORTED_MODULE_20__["Synopsis"], {
+    theme: glanceTheme,
+    video: video,
+    hasGlanceData: hasGlanceData,
+    hasDetails: hasDetails,
+    onClickShowDescription: function onClickShowDescription() {
+      return setDetailsView('details');
+    },
+    hasCurriculumLinks: !!((_k = curriculumLinks) === null || _k === void 0 ? void 0 : _k.length),
+    onClickShowCurriculumLinks: function onClickShowCurriculumLinks() {
+      return setDetailsView('curriculumLinks');
+    }
+  }), detailsView === 'details' && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(shared_components_video_details_VideoDetails__WEBPACK_IMPORTED_MODULE_15__["VideoDetailsWithScrollbar"], {
+    video: video,
+    hasBadges: hasBadges,
+    hasPPDD: hasPPDD,
+    hasGlanceData: hasGlanceData,
+    onClickShowSynopsis: function onClickShowSynopsis() {
+      return setDetailsView('synopsis');
+    },
+    hasCurriculumLinks: !!((_l = curriculumLinks) === null || _l === void 0 ? void 0 : _l.length),
+    onClickSeeCurriculumLinks: function onClickSeeCurriculumLinks() {
+      return setDetailsView('curriculumLinks');
+    }
+  }), detailsView === 'curriculumLinks' && react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_libs_shared_src_components_curriculum_links_CurriculumLinks__WEBPACK_IMPORTED_MODULE_13__["CurriculumLinks"], {
+    height: shared_constants_MinimumGlanceHeight__WEBPACK_IMPORTED_MODULE_22__["MINIMUM_GLANCE_HEIGHT"],
+    curriculumLinks: curriculumLinks,
+    onClickSeeLess: function onClickSeeLess() {
+      return setDetailsView(hasGlanceData ? 'synopsis' : 'details');
+    }
+  }), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(shared_components_resources_Resources__WEBPACK_IMPORTED_MODULE_14__["Resources"], {
+    video: video
+  }), !!((_o = (_m = video.interactives) === 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('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'
+    }
+  })), !!((_q = (_p = video.clips) === null || _p === void 0 ? void 0 : _p.data) === null || _q === void 0 ? void 0 : _q.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'
+    }
+  })));
 }
 
-function SubjectPreferenceGridRow(props) {
-  var _React$useContext = react__WEBPACK_IMPORTED_MODULE_0__["useContext"](_contexts_SubjectPreferencesContext__WEBPACK_IMPORTED_MODULE_5__["SubjectPreferencesContext"]),
-      expandedSubject = _React$useContext.expandedSubject,
-      selections = _React$useContext.selectedSubjects;
-
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, props.subjects.map(function (subject) {
-    var itemDisabled = isDisabled(subject, expandedSubject);
-    var clickHandler = props.onSelect;
-    if (subject.isExpandableOption) clickHandler = props.onExpand;
-    if (itemDisabled) clickHandler = props.onCollapse;
-    if (props.hasSelectedBulk) clickHandler = function clickHandler() {};
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](___WEBPACK_IMPORTED_MODULE_4__["SubjectPreferenceItem"], {
-      key: subject.id,
-      subject: subject,
-      selected: !props.hasSelectedBulk && selections.includes(subject.id),
-      disabled: props.hasSelectedBulk || itemDisabled,
-      onClick: function onClick(e) {
-        return clickHandler(subject);
-      },
-      hasSelectedBulk: props.hasSelectedBulk
-    });
+/***/ }),
+
+/***/ "./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");
+
+
+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
+    }
+  })), video.resources.data.map(function (r, i) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+      key: i
+    }, r.name);
   }));
 }
 
-function SubjectPreferenceGrid(props) {
-  var subjects = props.subjects,
-      hasSelectedBulk = props.hasSelectedBulk,
-      eventHandlers = __rest(props, ["subjects", "hasSelectedBulk"]);
+/***/ }),
+
+/***/ "./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 _React$useContext2 = react__WEBPACK_IMPORTED_MODULE_0__["useContext"](_contexts_SubjectPreferencesContext__WEBPACK_IMPORTED_MODULE_5__["SubjectPreferencesContext"]),
-      expandedSubject = _React$useContext2.expandedSubject;
 
-  var itemsPerRow = useGetRowItemCapacity();
+
+
+
+
+
+var namespace = 'shared.synopsis';
+function Synopsis(props) {
+  var _a;
+
+  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 (!props.hasGlanceData) return;
+    var html = marked__WEBPACK_IMPORTED_MODULE_1__(props.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 = props.video.glance) === null || _a === void 0 ? void 0 : _a.content]);
   /**
-   * This is an array of arrays, where each sub-array is a row of classifications.
-   * We do this to make sure any sub-grid's of child preference options get rendered in the row
-   * directly beneath their parent's row.
+   * If we don't have a glance, or our glance is not markdown
+   * we tell the PlayPage to render the description instead and return.
    */
 
-  var subjectRows = subjects.reduce(function (acc, subject, index) {
-    index % itemsPerRow === 0 ? acc.push([subject]) // Start a new row
-    : _common_src_react_utils_ArrayHelper__WEBPACK_IMPORTED_MODULE_1__["ArrayHelper"].last(acc).push(subject); // Fill up an existing row
+  if (!props.hasGlanceData && props.hasDetails) {
+    props.onClickShowDescription();
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null);
+  }
+  /**
+   * 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.
+   */
 
-    return acc;
-  }, []);
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("ul", {
-    className: _subject_preference_grid_scss__WEBPACK_IMPORTED_MODULE_6___default.a.grid
-  }, subjectRows.map(function (row, i) {
-    var isExpanded = expandedSubject && !!row.find(function (subject) {
-      return expandedSubject.id === subject.id && subject.isExpandableOption;
+
+  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
+    }
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: 'mt-3'
+  }, props.hasDetails && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_5__["DivButton"], {
+    onClick: props.onClickShowDescription,
+    className: 'cursor-pointer d-inline-block mr-4 font-weight-500'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_4__["Text"], {
+    namespace: namespace,
+    phrase: 'readFullDescription'
+  })), props.hasCurriculumLinks && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_5__["DivButton"], {
+    onClick: props.onClickShowCurriculumLinks,
+    className: 'cursor-pointer d-inline-block font-weight-500'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_4__["Text"], {
+    namespace: namespace,
+    phrase: 'seeCurriculumLinks'
+  })))), props.theme ? Object.keys(props.theme.data).map(function (imageDataKey) {
+    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+      key: props.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(props.theme.data[imageDataKey].url, {
+          format: 'png'
+        }), "')")
+      }
     });
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], {
-      key: i
-    }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SubjectPreferenceGridRow, Object.assign({
-      subjects: row,
-      hasSelectedBulk: hasSelectedBulk
-    }, eventHandlers)), isExpanded && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("li", {
-      className: "".concat(_subject_preference_grid_scss__WEBPACK_IMPORTED_MODULE_6___default.a.subgrid, " m-0")
-    }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SubjectPreferenceGrid, Object.assign({
-      subjects: expandedSubject.children,
-      hasSelectedBulk: hasSelectedBulk
-    }, eventHandlers))));
-  }));
+  }) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null));
 }
 
 /***/ }),
 
-/***/ "../../libs/shared/src/apps/subjects/components/preferences/subject-preference-grid/subject-preference-grid.scss":
-/*!***********************************************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/subjects/components/preferences/subject-preference-grid/subject-preference-grid.scss ***!
-  \***********************************************************************************************************************************************************/
+/***/ "./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 = {"grid":"cv--grid--G_RXX","subgrid":"cv--subgrid--38ohZ"};
+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"};
 
 /***/ }),
 
-/***/ "../../libs/shared/src/apps/subjects/components/preferences/subject-preference-item/SubjectPreferenceItem.tsx":
-/*!********************************************************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/subjects/components/preferences/subject-preference-item/SubjectPreferenceItem.tsx ***!
-  \********************************************************************************************************************************************************/
-/*! exports provided: SubjectPreferenceItem */
+/***/ "./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__, "SubjectPreferenceItem", function() { return SubjectPreferenceItem; });
+/* 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 _utils_ImageHelper__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../utils/ImageHelper */ "../../libs/shared/src/utils/ImageHelper.ts");
-/* harmony import */ var _enums_Images__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../../../enums/Images */ "../../libs/shared/src/enums/Images.ts");
-/* harmony import */ var _contexts_SubjectPreferencesContext__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../../contexts/SubjectPreferencesContext */ "../../libs/shared/src/apps/subjects/contexts/SubjectPreferencesContext.ts");
-/* harmony import */ var _preference_item_PreferenceItem__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../preference-item/PreferenceItem */ "../../libs/shared/src/apps/subjects/components/preferences/preference-item/PreferenceItem.tsx");
-/* harmony import */ var _components_tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../../../../components/tooltip/Tooltip */ "../../libs/shared/src/components/tooltip/Tooltip.tsx");
+/* 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 _libs_shared_src_components_tags_TagList__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../../../../../libs/shared/src/components/tags/TagList */ "../../libs/shared/src/components/tags/TagList.tsx");
+/* harmony import */ var shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! shared/constants/LiteRadioChannels */ "./src/shared/constants/LiteRadioChannels.ts");
+/* harmony import */ var shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! shared/constants/LiteActions */ "./src/shared/constants/LiteActions.ts");
+/* harmony import */ var shared_components_immersive_reader_ImmersiveReader__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! shared/components/immersive-reader/ImmersiveReader */ "./src/shared/components/immersive-reader/ImmersiveReader.tsx");
+/* harmony import */ var shared_constants_MinimumGlanceHeight__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! shared/constants/MinimumGlanceHeight */ "./src/shared/constants/MinimumGlanceHeight.ts");
 
 
 
 
 
 
-function SubjectPreferenceItem(props) {
-  var _a, _b, _c, _d;
 
-  var context = react__WEBPACK_IMPORTED_MODULE_0__["useContext"](_contexts_SubjectPreferencesContext__WEBPACK_IMPORTED_MODULE_3__["SubjectPreferencesContext"]);
-  var coverUrl = props.subject.cover ? _utils_ImageHelper__WEBPACK_IMPORTED_MODULE_1__["ImageHelper"].createUrl(props.subject.cover.url, {
-    size: _enums_Images__WEBPACK_IMPORTED_MODULE_2__["ImageSize"].Small
-  }) : '';
-  var childIds = props.subject.isExpandableOption ? props.subject.children.map(function (child) {
-    return child.id;
-  }) : [];
-  var selectedChildCount = !props.hasSelectedBulk ? (_b = (_a = context) === null || _a === void 0 ? void 0 : _a.selectedSubjects) === null || _b === void 0 ? void 0 : _b.filter(function (selection) {
-    return childIds.includes(selection);
-  }).length : 0;
-  var component = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_preference_item_PreferenceItem__WEBPACK_IMPORTED_MODULE_4__["PreferenceItem"], {
-    name: props.subject.name,
-    imageUrl: coverUrl,
-    onClick: props.onClick,
-    isSelected: props.selected,
-    isDisabled: props.disabled,
-    isExpandable: props.subject.isExpandableOption,
-    expand: ((_d = (_c = context) === null || _c === void 0 ? void 0 : _c.expandedSubject) === null || _d === void 0 ? void 0 : _d.id) === props.subject.id,
-    selectedChildCount: selectedChildCount,
-    extraClasses: props.extraClasses,
-    hideStatus: props.hideStatus
-  });
-  return props.disabled ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", null, component) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_components_tooltip_Tooltip__WEBPACK_IMPORTED_MODULE_5__["Tooltip"], {
-    title: props.subject.name
-  }, component);
+
+
+
+
+
+
+var namespace = 'shared.videoDetails';
+var getPhrase = _libs_common_src_backbone_services_LanguageService__WEBPACK_IMPORTED_MODULE_2__["LanguageService"].encloseNamespace(namespace);
+
+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);
+}
+
+function VideoDetailsWithScrollbar(props) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+
+  var video = props.video;
+  if (!props.hasBadges && !props.hasPPDD && !((_b = (_a = props.video.tags) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.length) && !props.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: shared_constants_MinimumGlanceHeight__WEBPACK_IMPORTED_MODULE_12__["MINIMUM_GLANCE_HEIGHT"]
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: video.description ? 'pb-2' : ''
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: 'mb-2 d-flex align-items-center justify-content-between'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("h2", {
+    className: 'h6 mb-0'
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_3__["Text"], {
+    phrase: 'details'
+  })), (props.hasGlanceData || props.hasCurriculumLinks) && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_div_button_DivButton__WEBPACK_IMPORTED_MODULE_6__["DivButton"], {
+    className: 'text-muted',
+    onClick: props.hasGlanceData ? props.onClickShowSynopsis : props.onClickSeeCurriculumLinks
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_libs_shared_src_components_text_Text__WEBPACK_IMPORTED_MODULE_3__["Text"], {
+    phrase: props.hasGlanceData ? 'seeGlance' : 'seeCurriculumLinks'
+  }))), props.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
+  })), props.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_8__["TagList"], {
+    tags: video.tags,
+    getAppLink: function getAppLink(tag) {
+      return {
+        application: shared_constants_LiteRadioChannels__WEBPACK_IMPORTED_MODULE_9__["AppChannels"].SEARCH,
+        action: shared_constants_LiteActions__WEBPACK_IMPORTED_MODULE_10__["Actions"].Search.HOME,
+        params: {
+          tag: tag.name
+        }
+      };
+    }
+  })), !!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(props.hasBadges || props.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_11__["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'
+    }
+  })), props.video.description && react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("p", {
+    className: 'mb-0'
+  }, props.video.description)))));
 }
 
 /***/ }),
 
-/***/ "../../libs/shared/src/apps/subjects/contexts/SubjectPreferencesContext.ts":
-/*!*********************************************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/apps/subjects/contexts/SubjectPreferencesContext.ts ***!
-  \*********************************************************************************************************************/
-/*! exports provided: SubjectPreferencesContext */
+/***/ "./src/shared/constants/MinimumGlanceHeight.ts":
+/*!*****************************************************!*\
+  !*** ./src/shared/constants/MinimumGlanceHeight.ts ***!
+  \*****************************************************/
+/*! exports provided: MINIMUM_GLANCE_HEIGHT */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SubjectPreferencesContext", function() { return SubjectPreferencesContext; });
-/* 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 SubjectPreferencesContext = Object(react__WEBPACK_IMPORTED_MODULE_0__["createContext"])(undefined);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MINIMUM_GLANCE_HEIGHT", function() { return MINIMUM_GLANCE_HEIGHT; });
+// 368 is the min height of Video at a glance which is defined as $glanceHeight in synopsis.scss
+var MINIMUM_GLANCE_HEIGHT = 368; // px
 
 /***/ }),
 
-/***/ "../../libs/shared/src/hooks/UseAlerts.ts":
-/*!************************************************************************************!*\
-  !*** C:/ClickView Projects/@clickview/packages/libs/shared/src/hooks/UseAlerts.ts ***!
-  \************************************************************************************/
-/*! exports provided: useAlerts */
+/***/ "./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__, "useAlerts", function() { return useAlerts; });
-/* harmony import */ var _common_src_react_hooks_UseService__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../common/src/react/hooks/UseService */ "../../libs/common/src/react/hooks/UseService.ts");
-/* harmony import */ var _common_src_backbone_services_BaseAlertService__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../common/src/backbone/services/BaseAlertService */ "../../libs/common/src/backbone/services/BaseAlertService.ts");
-/* harmony import */ var _common_src_backbone_constants_CommonServices__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../../common/src/backbone/constants/CommonServices */ "../../libs/common/src/backbone/constants/CommonServices.ts");
-
+/* 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 useAlerts = function useAlerts() {
-  var alertService = Object(_common_src_react_hooks_UseService__WEBPACK_IMPORTED_MODULE_0__["useService"])(_common_src_backbone_constants_CommonServices__WEBPACK_IMPORTED_MODULE_2__["CommonServices"].ALERT);
-  return {
-    success: function success(alertContent) {
-      alertService.success(alertContent)();
-    },
-    error: function error(alertContent) {
-      alertService.error(alertContent)();
-    },
-    warning: function warning(alertContent) {
-      alertService.createAlert({
-        type: _common_src_backbone_services_BaseAlertService__WEBPACK_IMPORTED_MODULE_1__["AlertType"].Warning,
-        heading: _common_src_backbone_services_BaseAlertService__WEBPACK_IMPORTED_MODULE_1__["DefaultAlertHeading"].Warning,
-        message: alertContent
-      });
-    }
+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 useOnScroll = createUseWindowListener('scroll');
+var useOnResize = createUseWindowListener('resize');
 
 /***/ })