@desynova-digital/player 3.9.6 → 4.0.0

package/control/ControlBar.jsx

@@ -0,0 +1,264 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import styled from 'styled-components';
+import colors from '../utils/colors';
+import PlayToggle from './PlayToggle';
+// import { mergeAndSortChildren } from '../utils';
+import ForwardBackWardComponent from './ForwardBackwardControl';
+import CurrentTimeDisplay from './CurrentTimeDisplay';
+import DurationDisplay from './DurationDisplay';
+import VolumeMenuButton from './VolumneMenuButton';
+import AudioTracksMenuButton from './AudioTracksMenuButton';
+import SettingsMenuButton from './SettingsMenuButton';
+import FullscreenToggle from './FullscreenToggle';
+import MarkingControl from './MarkingControl';
+
+const PlayerControlBlock = styled.div`
+  width: 100%;
+  height: ${(props) => ((props.player === 'panel' && props.active) || props.player !== 'panel' ? '50px' : '0px')};
+  overflow: ${(props) =>
+    (props.player === 'panel' && props.active) || props.player !== 'panel' ? 'visible' : 'hidden'};
+  position: ${(props) => (props.player === 'panel' ? 'absolute' : 'relative')};
+  bottom: ${(props) => (props.player === 'panel' ? '0px' : 'initial')};
+  background: ${colors.common.base.black};
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  transition: all 250ms ease-in-out;
+`;
+
+const VideoControlBlock = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const ControlBar = ({
+  playerType,
+  actionClick,
+  controlType,
+  paused,
+  userActivity,
+  currentTime,
+  initialTime,
+  frameRate,
+  duration,
+  muted,
+  assetType,
+  volume,
+  isFullscreen,
+  audioTracksArr, //audio tracks props
+  activeAudio,
+  SDBorderActive, //settings menu props
+  playbackRate,
+  onAddMarker, //markers props
+  onDeleteMarker,
+  allowMarkerOverlap,
+  playerReadOnlyMode,
+  disablePlayerActions,
+  playerSelectedMarker,
+  markers
+}) => {
+  const getDefaultChildren = () => {
+    return [
+      <PlayToggle paused={paused} actionClick={actionClick} key="play-toggle" />,
+      <ForwardBackWardComponent mode="replay" seconds={10} actionClick={actionClick} key="replay-control-10" />,
+      <ForwardBackWardComponent mode="replay" actionClick={actionClick} key="replay-control" />,
+      <ForwardBackWardComponent mode="forward" actionClick={actionClick} key="forward-control" />,
+      <ForwardBackWardComponent mode="forward" seconds={10} actionClick={actionClick} key="forward-control-10" />,
+      <CurrentTimeDisplay
+        currentTime={currentTime}
+        initialTime={initialTime}
+        frameRate={frameRate}
+        key="current-time-display"
+      />,
+      <DurationDisplay duration={duration} frameRate={frameRate} key="duration-display" />,
+      <VolumeMenuButton
+        muted={muted}
+        assetType={assetType}
+        playerType={playerType}
+        actionClick={actionClick}
+        volume={volume}
+        style={{ margin: 'auto 10px auto auto' }}
+        key="volume-menu-button"
+      />,
+      <AudioTracksMenuButton
+        audioTracksArr={audioTracksArr}
+        activeAudio={activeAudio}
+        actionClick={actionClick}
+        key="audio-tracks-menu-button"
+      />,
+      <SettingsMenuButton
+        actionClick={actionClick}
+        SDBorderActive={SDBorderActive}
+        playbackRate={playbackRate}
+        key="settings-menu-button"
+      />,
+      <FullscreenToggle key="fullscreen-toggle" actionClick={actionClick} style={{ marginRight: '10px' }} />
+
+      //   // <CommentsButton {...this.props} key="comments-button" order={6.01} />,
+      //   // <EditorControlMenuButton
+      //   //   style={{ margin: 'auto 10px auto auto' }}
+      //   //   {...this.props}
+      //   //   key="edit-menu-button"
+      //   //   order={6.1}
+      //   // />,
+      //   <VolumeMenuButton
+      //     style={{ margin: 'auto 10px auto auto' }}
+      //     {...this.props}
+      //     key="volume-menu-button"
+      //     order={7}
+      //   />,
+      //   <SubtitleLanguagesMenuButton
+      //     {...this.props}
+      //     key="subtitle-menu-button"
+      //     order={7}
+      //   />,
+      //   <AudioTracksMenuButton
+      //     {...this.props}
+      //     key="audio-tracks-menu-button"
+      //     order={7}
+      //   />,
+      //   <SettingsMenuButton
+      //     {...this.props}
+      //     key="settings-menu-button"
+      //     order={8}
+      //   />,
+      //   <FullscreenToggle {...this.props} key="fullscreen-toggle" order={9} style={{ marginRight: '10px' }} />
+    ];
+  };
+
+  const getAdvancedChildren = () => {
+    return [
+      <PlayToggle paused={paused} actionClick={actionClick} key="play-toggle" />,
+      <ForwardBackWardComponent mode="replay" seconds={10} actionClick={actionClick} key="replay-control-10" />,
+      <ForwardBackWardComponent mode="replay" actionClick={actionClick} key="replay-control" />,
+      <ForwardBackWardComponent mode="forward" actionClick={actionClick} key="forward-control" />,
+      <ForwardBackWardComponent mode="forward" seconds={10} actionClick={actionClick} key="forward-control-10" />,
+      <CurrentTimeDisplay
+        currentTime={currentTime}
+        initialTime={initialTime}
+        frameRate={frameRate}
+        key="current-time-display"
+      />,
+      <DurationDisplay duration={duration} frameRate={frameRate} key="duration-display" />,
+      <MarkingControl
+        frameRate={frameRate}
+        actionClick={actionClick}
+        onAddMarker={onAddMarker}
+        onDeleteMarker={onDeleteMarker}
+        markers={markers}
+        controlType={controlType}
+        playerType={playerType}
+        allowMarkerOverlap={allowMarkerOverlap}
+        playerReadOnlyMode={playerReadOnlyMode}
+        disablePlayerActions={disablePlayerActions}
+        playerSelectedMarker={playerSelectedMarker}
+        currentTime={currentTime}
+        key="marking-controls"
+      />,
+      <VolumeMenuButton
+        muted={muted}
+        assetType={assetType}
+        playerType={playerType}
+        actionClick={actionClick}
+        volume={volume}
+        style={{ margin: 'auto 10px auto auto' }}
+        key="volume-menu-button"
+      />,
+      <AudioTracksMenuButton
+        audioTracksArr={audioTracksArr}
+        activeAudio={activeAudio}
+        actionClick={actionClick}
+        key="audio-tracks-menu-button"
+      />,
+      <SettingsMenuButton
+        actionClick={actionClick}
+        SDBorderActive={SDBorderActive}
+        playbackRate={playbackRate}
+        key="settings-menu-button"
+      />,
+      <FullscreenToggle key="fullscreen-toggle" actionClick={actionClick} style={{ marginRight: '10px' }} />
+
+      //   <ReplayControl {...this.props} key="replay-control" order={3.1} />,
+      //   <ForwardControl {...this.props} key="forward-control" order={4} />,
+      //   <ForwardControl {...this.props} seconds={10} key="forward-control-10" order={4.1} />,
+      //   <CurrentTimeDisplay
+      //     {...this.props}
+      //     key="current-time-display"
+      //     order={5.1}
+      //   />,
+      //   <TimeDivider {...this.props} key="time-divider" order={5.2} />,
+      //   <DurationDisplay {...this.props} key="duration-display" order={5.3} />,
+      //   <MarkingControl {...this.props} key="marking-controls" order={6} />,
+      //   // {/* <CommentsButton {...this.props} key="comments-button" order={6.01} />, */}
+      //   // {/* <ZoomMenuButton
+      //   //   style={{ marginLeft: '0 10px' }}
+      //   //   {...this.props}
+      //   //   key="zoom-menu-button"
+      //   //   order={7}
+      //   // />, */}
+      //   // <EditorControlMenuButton
+      //   //   style={{ margin: 'auto 10px auto auto' }}
+      //   //   {...this.props}
+      //   //   key="edit-menu-button"
+      //   //   order={7}
+      //   // />,
+      //   <VolumeMenuButton
+      //     style={{ margin: 'auto 10px auto auto' }}
+      //     {...this.props}
+      //     key="volume-menu-button"
+      //     order={8}
+      //   />,
+      //   <SubtitleLanguagesMenuButton
+      //     {...this.props}
+      //     key="subtitle-menu-button"
+      //     order={8}
+      //   />,
+      //   <CameraButton
+      //     order={9}
+      //     playerType={playerType}
+      //   />,
+      //   <SubtitleMovementMenu
+      //     {...this.props}
+      //     key="subtitle-movement-menu"
+      //     order={8}
+      //   />,
+      //   <AudioTracksMenuButton
+      //     {...this.props}
+      //     key="audio-tracks-menu-button"
+      //     order={9}
+      //   />,
+      //   <SettingsMenuButton
+      //     {...this.props}
+      //     key="settings-menu-button"
+      //     order={10}
+      //   />,
+      //   <FullscreenToggle {...this.props} key="fullscreen-toggle" order={11} style={{ marginRight: '10px' }}/>
+    ];
+  };
+
+  const getChildren = () => {
+    // const { controlType, children, fileType, player } = this.props;
+    // const childrens = React.Children.toArray(children);
+    let defaultChildren = [];
+    // if(fileType === 'image') {
+    //   defaultChildren = this.getImageChildrens();
+    // } else {
+    defaultChildren = controlType === 'advanced' && !isFullscreen ? getAdvancedChildren() : getDefaultChildren();
+    // }
+
+    return defaultChildren; // mergeAndSortChildren(defaultChildren, []);
+  };
+
+  const children = getChildren();
+
+  return (
+    <PlayerControlBlock id="controls-container" active={(userActivity && userActivity) || null} player={playerType}>
+      <VideoControlBlock>{children}</VideoControlBlock>
+    </PlayerControlBlock>
+  );
+};
+
+export default ControlBar;

package/control/CurrentTimeDisplay.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var propTypes = {
+  player: _propTypes.PropTypes.instanceOf(Object),
+  initialTime: _propTypes.PropTypes.number,
+  frameRate: _propTypes.PropTypes.number
+};
+var defaultProps = {
+  player: {}
+};
+var VideoCurrentTime = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: SFUIText-Regular;\n  font-size: 12px;\n  letter-spacing: -0.6px;\n  color: #ffffff;\n  min-width: 65px;\n  text-align: left;\n"])));
+var CurrentTimeDisplay = function CurrentTimeDisplay(_ref) {
+  var currentTime = _ref.currentTime,
+    initialTime = _ref.initialTime,
+    frameRate = _ref.frameRate;
+  var formattedTime = (0, _utils.secondsToTime)(currentTime.seconds, frameRate, initialTime);
+  return /*#__PURE__*/_react["default"].createElement(VideoCurrentTime, null, formattedTime);
+};
+CurrentTimeDisplay.propTypes = propTypes;
+CurrentTimeDisplay.defaultProps = defaultProps;
+CurrentTimeDisplay.displayName = 'CurrentTimeDisplay';
+var _default = CurrentTimeDisplay;
+exports["default"] = _default;

package/control/CurrentTimeDisplay.jsx

@@ -0,0 +1,35 @@
+import { PropTypes } from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+
+import { secondsToTime } from '../utils';
+
+const propTypes = {
+  player: PropTypes.instanceOf(Object),
+  initialTime: PropTypes.number,
+  frameRate: PropTypes.number
+};
+
+const defaultProps = {
+  player: {}
+};
+
+const VideoCurrentTime = styled.div`
+  font-family: SFUIText-Regular;
+  font-size: 12px;
+  letter-spacing: -0.6px;
+  color: #ffffff;
+  min-width: 65px;
+  text-align: left;
+`;
+
+const CurrentTimeDisplay = ({ currentTime, initialTime, frameRate }) => {
+  const formattedTime = secondsToTime(currentTime.seconds, frameRate, initialTime);
+  return <VideoCurrentTime>{formattedTime}</VideoCurrentTime>;
+};
+
+CurrentTimeDisplay.propTypes = propTypes;
+CurrentTimeDisplay.defaultProps = defaultProps;
+CurrentTimeDisplay.displayName = 'CurrentTimeDisplay';
+
+export default CurrentTimeDisplay;

package/control/DurationDisplay.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _propTypes = require("prop-types");
+var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var propTypes = {
+  player: _propTypes.PropTypes.instanceOf(Object),
+  frameRate: _propTypes.PropTypes.number,
+  separator: _propTypes.PropTypes.string
+};
+var defaultProps = {
+  player: {}
+};
+var VideoTotalDuration = _styledComponents["default"].div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-family: SFUIText-Regular;\n  font-size: 12px;\n  letter-spacing: -0.6px;\n  margin: 0 2px;\n  color: #888888;\n"])));
+var TimeSeperator = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  color: #888888;\n  margin: 0 2px;\n  font-family: SFUIText-Regular;\n  font-size: 12px;\n  letter-spacing: -0.6px;\n"])));
+function DurationDisplay(_ref) {
+  var duration = _ref.duration,
+    frameRate = _ref.frameRate,
+    separator = _ref.separator;
+  var formattedTime = (0, _utils.secondsToTime)(duration.seconds, frameRate);
+  var separatorText = separator || '/';
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(TimeSeperator, {
+    dir: "ltr"
+  }, separatorText), /*#__PURE__*/_react["default"].createElement(VideoTotalDuration, null, formattedTime));
+}
+DurationDisplay.propTypes = propTypes;
+DurationDisplay.defaultProps = defaultProps;
+DurationDisplay.displayName = 'DurationDisplay';
+var _default = DurationDisplay;
+exports["default"] = _default;

package/control/DurationDisplay.jsx

@@ -0,0 +1,48 @@
+import { PropTypes } from 'prop-types';
+import React from 'react';
+import styled from 'styled-components';
+
+import { secondsToTime } from '../utils';
+
+const propTypes = {
+  player: PropTypes.instanceOf(Object),
+  frameRate: PropTypes.number,
+  separator: PropTypes.string
+};
+
+const defaultProps = {
+  player: {}
+};
+
+const VideoTotalDuration = styled.div`
+  font-family: SFUIText-Regular;
+  font-size: 12px;
+  letter-spacing: -0.6px;
+  margin: 0 2px;
+  color: #888888;
+`;
+
+const TimeSeperator = styled.div`
+  color: #888888;
+  margin: 0 2px;
+  font-family: SFUIText-Regular;
+  font-size: 12px;
+  letter-spacing: -0.6px;
+`;
+
+function DurationDisplay({ duration, frameRate, separator }) {
+  const formattedTime = secondsToTime(duration.seconds, frameRate);
+  const separatorText = separator || '/';
+  return (
+    <>
+      <TimeSeperator dir="ltr">{separatorText}</TimeSeperator>
+      <VideoTotalDuration>{formattedTime}</VideoTotalDuration>
+    </>
+  );
+}
+
+DurationDisplay.propTypes = propTypes;
+DurationDisplay.defaultProps = defaultProps;
+DurationDisplay.displayName = 'DurationDisplay';
+
+export default DurationDisplay;

package/control/ForwardBackwardControl.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = require("prop-types");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _components = require("@desynova-digital/components");
+var _templateObject,
+  _this = void 0;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var ForwardReplayButton = (0, _styledComponents["default"])(_components.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  margin: 0 10px;\n  &:hover,\n  &:focus {\n    background: transparent;\n  }\n"])));
+var propTypes = {
+  actions: _propTypes.PropTypes.instanceOf(Object),
+  seconds: _propTypes.PropTypes.number
+};
+var defaultProps = {
+  actions: {},
+  seconds: 0.04
+};
+var ForwardBackWardComponent = function ForwardBackWardComponent(_ref) {
+  var mode = _ref.mode,
+    seconds = _ref.seconds,
+    actionClick = _ref.actionClick;
+  var getIcon = function getIcon() {
+    var icon = '';
+    if (mode === 'forward') {
+      if (seconds === 10) {
+        icon = 'forward-10';
+      } else {
+        icon = 'triangle-double-right';
+      }
+    } else {
+      if (seconds === 10) {
+        icon = 'rewind-10';
+      } else {
+        icon = 'triangle-double-left';
+      }
+    }
+    return icon;
+  };
+  var handleClick = function handleClick() {
+    // Depends mode to implement different actions
+    if (mode === 'forward') {
+      actionClick({
+        action: 'add_seconds',
+        value: seconds
+      });
+    } else {
+      actionClick({
+        action: 'add_seconds',
+        value: -seconds
+      });
+    }
+  };
+  return /*#__PURE__*/_react["default"].createElement(ForwardReplayButton, {
+    display: "rounded",
+    appearance: "cta",
+    icon: getIcon(),
+    iconWidth: seconds === 10 ? 22 : 14,
+    iconHeight: seconds === 10 ? 22 : 14,
+    width: 20,
+    height: 20,
+    ref: function ref(c) {
+      _this.button = c;
+    },
+    onClick: handleClick
+  });
+};
+ForwardBackWardComponent.propTypes = propTypes;
+ForwardBackWardComponent.defaultProps = defaultProps;
+var _default = ForwardBackWardComponent;
+exports["default"] = _default;

package/control/ForwardBackwardControl.jsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { PropTypes } from 'prop-types';
+import styled from 'styled-components';
+import { Button } from '@desynova-digital/components';
+
+const ForwardReplayButton = styled(Button)`
+  background: transparent;
+  border: none;
+  margin: 0 10px;
+  &:hover,
+  &:focus {
+    background: transparent;
+  }
+`;
+
+const propTypes = {
+  actions: PropTypes.instanceOf(Object),
+  seconds: PropTypes.number
+};
+
+const defaultProps = {
+  actions: {},
+  seconds: 0.04
+};
+
+const ForwardBackWardComponent = ({ mode, seconds, actionClick }) => {
+  const getIcon = () => {
+    let icon = '';
+    if (mode === 'forward') {
+      if (seconds === 10) {
+        icon = 'forward-10';
+      } else {
+        icon = 'triangle-double-right';
+      }
+    } else {
+      if (seconds === 10) {
+        icon = 'rewind-10';
+      } else {
+        icon = 'triangle-double-left';
+      }
+    }
+    return icon;
+  };
+
+  const handleClick = () => {
+    // Depends mode to implement different actions
+    if (mode === 'forward') {
+      actionClick({
+        action: 'add_seconds',
+        value: seconds
+      });
+    } else {
+      actionClick({
+        action: 'add_seconds',
+        value: -seconds
+      });
+    }
+  };
+
+  return (
+    <ForwardReplayButton
+      display="rounded"
+      appearance="cta"
+      icon={getIcon()}
+      iconWidth={seconds === 10 ? 22 : 14}
+      iconHeight={seconds === 10 ? 22 : 14}
+      width={20}
+      height={20}
+      ref={(c) => {
+        this.button = c;
+      }}
+      onClick={handleClick}
+    />
+  );
+};
+
+ForwardBackWardComponent.propTypes = propTypes;
+ForwardBackWardComponent.defaultProps = defaultProps;
+export default ForwardBackWardComponent;

package/control/FullscreenToggle.js

@@ -0,0 +1,82 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _propTypes = require("prop-types");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _components = require("@desynova-digital/components");
+var _templateObject;
+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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var propTypes = {
+  actions: _propTypes.PropTypes.instanceOf(Object),
+  player: _propTypes.PropTypes.instanceOf(Object),
+  playerType: _propTypes.PropTypes.oneOf(['dubbing_review', 'clipping_default', 'default', 'tagging', 'qc', 'subtitle', 'snp_edit', 'archive', 'restore', 'clipping', 'storyboard', 'panel'])
+};
+var defaultProps = {
+  actions: {},
+  player: {}
+};
+var FullscreenToggleButton = (0, _styledComponents["default"])(_components.Button)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: transparent;\n  border: none;\n  margin: 0 10px;\n  &:hover,\n  &:focus {\n    background: transparent;\n    svg path {\n      fill: #00cec6;\n    }\n  }\n"])));
+var FullscreenToggle = /*#__PURE__*/function (_Component) {
+  _inherits(FullscreenToggle, _Component);
+  var _super = _createSuper(FullscreenToggle);
+  function FullscreenToggle(props, context) {
+    var _this;
+    _classCallCheck(this, FullscreenToggle);
+    _this = _super.call(this, props, context);
+    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+  _createClass(FullscreenToggle, [{
+    key: "handleClick",
+    value: function handleClick() {
+      var actionClick = this.props.actionClick;
+      actionClick({
+        action: 'toggle_fullscreen'
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var playerType = this.props.playerType;
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, playerType !== 'panel' ? /*#__PURE__*/_react["default"].createElement(FullscreenToggleButton, {
+        display: "rounded",
+        appearance: "cta",
+        icon: "fullscreen",
+        ref: function ref(c) {
+          _this2.button = c;
+        },
+        onClick: this.handleClick,
+        iconWidth: 14,
+        iconHeight: 14,
+        width: 20,
+        height: 20
+      }) : null);
+    }
+  }]);
+  return FullscreenToggle;
+}(_react.Component);
+exports["default"] = FullscreenToggle;
+FullscreenToggle.propTypes = propTypes;
+FullscreenToggle.defaultProps = defaultProps;
+FullscreenToggle.displayName = 'FullscreenToggle';