win95-media-player
Version:
Back from 1995, and running on your website
287 lines (255 loc) • 9.47 kB
JavaScript
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 _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
var React = require('react');
var PropTypes = require('prop-types');
var _require = require('@cassette/core'),
playerContextFilter = _require.playerContextFilter,
PlayerPropTypes = _require.PlayerPropTypes;
var _require2 = require('@cassette/components'),
VideoDisplay = _require2.VideoDisplay;
var _require3 = require('react95'),
themes = _require3.themes,
Window = _require3.Window,
WindowHeader = _require3.WindowHeader,
WindowContent = _require3.WindowContent,
Toolbar = _require3.Toolbar,
Button = _require3.Button,
Cutout = _require3.Cutout,
Divider = _require3.Divider;
var _require4 = require('styled-components'),
ThemeProvider = _require4.ThemeProvider;
var ResizeObserver = require('resize-observer-polyfill')["default"];
var ProgressControl = require('./ProgressControl');
var MediaBtn = require('./MediaBtn');
var SeekButton = require('./SeekButton');
var Icon = require('./Icon');
var SimpleDivider = require('./SimpleDivider');
var VerticalDivider = require('./VerticalDivider');
var convertToTime = require('../utils/convertToTime');
var windowHeaderStyle = {
padding: 0,
height: 'initial',
lineHeight: '1.4em'
};
var headerToolbarStyle = {
padding: 0
};
var windowContentStyle = {
padding: 0,
marginRight: 2,
flexGrow: 1,
display: 'flex',
flexDirection: 'column'
};
var Spacer = function Spacer() {
return React.createElement("div", {
style: {
width: 8
}
});
};
var TinySpacer = function TinySpacer() {
return React.createElement("div", {
style: {
width: 3
}
});
};
var titleBarButtonStyle = {
width: 'initial',
height: 'initial'
};
var MediaPlayerView =
/*#__PURE__*/
function (_React$PureComponent) {
_inheritsLoose(MediaPlayerView, _React$PureComponent);
function MediaPlayerView(props) {
var _this;
_this = _React$PureComponent.call(this, props) || this;
_this.state = {
width: Infinity
};
_this.randomId = ('id' + Math.random()).replace(/\./g, '-');
return _this;
}
var _proto = MediaPlayerView.prototype;
_proto.componentDidMount = function componentDidMount() {
var _this2 = this;
var elem = document.getElementById(this.randomId);
this.resizeObserver = new ResizeObserver(function (entries, observer) {
for (var _iterator = entries, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
var _ref;
if (_isArray) {
if (_i >= _iterator.length) break;
_ref = _iterator[_i++];
} else {
_i = _iterator.next();
if (_i.done) break;
_ref = _i.value;
}
var entry = _ref;
_this2.setState({
width: entry.contentRect.width
});
}
});
this.resizeObserver.observe(elem);
};
_proto.componentWillUnmount = function componentWillUnmount() {
this.resizeObserver.disconnect();
};
_proto.render = function render() {
var _this$props = this.props,
getDisplayText = _this$props.getDisplayText,
showVideo = _this$props.showVideo,
fullscreenEnabled = _this$props.fullscreenEnabled,
className = _this$props.className,
style = _this$props.style,
fullscreen = _this$props.fullscreen,
requestFullscreen = _this$props.requestFullscreen,
requestExitFullscreen = _this$props.requestExitFullscreen,
playlist = _this$props.playlist,
activeTrackIndex = _this$props.activeTrackIndex,
paused = _this$props.paused,
currentTime = _this$props.currentTime,
onTogglePause = _this$props.onTogglePause,
onBackSkip = _this$props.onBackSkip,
onForwardSkip = _this$props.onForwardSkip,
onSeekPreview = _this$props.onSeekPreview,
onSeekComplete = _this$props.onSeekComplete;
var width = this.state.width;
return React.createElement(ThemeProvider, {
theme: themes["default"]
}, React.createElement(Window, {
id: this.randomId,
style: _extends({
fontSize: 13
}, style, fullscreen ? {
margin: 0,
width: '100%',
maxWidth: 'initial',
height: '100%'
} : {}),
className: className
}, React.createElement("div", {
style: {
display: 'flex',
flexDirection: 'column',
height: fullscreen ? '100%' : undefined
}
}, React.createElement(WindowHeader, {
style: windowHeaderStyle
}, React.createElement(Toolbar, {
style: headerToolbarStyle
}, React.createElement(TinySpacer, null), React.createElement(Icon, {
name: showVideo ? 'video' : 'audio'
}), React.createElement(TinySpacer, null), React.createElement("span", {
style: {
flexGrow: 1,
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
overflow: 'hidden'
}
}, getDisplayText(playlist[activeTrackIndex]), "\xA0 (", paused ? 'paused' : 'playing', ")"), React.createElement(MediaBtn, {
title: "Minimize",
icon: "minimize",
style: titleBarButtonStyle,
disabled: true
}), React.createElement(MediaBtn, {
title: "Fullscreen",
icon: fullscreen ? 'unmaximize' : 'maximize',
style: titleBarButtonStyle,
onClick: fullscreen ? requestExitFullscreen : requestFullscreen,
disabled: !fullscreenEnabled
}), React.createElement(TinySpacer, null), React.createElement(MediaBtn, {
title: "Close",
icon: "x",
style: titleBarButtonStyle,
disabled: true
}), React.createElement(TinySpacer, null))), React.createElement(Toolbar, {
style: _extends({}, headerToolbarStyle, {
position: 'relative'
})
}, ['File', 'Edit', 'Device', 'Scale', 'Help'].map(function (menuHeader) {
return React.createElement(Button, {
key: menuHeader,
style: {
fontSize: 13,
height: '1.6em'
},
size: "sm",
flat: true,
disabled: true
}, React.createElement("span", {
style: {
textDecoration: 'underline'
}
}, menuHeader[0]), menuHeader.slice(1));
})), React.createElement(WindowContent, {
style: windowContentStyle
}, showVideo && React.createElement(VideoDisplay, {
style: {
flexGrow: 1
}
}), React.createElement(SimpleDivider, null), React.createElement(ProgressControl, null), React.createElement(Divider, null), React.createElement(Toolbar, null, React.createElement(MediaBtn, {
title: paused ? 'Play' : 'Pause',
icon: paused ? 'play' : 'pause',
onClick: onTogglePause
}), React.createElement(MediaBtn, {
title: "Stop",
icon: "stop",
disabled: true
}), React.createElement(MediaBtn, {
title: "Eject",
icon: "eject",
disabled: true
}), width >= 260 && React.createElement(React.Fragment, null, React.createElement(Spacer, null), React.createElement(MediaBtn, {
title: "Previous",
icon: "backskip",
onClick: onBackSkip
}), React.createElement(SeekButton, {
type: "rewind"
}), React.createElement(SeekButton, {
type: "fastforward"
}), React.createElement(MediaBtn, {
title: "Next",
icon: "forwardskip",
onClick: onForwardSkip
})), width >= 310 && React.createElement(React.Fragment, null, React.createElement(Spacer, null), React.createElement(MediaBtn, {
title: "Start Selection",
icon: "selectionstart",
disabled: true
}), React.createElement(MediaBtn, {
title: "End Selection",
icon: "selectionend",
disabled: true
})), React.createElement(Spacer, null), React.createElement(VerticalDivider, null), React.createElement(Spacer, null), React.createElement(Cutout, {
shadow: false,
style: {
flexGrow: 1
}
}, React.createElement("span", {
style: {
marginLeft: 2
}
}, convertToTime(currentTime))))))));
};
return MediaPlayerView;
}(React.PureComponent);
MediaPlayerView.propTypes = {
getDisplayText: PropTypes.func.isRequired,
showVideo: PropTypes.bool.isRequired,
fullscreenEnabled: PropTypes.bool.isRequired,
className: PropTypes.string,
style: PropTypes.object,
fullscreen: PropTypes.bool.isRequired,
requestFullscreen: PropTypes.func.isRequired,
requestExitFullscreen: PropTypes.func.isRequired,
playlist: PropTypes.arrayOf(PlayerPropTypes.track.isRequired).isRequired,
activeTrackIndex: PropTypes.number.isRequired,
paused: PropTypes.bool.isRequired,
onTogglePause: PropTypes.func.isRequired,
onBackSkip: PropTypes.func.isRequired,
onForwardSkip: PropTypes.func.isRequired
};
module.exports = playerContextFilter(MediaPlayerView, ['fullscreen', 'requestFullscreen', 'requestExitFullscreen', 'playlist', 'activeTrackIndex', 'paused', 'currentTime', 'onSeekPreview', 'onSeekComplete', 'onTogglePause', 'onBackSkip', 'onForwardSkip']);