@desynova-digital/player 3.9.6 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@desynova-digital/player",
-  "version": "3.9.6",
+  "version": "4.0.0",
   "description": "Video Player Package for Contido Application",
   "main": "index.js",
   "scripts": {
@@ -23,6 +23,10 @@
   "author": "ubaid@desynova.com",
   "license": "ISC",
   "devDependencies": {
+    "@babel/cli": "^7.21.0",
+    "@babel/core": "^7.21.3",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "^10.1.0",

package/playlist/Playlist.js

@@ -0,0 +1,67 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _components = require("@desynova-digital/components");
+var _templateObject, _templateObject2, _templateObject3;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+/*
+ * import { play } from '../actions/player';
+ * import { colors } from '@desynova-digital/tokens';
+ */
+
+// import colors from '../colors';
+
+var propTypes = {
+  playlist: _propTypes.PropTypes.instanceOf(Array),
+  videoId: _propTypes.PropTypes.string,
+  playlistClick: _propTypes.PropTypes.func
+};
+var PlaylistContainer = (0, _styledComponents["default"])('div')(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", " {\n    display: none;\n  }\n"])), _components.Carousel.Header);
+var PlaylistCarousel = (0, _styledComponents["default"])(_components.Carousel)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 100%;\n"])));
+var PlaylistCard = (0, _styledComponents["default"])('div')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 143px;\n  height: 80px;\n  opacity: ", ";\n  background: url(", ") 50% 50%/100% auto no-repeat;\n  transform: ", ";\n  transition: all 550ms cubic-bezier(0.02, 0.01, 0.47, 1);\n  cursor: ", ";\n  pointer-events: ", ";\n  &:hover {\n    opacity: 1;\n    transform: translateY(0px);\n  }\n  .asset-filename {\n    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);\n    font-family: SFUIText-Medium;\n    font-size: 12px;\n    line-height: 1;\n    color: #ffffff;\n    text-align: left;\n    height: auto;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    word-break: break-word;\n    line-height: 17px;\n    padding: 5px;\n  }\n"])), function (props) {
+  return props.active ? '1' : '0.5';
+}, function (props) {
+  return props.thumbnail;
+}, function (props) {
+  return props.active ? 'translateY(0px)' : 'translateY(20px)';
+}, function (props) {
+  return props.active ? 'default' : 'pointer';
+}, function (props) {
+  return props.active ? 'none' : 'all';
+});
+var Playlist = function Playlist(_ref) {
+  var playlist = _ref.playlist,
+    videoId = _ref.videoId,
+    playlistClick = _ref.playlistClick;
+  var handleCardClick = function handleCardClick(ingest_db_id) {
+    if (playlistClick) {
+      playlistClick(ingest_db_id);
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(PlaylistContainer, null, playlist && playlist.length ? /*#__PURE__*/_react["default"].createElement(PlaylistCarousel, null, playlist.map(function (asset) {
+    return /*#__PURE__*/_react["default"].createElement(PlaylistCard, {
+      key: asset.ingest_db_id,
+      thumbnail: asset.thumbnail,
+      active: videoId === asset.ingest_db_id,
+      onClick: function onClick() {
+        handleCardClick(asset.ingest_db_id);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("p", {
+      className: "asset-filename"
+    }, asset.filename || asset.asset_name));
+  })) : null);
+};
+var _default = Playlist;
+exports["default"] = _default;
+Playlist.propTypes = propTypes;
+Playlist.displayName = 'Playlist';

package/playlist/Playlist.jsx

@@ -0,0 +1,91 @@
+import { PropTypes } from 'prop-types';
+import React, { Component } from 'react';
+import styled from 'styled-components';
+import { Carousel } from '@desynova-digital/components';
+/*
+ * import { play } from '../actions/player';
+ * import { colors } from '@desynova-digital/tokens';
+ */
+
+// import colors from '../colors';
+
+const propTypes = {
+  playlist: PropTypes.instanceOf(Array),
+  videoId: PropTypes.string,
+  playlistClick: PropTypes.func
+};
+
+const PlaylistContainer = styled('div')`
+  ${Carousel.Header} {
+    display: none;
+  }
+`;
+
+const PlaylistCarousel = styled(Carousel)`
+  width: 100%;
+`;
+
+const PlaylistCard = styled('div')`
+  width: 143px;
+  height: 80px;
+  opacity: ${(props) => (props.active ? '1' : '0.5')};
+  background: url(${(props) => props.thumbnail}) 50% 50%/100% auto no-repeat;
+  transform: ${(props) => (props.active ? 'translateY(0px)' : 'translateY(20px)')};
+  transition: all 550ms cubic-bezier(0.02, 0.01, 0.47, 1);
+  cursor: ${(props) => (props.active ? 'default' : 'pointer')};
+  pointer-events: ${(props) => (props.active ? 'none' : 'all')};
+  &:hover {
+    opacity: 1;
+    transform: translateY(0px);
+  }
+  .asset-filename {
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
+    font-family: SFUIText-Medium;
+    font-size: 12px;
+    line-height: 1;
+    color: #ffffff;
+    text-align: left;
+    height: auto;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+    line-height: 17px;
+    padding: 5px;
+  }
+`;
+
+const Playlist = ({ playlist, videoId, playlistClick }) => {
+  const handleCardClick = (ingest_db_id) => {
+    if (playlistClick) {
+      playlistClick(ingest_db_id);
+    }
+  };
+
+  return (
+    <PlaylistContainer>
+      {playlist && playlist.length ? (
+        <PlaylistCarousel>
+          {playlist.map((asset) => {
+            return (
+              <PlaylistCard
+                key={asset.ingest_db_id}
+                thumbnail={asset.thumbnail}
+                active={videoId === asset.ingest_db_id}
+                onClick={() => {
+                  handleCardClick(asset.ingest_db_id);
+                }}>
+                <p className="asset-filename">{asset.filename || asset.asset_name}</p>
+              </PlaylistCard>
+            );
+          })}
+        </PlaylistCarousel>
+      ) : null}
+    </PlaylistContainer>
+  );
+};
+
+export default Playlist;
+Playlist.propTypes = propTypes;
+Playlist.displayName = 'Playlist';

package/playlist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _Playlist["default"];
+  }
+});
+var _Playlist = _interopRequireDefault(require("./Playlist"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }