Changed imports to ESM

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": [
-    ["@babel/preset-env", { "loose": true, modules: false }],
+    ["@babel/preset-env"],
     "@babel/react"
   ]
 }

src/MediaPlayer.js

@@ -1,7 +1,7 @@
-const React = require('react');
-const { PlayerContextProvider } = require('@cassette/core');
+import React from "react";
+import { PlayerContextProvider } from "@cassette/core"
+import MediaPlayerUI from "./MediaPlayerUI";
 
-const MediaPlayerUI = require('./MediaPlayerUI');
 
 class MediaPlayer extends React.Component {
   render() {
@@ -37,4 +37,4 @@ MediaPlayer.defaultProps = {
   ...PlayerContextProvider.defaultProps
 };
 
-module.exports = MediaPlayer;
+export default MediaPlayer;

src/MediaPlayerUI.js

@@ -1,8 +1,7 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const { FullscreenContextProvider } = require('@cassette/core');
-
-const MediaPlayerView = require('./components/MediaPlayerView');
+import React from "react";
+import PropTypes from 'prop-types';
+import { FullscreenContextProvider } from '@cassette/core';
+import MediaPlayerView from './components/MediaPlayerView';
 
 class MediaPlayerUI extends React.PureComponent {
   render() {
@@ -46,4 +45,4 @@ MediaPlayerUI.defaultProps = {
   fullscreenEnabled: false
 };
 
-module.exports = MediaPlayerUI;
+export default MediaPlayerUI;

src/components/Icon.js

@@ -1,25 +1,44 @@
-const React = require('react');
-const PropTypes = require('prop-types');
+import React from "react";
+import PropTypes from 'prop-types';
+
+import audio from '../icons/audio.png';
+import backscroll from '../icons/backscroll.png';
+import backseek from '../icons/backseek.png';
+import backskip from '../icons/backskip.png';
+import eject from '../icons/eject.png';
+import forwardscroll from '../icons/forwardscroll.png';
+import forwardseek from '../icons/forwardseek.png';
+import forwardskip from '../icons/forwardskip.png';
+import pause from '../icons/pause.png';
+import play from '../icons/play.png';
+import selectionend from '../icons/selectionend.png';
+import selectionstart from '../icons/selectionstart.png';
+import stop from '../icons/stop.png';
+import video from '../icons/video.png';
+import maximize from '../icons/maximize.png';
+import minimize from '../icons/minimize.png';
+import unmaximize from '../icons/unmaximize.png';
+import x from '../icons/x.png';
 
 const imgs = {
-  audio: require('../icons/audio.png'),
-  backscroll: require('../icons/backscroll.png'),
-  backseek: require('../icons/backseek.png'),
-  backskip: require('../icons/backskip.png'),
-  eject: require('../icons/eject.png'),
-  forwardscroll: require('../icons/forwardscroll.png'),
-  forwardseek: require('../icons/forwardseek.png'),
-  forwardskip: require('../icons/forwardskip.png'),
-  pause: require('../icons/pause.png'),
-  play: require('../icons/play.png'),
-  selectionend: require('../icons/selectionend.png'),
-  selectionstart: require('../icons/selectionstart.png'),
-  stop: require('../icons/stop.png'),
-  video: require('../icons/video.png'),
-  maximize: require('../icons/maximize.png'),
-  minimize: require('../icons/minimize.png'),
-  unmaximize: require('../icons/unmaximize.png'),
-  x: require('../icons/x.png')
+  audio,
+  backscroll,
+  backseek,
+  backskip,
+  eject,
+  forwardscroll,
+  forwardseek,
+  forwardskip,
+  pause,
+  play,
+  selectionend,
+  selectionstart,
+  stop,
+  video,
+  maximize,
+  minimize,
+  unmaximize,
+  x,
 };
 
 class Icon extends React.PureComponent {
@@ -33,4 +52,4 @@ Icon.propTypes = {
   name: PropTypes.string.isRequired
 };
 
-module.exports = Icon;
+export default Icon;

src/components/MediaBtn.js

@@ -1,8 +1,7 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const { Button } = require('react95');
-
-const Icon = require('./Icon');
+import React from "react";
+import PropTypes from 'prop-types';
+import { Button } from 'react95';
+import Icon from './Icon';
 
 const normalIconStyle = { opacity: 1 };
 const disabledIconStyle = { opacity: 0.3 };
@@ -33,4 +32,4 @@ MediaBtn.defaultProps = {
   disabled: false
 };
 
-module.exports = MediaBtn;
+export default MediaBtn;

src/components/MediaPlayerView.js

@@ -1,8 +1,8 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const { playerContextFilter, PlayerPropTypes } = require('@cassette/core');
-const { VideoDisplay } = require('@cassette/components');
-const {
+import React from "react";
+import PropTypes from 'prop-types';
+import { playerContextFilter, PlayerPropTypes } from '@cassette/core'
+import { VideoDisplay } from '@cassette/components'
+import {
   themes,
   Window,
   WindowHeader,
@@ -11,17 +11,16 @@ const {
   Button,
   Cutout,
   Divider
-} = require('react95');
-const { ThemeProvider } = require('styled-components');
-const ResizeObserver = require('resize-observer-polyfill').default;
-
-const ProgressBar = require('./ProgressBar');
-const MediaBtn = require('./MediaBtn');
-const SeekButton = require('./SeekButton');
-const Icon = require('./Icon');
-const SimpleDivider = require('./SimpleDivider');
-const VerticalDivider = require('./VerticalDivider');
-const convertToTime = require('../utils/convertToTime');
+} from 'react95'
+import { ThemeProvider } from 'styled-components'
+import ResizeObserver from 'resize-observer-polyfill'
+import ProgressBar from './ProgressBar'
+import MediaBtn from './MediaBtn'
+import SeekButton from './SeekButton'
+import Icon from './Icon'
+import SimpleDivider from './SimpleDivider'
+import VerticalDivider from './VerticalDivider'
+import convertToTime from '../utils/convertToTime'
 
 const windowHeaderStyle = {
   padding: 0,
@@ -285,7 +284,7 @@ MediaPlayerView.propTypes = {
   onForwardSkip: PropTypes.func.isRequired
 };
 
-module.exports = playerContextFilter(MediaPlayerView, [
+export default playerContextFilter(MediaPlayerView, [
   'fullscreen',
   'requestFullscreen',
   'requestExitFullscreen',

src/components/ProgressBar.js

@@ -1,9 +1,8 @@
-const React = require('react');
-const { MediaProgressBar } = require('@cassette/components');
-const { themes } = require('react95');
-const ResizeObserver = require('resize-observer-polyfill').default;
-
-const ProgressRuler = require('./ProgressRuler');
+import React from 'react'
+import { MediaProgressBar } from '@cassette/components'
+import { themes } from 'react95'
+import ResizeObserver from 'resize-observer-polyfill'
+import ProgressRuler from './ProgressRuler'
 
 const progressMargin = 10;
 
@@ -103,4 +102,4 @@ class ProgressBar extends React.PureComponent {
   }
 }
 
-module.exports = ProgressBar;
+export default ProgressBar;

src/components/ProgressRuler.js

@@ -1,6 +1,6 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const { playerContextFilter } = require('@cassette/core');
+import React from "react";
+import PropTypes from 'prop-types';
+import { playerContextFilter } from '@cassette/core';
 
 // the minimum horizontal pixel space needed to print a time label
 const minWidthForTickInterval = 30;
@@ -102,4 +102,4 @@ ProgressRuler.propTypes = {
   progressWidth: PropTypes.number.isRequired
 };
 
-module.exports = playerContextFilter(ProgressRuler, ['duration']);
+export default playerContextFilter(ProgressRuler, ['duration']);

src/components/SeekButton.js

@@ -1,8 +1,7 @@
-const React = require('react');
-const PropTypes = require('prop-types');
-const { playerContextFilter } = require('@cassette/core');
-
-const MediaBtn = require('./MediaBtn');
+import React from "react";
+import PropTypes from 'prop-types';
+import { playerContextFilter } from '@cassette/core';
+import MediaBtn from './MediaBtn';
 
 const icons = {
   fastforward: 'forwardseek',
@@ -72,7 +71,7 @@ SeekButton.propTypes = {
   type: PropTypes.oneOf(['fastforward', 'rewind']).isRequired
 };
 
-module.exports = playerContextFilter(SeekButton, [
+export default playerContextFilter(SeekButton, [
   'currentTime',
   'onSeekComplete'
 ]);

src/components/SimpleDivider.js

@@ -1,5 +1,5 @@
-const React = require('react');
-const { themes } = require('react95');
+import React from 'react';
+import { themes } from 'react95';
 
 const style = {
   height: 0,

src/components/VerticalDivider.js

@@ -1,5 +1,5 @@
-const React = require('react');
-const { themes } = require('react95');
+import React from 'react';
+import { themes } from 'react95';
 
 const style = {
   width: 0,
@@ -15,4 +15,4 @@ const VerticalDivider = () => {
   return <div style={style} />;
 };
 
-module.exports = VerticalDivider;
+export default VerticalDivider;

src/index.js

@@ -1,7 +1,2 @@
-const MediaPlayer = require('./MediaPlayer');
-const MediaPlayerUI = require('./MediaPlayerUI');
-
-module.exports = {
-  MediaPlayer,
-  MediaPlayerUI
-};
+export * as MediaPlayer from "./MediaPlayer";
+export * as MediaPlayer from "./MediaPlayer";

src/utils/convertToTime.js

@@ -1,7 +1,7 @@
 // slightly different than version used in @cassette/player -
 // minutes are always shown as 2 digits regardless of whether
 // there is an hour display or not.
-function convertToTime(number) {
+export default function convertToTime(number) {
   const hours = Math.floor(number / (60 * 60));
   const mins = Math.floor(number / 60) - hours * 60;
   const secs = (number % 60).toFixed();
@@ -10,5 +10,3 @@ function convertToTime(number) {
   time += `${secs < 10 ? '0' : ''}${secs}`;
   return time;
 }
-
-module.exports = convertToTime;