- \n
- \n
\n FFmpeg\n {' '}\n and{' '}\n\n ffmpegjs\n \n , to read your audio files (wav, mp3, ogg, mp4, etc...).\n \n - \n
\n Atracdenc\n \n , to support atrac3 encoding (lp2, lp4 audio formats).\n \n - \n
\n Emscripten\n \n , to run both FFmpeg and Atracdenc in the browser.\n \n - \n
\n netmd-js\n \n , to send commands to NetMD devices using Javascript.\n \n - \n
\n linux-minidisc\n \n , to make the netmd-js project possible.\n \n - \n
\n react85\n \n , to build the vintage user interface.\n \n - \n
\n material-ui\n \n , to build the user interface.\n \n
- \n
- \n \n FFmpeg\n {' '}\n and{' '}\n \n ffmpegjs\n \n , to read your audio files (wav, mp3, ogg, mp4, etc...).\n \n
- \n \n Atracdenc\n \n , to support atrac3 encoding (lp2, lp4 audio formats).\n \n
- \n \n Emscripten\n \n , to run both FFmpeg and Atracdenc in the browser.\n \n
- \n \n netmd-js\n \n , to send commands to NetMD devices using Javascript.\n \n
- \n \n linux-minidisc\n \n , to make the netmd-js project possible.\n \n
- \n \n react95\n \n , to build the vintage user interface.\n \n
- \n \n material-ui\n \n , to build the user interface.\n \n
- \n
- \n MiniDisc logo from{' '}\n \n https://en.wikipedia.org/wiki/MiniDisc\n \n \n
- \n MiniDisc icon from{' '}\n
Press the button to connect to a NetMD device
\n \n\n {pairingMessage}\n
\n\n \n Press the button to connect to a NetMD device\n \n\n \n\n \n {pairingMessage} \n \n
\n \n \n \n Support and FAQ{' '}\n \n
\n - \n
- WebUSB is needed to control the NetMD device via the USB connection to your computer. \n
- WebAssembly is used to convert the music to a MiniDisc compatible format \n
{props.what} Name:
\n\n {props.convertedValue === 100 && props.trackConverting === props.trackTotal\n ? `Conversion completed`\n : `Converting ${props.trackConverting + 1} of ${props.trackTotal}: ${props.titleConverting}`}\n
\n \n\n \n Uploading {props.trackCurrent} of {props.trackTotal}: {props.titleCurrent}\n
\n \n\n {`Recording track ${props.trackDone + 1} of ${props.trackTotal}: ${\n props.titleCurrent\n }`}
\n \n- \n
- Use your browser in incognito mode. \n
- Use a blank MiniDisc. \n
- Try to use Web MiniDisc on another computer. \n
\n \n \n
\n {props.tracksOrderVisible ? (\n \n \n \n \n \n \n \n \n
\n ) : null}\n\n \n \n
\n
\n \n \n \n \n Recording Mode\n \n \n \n SP\n \n \n LP2\n \n \n LP4\n \n \n \n
\n \n \n \n Track title\n \n \n } onChange={handleChangeTitleFormat}>\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Drop your Music to add it to the queue\n \n \n
\n - \n {renderTracks()}\n
\n \n \n \n \n \n\n \n \n
\n );\n};\n","import React, { useCallback, useRef, useEffect, useState } from 'react';\nimport clsx from 'clsx';\n\nimport PlayArrowIcon from '@material-ui/icons/PlayArrow';\nimport StopIcon from '@material-ui/icons/Stop';\nimport SkipNextIcon from '@material-ui/icons/SkipNext';\nimport SkipPreviousIcon from '@material-ui/icons/SkipPrevious';\nimport PauseIcon from '@material-ui/icons/Pause';\n\nimport IconButton from '@material-ui/core/IconButton';\nimport Box from '@material-ui/core/Box';\n\nimport { makeStyles } from '@material-ui/core';\nimport { belowDesktop, getSortedTracks, useShallowEqualSelector } from '../utils';\nimport { control } from '../redux/actions';\nimport { useDispatch } from 'react-redux';\n\nimport { ReactComponent as MDIcon0 } from '../images/md0.svg';\nimport { ReactComponent as MDIcon1 } from '../images/md1.svg';\nimport { ReactComponent as MDIcon2 } from '../images/md2.svg';\nimport { ReactComponent as MDIcon3 } from '../images/md3.svg';\nimport { W95Controls } from './win95/controls';\n\nconst frames = [MDIcon0, MDIcon1, MDIcon2, MDIcon3];\n\nconst useStyles = makeStyles(theme => ({\n '@keyframes scrollLeft': {\n from: {\n transform: `translateX(0%)`,\n },\n to: {},\n },\n '@keyframes blink': {\n '50%': {\n visibility: 'hidden',\n },\n },\n container: {\n display: 'flex',\n flex: '1 1 auto',\n [belowDesktop(theme)]: {\n flexWrap: 'wrap',\n },\n },\n lcd: {\n flex: '1 1 auto',\n position: 'relative',\n marginLeft: theme.spacing(1.5),\n marginRight: theme.spacing(1.5),\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(3),\n borderRadius: theme.spacing(3),\n backgroundColor: theme.palette.background.default,\n minWidth: 150,\n height: 48,\n [belowDesktop(theme)]: {\n marginLeft: 0,\n marginRight: theme.spacing(2),\n },\n },\n lcdText: {\n overflow: 'hidden',\n position: 'relative',\n width: 'calc(100% - 40px)',\n left: 40,\n height: '100%',\n fontFamily: 'LCDDot',\n },\n lcdDisc: {\n position: 'absolute',\n top: 0,\n left: 20,\n },\n lcdDiscIcon: {\n width: 28,\n height: 48,\n '& g': {\n fill: theme.palette.action.active,\n },\n },\n scrollingStatusMessage: {\n position: 'absolute',\n width: '100%',\n whiteSpace: 'nowrap',\n animationName: '$scrollLeft',\n animationTimingFunction: 'linear',\n animationIterationCount: '1',\n top: 15,\n left: 1,\n },\n statusMessage: {\n position: 'absolute',\n width: '100%',\n whiteSpace: 'nowrap',\n top: 15,\n left: 1,\n },\n lcdBlink: {\n animationName: '$blink',\n animationTimingFunction: 'step-end',\n animationDuration: '1s',\n animationIterationCount: 'infinite',\n },\n button: {\n // padding: 8,\n },\n}));\n\nexport const Controls = () => {\n const dispatch = useDispatch();\n // TODO: The shallow equality won't work for these 2 states\n const deviceStatus = useShallowEqualSelector(state => state.main.deviceStatus);\n const disc = useShallowEqualSelector(state => state.main.disc);\n\n const classes = useStyles();\n const handlePrev = useCallback(() => {\n dispatch(control('prev'));\n }, [dispatch]);\n const handlePlay = useCallback(() => {\n dispatch(control('play'));\n }, [dispatch]);\n const handleStop = useCallback(() => {\n dispatch(control('stop'));\n }, [dispatch]);\n const handleNext = useCallback(() => {\n dispatch(control('next'));\n }, [dispatch]);\n const handlePause = useCallback(() => {\n dispatch(control('pause'));\n }, [dispatch]);\n\n let message = ``;\n let trackIndex = deviceStatus?.track ?? null;\n let deviceState = deviceStatus?.state ?? null;\n let discPresent = deviceStatus?.discPresent ?? false;\n let paused = deviceStatus?.state === 'paused';\n const tracks = getSortedTracks(disc);\n if (!discPresent) {\n message = ``;\n } else if (deviceState === 'readingTOC') {\n message = 'READING TOC';\n } else if (tracks.length === 0) {\n message = `BLANKDISC`;\n } else if (deviceStatus && deviceStatus.track !== null && tracks[deviceStatus.track]) {\n let title = tracks[deviceStatus.track].fullWidthTitle || tracks[deviceStatus.track].title;\n message =\n (deviceStatus.track + 1).toString().padStart(3, '0') +\n (title ? ' - ' + title : '');\n }\n\n const [lcdScroll, setLcdScroll] = useState(0);\n const [lcdScrollDuration, setLcdScrollDuration] = useState(0);\n const [lcdIconFrame, setLcdIconFrame] = useState(0);\n\n // LCD Text scrolling\n const animationDelayInMS = 2000;\n const scrollTimerRef = useRef\n 0\n ? {\n animationDuration: `${props.lcdScrollDuration}s`,\n transform: `translate(-${props.lcdScroll}%)`,\n top: 12,\n }\n : { top: 12 }\n }\n >\n {props.message}\n \n
\n \n
\n \n 0\n ? { animationDuration: `${lcdScrollDuration}s`, transform: `translate(-${lcdScroll}%)` }\n : {}\n }\n >\n {message}\n \n
\n \n {discPresent &&
\n \n
\n 1. Connect your MD Player line-out to your PC audio line-in.
\n2. Use the controls at the bottom right to play some tracks.
\n3. Select the input source. You should hear the tracks playing on your PC.
\n4. Adjust the input gain and the line-out volume of your device.
\n \n\n {`${props.deviceName}: (` || `Loading...`}\n {props.disc?.fullWidthTitle && `${props.disc?.fullWidthTitle} / `}\n {props.disc?.title || `Untitled Disc`}\n {`)`}\n
\n {`${formatTimeFromFrames(\n props.disc.left,\n false\n )} left of ${formatTimeFromFrames(props.disc.total, false)} `}
\n \n ) : null}\n \n ) : null}\n\n {props.selectedCount > 0 ? (\n <>\n \n \n \n \n {!!props.moveMenuAnchorEl ? (\n - \n {Array(props.tracks.length)\n .fill(null)\n .map((_, i) => {\n return (\n
\n \n \n
\n
\n {mainView === 'MAIN' ?
\n \n {`${formatTimeFromFrames(disc.left * 4, false)} left in LP4 Mode`}\n
\n \n \n \n 
\n Web MiniDisc\n {mainView === 'MAIN' ? (\n \n ) : null}\n \n \n \n \n {isMenuOpen ? \n <>\n {mainView === 'WELCOME' ? \n \n {' (c) '}\n \n Stefano Brilli\n {' '}\n {new Date().getFullYear()}\n {'.'}\n \n {loading ? (\n \n \n
\n );\n};\n","import React from 'react';\nimport { belowDesktop, forAnyDesktop, forWideDesktop, useShallowEqualSelector } from '../utils';\n\nimport CssBaseline from '@material-ui/core/CssBaseline';\nimport Backdrop from '@material-ui/core/Backdrop';\nimport CircularProgress from '@material-ui/core/CircularProgress';\nimport { makeStyles, createTheme, ThemeProvider } from '@material-ui/core/styles';\n\nimport { Welcome } from './welcome';\nimport { Main } from './main';\nimport { Controls } from './controls';\nimport Paper from '@material-ui/core/Paper';\nimport Typography from '@material-ui/core/Typography';\nimport Link from '@material-ui/core/Link';\nimport Box from '@material-ui/core/Box';\nimport { W95App } from './win95/app';\n\nconst useStyles = makeStyles(theme => ({\n layout: {\n width: 'auto',\n height: '100%',\n [forAnyDesktop(theme)]: {\n width: 600,\n marginLeft: 'auto',\n marginRight: 'auto',\n },\n [forWideDesktop(theme)]: {\n width: 700,\n },\n },\n\n paper: {\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n padding: theme.spacing(2),\n height: 'calc(100% - 20px)',\n [forAnyDesktop(theme)]: {\n marginTop: theme.spacing(2),\n marginBottom: theme.spacing(1),\n padding: theme.spacing(3),\n height: 600,\n },\n [forWideDesktop(theme)]: {\n height: 700,\n },\n },\n bottomBar: {\n display: 'flex',\n alignItems: 'center',\n [belowDesktop(theme)]: {\n flexWrap: 'wrap',\n },\n marginLeft: -theme.spacing(2),\n },\n copyrightTypography: {\n textAlign: 'center',\n },\n backdrop: {\n zIndex: theme.zIndex.drawer + 1,\n color: '#fff',\n },\n minidiscLogo: {\n width: 48,\n },\n controlsContainer: {\n flex: '0 0 auto',\n width: '100%',\n paddingRight: theme.spacing(8),\n [belowDesktop(theme)]: {\n paddingLeft: 0,\n },\n },\n}));\n\nconst darkTheme = createTheme({\n palette: {\n type: 'dark',\n primary: {\n light: '#6ec6ff',\n main: '#2196f3',\n dark: '#0069c0',\n contrastText: '#fff',\n },\n },\n});\n\nconst lightTheme = createTheme({\n palette: {\n type: 'light',\n },\n});\n\nconst App = () => {\n const classes = useStyles();\n const { mainView, loading, darkMode, vintageMode } = useShallowEqualSelector(state => state.appState);\n\n if (vintageMode) {\n return \n
\n ) : null}\n - \n
- \n
\n FFmpeg\n {' '}\n and{' '}\n\n ffmpegjs\n \n , to read your audio files (wav, mp3, ogg, mp4, etc...).\n \n - \n
\n Atracdenc\n \n , to support atrac3 encoding (lp2, lp4 audio formats).\n \n - \n
\n Emscripten\n \n , to run both FFmpeg and Atracdenc in the browser.\n \n - \n
\n netmd-js\n \n , to send commands to NetMD devices using Javascript.\n \n - \n
\n linux-minidisc\n \n , to make the netmd-js project possible.\n \n - \n
\n react85\n \n , to build the vintage user interface.\n \n - \n
\n material-ui\n \n , to build the user interface.\n \n
- \n
- \n \n FFmpeg\n {' '}\n and{' '}\n \n ffmpegjs\n \n , to read your audio files (wav, mp3, ogg, mp4, etc...).\n \n
- \n \n Atracdenc\n \n , to support atrac3 encoding (lp2, lp4 audio formats).\n \n
- \n \n Emscripten\n \n , to run both FFmpeg and Atracdenc in the browser.\n \n
- \n \n netmd-js\n \n , to send commands to NetMD devices using Javascript.\n \n
- \n \n linux-minidisc\n \n , to make the netmd-js project possible.\n \n
- \n \n react95\n \n , to build the vintage user interface.\n \n
- \n \n material-ui\n \n , to build the user interface.\n \n
- \n
- \n MiniDisc logo from{' '}\n \n https://en.wikipedia.org/wiki/MiniDisc\n \n \n
- \n MiniDisc icon from{' '}\n
Press the button to connect to a NetMD device
\n \n\n {pairingMessage}\n
\n\n \n Press the button to connect to a NetMD device\n \n\n \n\n \n {pairingMessage} \n \n
\n \n \n \n Support and FAQ{' '}\n \n
\n - \n
- WebUSB is needed to control the NetMD device via the USB connection to your computer. \n
- WebAssembly is used to convert the music to a MiniDisc compatible format \n
{props.what} Name:
\n\n {props.convertedValue === 100 && props.trackConverting === props.trackTotal\n ? `Conversion completed`\n : `Converting ${props.trackConverting + 1} of ${props.trackTotal}: ${props.titleConverting}`}\n
\n \n\n \n Uploading {props.trackCurrent} of {props.trackTotal}: {props.titleCurrent}\n
\n \n\n {`Recording track ${props.trackDone + 1} of ${props.trackTotal}: ${\n props.titleCurrent\n }`}
\n \n- \n
- Use your browser in incognito mode. \n
- Use a blank MiniDisc. \n
- Try to use Web MiniDisc on another computer. \n
\n \n \n
\n {props.tracksOrderVisible ? (\n \n \n \n \n \n \n \n \n
\n ) : null}\n\n \n \n
\n
\n \n \n \n \n Recording Mode\n \n \n \n SP\n \n \n LP2\n \n \n LP4\n \n \n \n
\n \n \n \n Track title\n \n \n } onChange={handleChangeTitleFormat}>\n \n \n \n \n \n \n \n \n \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n Drop your Music to add it to the queue\n \n \n
\n - \n {renderTracks()}\n
\n \n \n \n \n \n\n \n \n
\n );\n};\n","import React, { useCallback, useRef, useEffect, useState } from 'react';\nimport clsx from 'clsx';\n\nimport PlayArrowIcon from '@material-ui/icons/PlayArrow';\nimport StopIcon from '@material-ui/icons/Stop';\nimport SkipNextIcon from '@material-ui/icons/SkipNext';\nimport SkipPreviousIcon from '@material-ui/icons/SkipPrevious';\nimport PauseIcon from '@material-ui/icons/Pause';\n\nimport IconButton from '@material-ui/core/IconButton';\nimport Box from '@material-ui/core/Box';\n\nimport { makeStyles } from '@material-ui/core';\nimport { belowDesktop, getSortedTracks, useShallowEqualSelector } from '../utils';\nimport { control } from '../redux/actions';\nimport { useDispatch } from 'react-redux';\n\nimport { ReactComponent as MDIcon0 } from '../images/md0.svg';\nimport { ReactComponent as MDIcon1 } from '../images/md1.svg';\nimport { ReactComponent as MDIcon2 } from '../images/md2.svg';\nimport { ReactComponent as MDIcon3 } from '../images/md3.svg';\nimport { W95Controls } from './win95/controls';\n\nconst frames = [MDIcon0, MDIcon1, MDIcon2, MDIcon3];\n\nconst useStyles = makeStyles(theme => ({\n '@keyframes scrollLeft': {\n from: {\n transform: `translateX(0%)`,\n },\n to: {},\n },\n '@keyframes blink': {\n '50%': {\n visibility: 'hidden',\n },\n },\n container: {\n display: 'flex',\n flex: '1 1 auto',\n [belowDesktop(theme)]: {\n flexWrap: 'wrap',\n },\n },\n lcd: {\n flex: '1 1 auto',\n position: 'relative',\n marginLeft: theme.spacing(1.5),\n marginRight: theme.spacing(1.5),\n paddingLeft: theme.spacing(3),\n paddingRight: theme.spacing(3),\n borderRadius: theme.spacing(3),\n backgroundColor: theme.palette.background.default,\n minWidth: 150,\n height: 48,\n [belowDesktop(theme)]: {\n marginLeft: 0,\n marginRight: theme.spacing(2),\n },\n },\n lcdText: {\n overflow: 'hidden',\n position: 'relative',\n width: 'calc(100% - 40px)',\n left: 40,\n height: '100%',\n fontFamily: 'LCDDot',\n },\n lcdDisc: {\n position: 'absolute',\n top: 0,\n left: 20,\n },\n lcdDiscIcon: {\n width: 28,\n height: 48,\n '& g': {\n fill: theme.palette.action.active,\n },\n },\n scrollingStatusMessage: {\n position: 'absolute',\n width: '100%',\n whiteSpace: 'nowrap',\n animationName: '$scrollLeft',\n animationTimingFunction: 'linear',\n animationIterationCount: '1',\n top: 15,\n left: 1,\n },\n statusMessage: {\n position: 'absolute',\n width: '100%',\n whiteSpace: 'nowrap',\n top: 15,\n left: 1,\n },\n lcdBlink: {\n animationName: '$blink',\n animationTimingFunction: 'step-end',\n animationDuration: '1s',\n animationIterationCount: 'infinite',\n },\n button: {\n // padding: 8,\n },\n}));\n\nexport const Controls = () => {\n const dispatch = useDispatch();\n // TODO: The shallow equality won't work for these 2 states\n const deviceStatus = useShallowEqualSelector(state => state.main.deviceStatus);\n const disc = useShallowEqualSelector(state => state.main.disc);\n\n const classes = useStyles();\n const handlePrev = useCallback(() => {\n dispatch(control('prev'));\n }, [dispatch]);\n const handlePlay = useCallback(() => {\n dispatch(control('play'));\n }, [dispatch]);\n const handleStop = useCallback(() => {\n dispatch(control('stop'));\n }, [dispatch]);\n const handleNext = useCallback(() => {\n dispatch(control('next'));\n }, [dispatch]);\n const handlePause = useCallback(() => {\n dispatch(control('pause'));\n }, [dispatch]);\n\n let message = ``;\n let trackIndex = deviceStatus?.track ?? null;\n let deviceState = deviceStatus?.state ?? null;\n let discPresent = deviceStatus?.discPresent ?? false;\n let paused = deviceStatus?.state === 'paused';\n const tracks = getSortedTracks(disc);\n if (!discPresent) {\n message = ``;\n } else if (deviceState === 'readingTOC') {\n message = 'READING TOC';\n } else if (tracks.length === 0) {\n message = `BLANKDISC`;\n } else if (deviceStatus && deviceStatus.track !== null && tracks[deviceStatus.track]) {\n let title = tracks[deviceStatus.track].fullWidthTitle || tracks[deviceStatus.track].title;\n message =\n (deviceStatus.track + 1).toString().padStart(3, '0') +\n (title ? ' - ' + title : '');\n }\n\n const [lcdScroll, setLcdScroll] = useState(0);\n const [lcdScrollDuration, setLcdScrollDuration] = useState(0);\n const [lcdIconFrame, setLcdIconFrame] = useState(0);\n\n // LCD Text scrolling\n const animationDelayInMS = 2000;\n const scrollTimerRef = useRef\n 0\n ? {\n animationDuration: `${props.lcdScrollDuration}s`,\n transform: `translate(-${props.lcdScroll}%)`,\n top: 12,\n }\n : { top: 12 }\n }\n >\n {props.message}\n \n
\n \n
\n