@react95/core 5.5.0 → 5.7.1

package/esm/Video/Video.js

@@ -1,8 +1,12 @@
+var _excluded = ["name", "src", "videoProps", "style"];
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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; }
 
@@ -14,7 +18,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 
 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 _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_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; }
 
@@ -22,86 +26,6 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function _templateObject8() {
-  var data = _taggedTemplateLiteral(["\n  &::-webkit-slider-thumb {\n    height: 18px;\n    margin-top: -7px;\n    width: 10px;\n  }\n\n  &[value='0']::-webkit-slider-thumb {\n    margin-left: -2px;\n  }\n"]);
-
-  _templateObject8 = function _templateObject8() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n  background-color: transparent;\n  box-shadow: none;\n"]);
-
-  _templateObject7 = function _templateObject7() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject6() {
-  var data = _taggedTemplateLiteral(["\n  font-family: 'React95Video-Numbers';\n  text-transform: uppercase;\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 6;\n  margin-bottom: 4;\n\n  box-shadow: in;\n  background-color: canvas;\n  height: 50px;\n\n  color: canvasText;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 2 0;\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n        padding: 4;\n        svg {\n          fill: ", ";\n          border-bottom: 1px solid;\n          border-bottom-color: borderLightest;\n          border-right: 1px solid;\n          border-right-color: borderLightest;\n        }\n      "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    fill: ", ";\n  }\n\n  &&,\n  &:active,\n  &:focus {\n    width: 20px;\n    height: 20px;\n    padding: 7;\n\n    ", "\n  }\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 2;\n\n  display: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
 import * as React from 'react';
@@ -112,9 +36,9 @@ import Frame from '../Frame/Frame';
 import Button from '../Button';
 import Range from '../Range';
 import TitleBar from '../TitleBar';
-import { Play, Pause, Stop } from './buttons';
+import { Play, Pause, Stop, Fullscreen } from './buttons';
 import Divider from '../List/ListDivider';
-var VideoTag = styled.video(_templateObject(), function (_ref) {
+var VideoTag = styled.video(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 2;\n\n  display: ", ";\n"])), function (_ref) {
   var visible = _ref.visible;
   return visible ? 'block' : 'none';
 });
@@ -127,15 +51,15 @@ var Source = function Source(_ref2) {
   });
 };
 
-var ControlBtn = styled(Button)(_templateObject2(), th('colors.materialText'), function (_ref3) {
+var ControlBtn = styled(Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n\n  svg {\n    fill: ", ";\n  }\n\n  &&,\n  &:active,\n  &:focus {\n    width: 20px;\n    height: 20px;\n    padding: 7;\n\n    ", "\n  }\n"])), th('colors.materialText'), function (_ref3) {
   var disabled = _ref3.disabled;
-  return disabled && css(_templateObject3(), th('colors.borderDark'));
+  return disabled && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        padding: 4;\n        svg {\n          fill: ", ";\n          border-bottom: 1px solid;\n          border-bottom-color: borderLightest;\n          border-right: 1px solid;\n          border-right-color: borderLightest;\n        }\n      "])), th('colors.borderDark'));
 });
-var Controls = styled.div(_templateObject4());
-var CountDownContainer = styled(Frame)(_templateObject5());
-var VideoFont = styled.span(_templateObject6());
-var ResetFrame = styled(Frame)(_templateObject7());
-var VideoRange = styled(Range)(_templateObject8());
+var Controls = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  padding: 2 0;\n"])));
+var CountDownContainer = styled(Frame)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  padding: 6;\n  margin-bottom: 4;\n\n  box-shadow: in;\n  background-color: canvas;\n  height: 50px;\n\n  color: canvasText;\n"])));
+var VideoFont = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  font-family: 'React95Video-Numbers';\n  text-transform: uppercase;\n"])));
+var ResetFrame = styled(Frame)(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  background-color: transparent;\n  box-shadow: none;\n"])));
+var VideoRange = styled(Range)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  &::-webkit-slider-thumb {\n    height: 18px;\n    margin-top: -7px;\n    width: 10px;\n  }\n\n  &[value='0']::-webkit-slider-thumb {\n    margin-left: -2px;\n  }\n"])));
 
 var PlayOrPause = function PlayOrPause(_ref4) {
   var playing = _ref4.playing;
@@ -172,7 +96,7 @@ var VideoRenderer = function VideoRenderer(_ref5, ref) {
       src = _ref5.src,
       videoProps = _ref5.videoProps,
       style = _ref5.style,
-      props = _objectWithoutProperties(_ref5, ["name", "src", "videoProps", "style"]);
+      props = _objectWithoutProperties(_ref5, _excluded);
 
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -194,6 +118,7 @@ var VideoRenderer = function VideoRenderer(_ref5, ref) {
   var wrapperRef = React.useRef(null);
   var playPauseRef = React.useRef(null);
   var stopRef = React.useRef(null);
+  var fullScreenRef = React.useRef(null);
   var paths = arrayFy(src);
 
   var _paths = _slicedToArray(paths, 1),
@@ -221,6 +146,10 @@ var VideoRenderer = function VideoRenderer(_ref5, ref) {
 
       get stop() {
         return stopRef;
+      },
+
+      get fullScreen() {
+        return fullScreenRef;
       }
 
     };
@@ -330,7 +259,15 @@ var VideoRenderer = function VideoRenderer(_ref5, ref) {
       setPlaying(false);
     },
     ref: stopRef
-  }, /*#__PURE__*/React.createElement(Stop, null)), /*#__PURE__*/React.createElement(VideoRange, {
+  }, /*#__PURE__*/React.createElement(Stop, null)), /*#__PURE__*/React.createElement(ControlBtn, {
+    disabled: !loadeddata,
+    onClick: function onClick() {
+      var _player$current7;
+
+      player === null || player === void 0 ? void 0 : (_player$current7 = player.current) === null || _player$current7 === void 0 ? void 0 : _player$current7.requestFullscreen();
+    },
+    ref: fullScreenRef
+  }, /*#__PURE__*/React.createElement(Fullscreen, null)), /*#__PURE__*/React.createElement(VideoRange, {
     ref: progressRef,
     min: "0",
     max: "100",

package/esm/Video/buttons/Fullscreen.js

@@ -0,0 +1,20 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+
+var Fullscreen = function Fullscreen(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "6",
+    viewBox: "0 0 24 24",
+    height: "6",
+    "aria-label": "fullscreen"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M24 9h-2v-5h-7v-2h9v7zm-9 13v-2h7v-5h2v7h-9zm-15-7h2v5h7v2h-9v-7zm9-13v2h-7v5h-2v-7h9zm11 4h-16v12h16v-12z",
+    style: {
+      width: 1000
+    }
+  }));
+};
+
+export default Fullscreen;

package/esm/Video/buttons/index.js

@@ -1,4 +1,5 @@
 import Play from './Play';
 import Pause from './Pause';
 import Stop from './Stop';
-export { Play, Pause, Stop };
+import Fullscreen from './Fullscreen';
+export { Play, Pause, Stop, Fullscreen };

package/esm/index.js

@@ -1,6 +1,7 @@
 import { Modal, ModalContext } from './Modal';
 import { Tab, Tabs } from './Tabs';
 import Alert from './Alert';
+import Avatar from './Avatar';
 import Button from './Button';
 import Checkbox from './Checkbox';
 import Cursor from './Cursor';
@@ -20,4 +21,4 @@ import Tooltip from './Tooltip';
 import TitleBar from './TitleBar';
 import ThemeProvider from './ThemeProvider';
 import Video from './Video';
-export { Alert, Button, Checkbox, Cursor, Dropdown, Fieldset, Frame, GlobalStyle, Input, List, Modal, ModalContext, ProgressBar, RadioButton, Range, Tab, Tabs, TaskBar, TextArea, Tree, Tooltip, TitleBar, ThemeProvider, Video };
+export { Alert, Avatar, Button, Checkbox, Cursor, Dropdown, Fieldset, Frame, GlobalStyle, Input, List, Modal, ModalContext, ProgressBar, RadioButton, Range, Tab, Tabs, TaskBar, TextArea, Tree, Tooltip, TitleBar, ThemeProvider, Video };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react95/core",
-  "version": "5.5.0",
+  "version": "5.7.1",
   "description": "Windows 95 styleguide",
   "main": "./cjs",
   "repository": {
@@ -22,8 +22,8 @@
     "typescript": "^3.9.7"
   },
   "peerDependencies": {
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "styled-components": "^5.1.0"
   },
   "publishConfig": {
@@ -33,7 +33,7 @@
   "sideEffects": [
     "**/*.{woff2,woff,ttf,eot}"
   ],
-  "gitHead": "3aa8d180ff56d7c6018cf899c3b4e68997a6d8a6",
+  "gitHead": "5b4fedec6ed02e5c35308aef8aa991393e4761ae",
   "module": "./esm",
   "private": false,
   "types": "@types"