From 5a838f7da7033d010566db96723c5693fa24aff5 Mon Sep 17 00:00:00 2001 From: Mubashir Hassan Date: Sun, 7 Aug 2022 17:08:12 +0500 Subject: [PATCH] Changed imports to ESM --- .babelrc | 2 +- src/MediaPlayer.js | 8 ++-- src/MediaPlayerUI.js | 11 +++--- src/components/Icon.js | 61 ++++++++++++++++++++----------- src/components/MediaBtn.js | 11 +++--- src/components/MediaPlayerView.js | 33 ++++++++--------- src/components/ProgressBar.js | 13 +++---- src/components/ProgressRuler.js | 8 ++-- src/components/SeekButton.js | 11 +++--- src/components/SimpleDivider.js | 4 +- src/components/VerticalDivider.js | 6 +-- src/index.js | 9 +---- src/utils/convertToTime.js | 4 +- 13 files changed, 94 insertions(+), 87 deletions(-) diff --git a/.babelrc b/.babelrc index 70c2f78..ae15d1a 100644 --- a/.babelrc +++ b/.babelrc @@ -1,6 +1,6 @@ { "presets": [ - ["@babel/preset-env", { "loose": true, modules: false }], + ["@babel/preset-env"], "@babel/react" ] } diff --git a/src/MediaPlayer.js b/src/MediaPlayer.js index 323bd9b..e4a11e1 100644 --- a/src/MediaPlayer.js +++ b/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; diff --git a/src/MediaPlayerUI.js b/src/MediaPlayerUI.js index d69f119..b34fec5 100644 --- a/src/MediaPlayerUI.js +++ b/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; diff --git a/src/components/Icon.js b/src/components/Icon.js index dbc1210..7bd1d61 100644 --- a/src/components/Icon.js +++ b/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; diff --git a/src/components/MediaBtn.js b/src/components/MediaBtn.js index e9717f4..0651303 100644 --- a/src/components/MediaBtn.js +++ b/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; diff --git a/src/components/MediaPlayerView.js b/src/components/MediaPlayerView.js index e0ce8c7..609311e 100644 --- a/src/components/MediaPlayerView.js +++ b/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', diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js index ef61b2a..5df297c 100644 --- a/src/components/ProgressBar.js +++ b/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; diff --git a/src/components/ProgressRuler.js b/src/components/ProgressRuler.js index e63e199..2eeaf0f 100644 --- a/src/components/ProgressRuler.js +++ b/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']); diff --git a/src/components/SeekButton.js b/src/components/SeekButton.js index 5f3ff26..20e7ec5 100644 --- a/src/components/SeekButton.js +++ b/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' ]); diff --git a/src/components/SimpleDivider.js b/src/components/SimpleDivider.js index 98490ef..e05e68d 100644 --- a/src/components/SimpleDivider.js +++ b/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, diff --git a/src/components/VerticalDivider.js b/src/components/VerticalDivider.js index db2e25b..d3a2d4a 100644 --- a/src/components/VerticalDivider.js +++ b/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
; }; -module.exports = VerticalDivider; +export default VerticalDivider; diff --git a/src/index.js b/src/index.js index 47397b2..dc682a7 100644 --- a/src/index.js +++ b/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"; \ No newline at end of file diff --git a/src/utils/convertToTime.js b/src/utils/convertToTime.js index 67cfc53..66cb58a 100644 --- a/src/utils/convertToTime.js +++ b/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;