@desynova-digital/player 4.0.1 → 4.0.2

package/playlist/Playlist.js

@@ -1,67 +0,0 @@
-"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

@@ -1,91 +0,0 @@
-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

@@ -1,13 +0,0 @@
-"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 }; }