Added support for full-width titles (full-width katakana, hiragana and kanji). Thank you for testing, @is-that-a-thing-now

src/components/controls.tsx

@@ -142,9 +142,10 @@ export const Controls = () => {
     } else if (tracks.length === 0) {
         message = `BLANKDISC`;
     } else if (deviceStatus && deviceStatus.track !== null && tracks[deviceStatus.track]) {
+        let title = tracks[deviceStatus.track].fullWidthTitle || tracks[deviceStatus.track].title;
         message =
             (deviceStatus.track + 1).toString().padStart(3, '0') +
-            (tracks[deviceStatus.track].title ? ' - ' + tracks[deviceStatus.track].title : '');
+            (title ? ' - ' + title : '');
     }
 
     const [lcdScroll, setLcdScroll] = useState(0);

src/components/main.tsx

@@ -86,13 +86,13 @@ const useStyles = makeStyles(theme => ({
     toolbarHighlight:
         theme.palette.type === 'light'
             ? {
-                  color: theme.palette.secondary.main,
+                color: theme.palette.secondary.main,
-                  backgroundColor: lighten(theme.palette.secondary.light, 0.85),
+                backgroundColor: lighten(theme.palette.secondary.light, 0.85),
-              }
+            }
             : {
-                  color: theme.palette.text.primary,
+                color: theme.palette.text.primary,
-                  backgroundColor: theme.palette.secondary.dark,
+                backgroundColor: theme.palette.secondary.dark,
-              },
+            },
     headBox: {
         display: 'flex',
         justifyContent: 'space-between',
@@ -255,12 +255,15 @@ export const Main = (props: {}) => {
 
     const handleRenameDoubleClick = (event: React.MouseEvent, item: number) => {
         let selectedIndex = item;
-        let currentName = getTracks(disc!).find(track => track.index === selectedIndex)?.title ?? '';
+        let track = getTracks(disc!).find(track => track.index === selectedIndex);
+        let currentName = track?.title ?? '';
+        let currentFullWidthName = track?.fullWidthTitle ?? '';
 
         dispatch(
             batchActions([
                 renameDialogActions.setVisible(true),
                 renameDialogActions.setCurrentName(currentName),
+                renameDialogActions.setCurrentFullWidthName(currentFullWidthName),
                 renameDialogActions.setIndex(selectedIndex),
             ])
         );
@@ -372,6 +375,7 @@ export const Main = (props: {}) => {
                     </Typography>
                 ) : (
                     <Typography component="h3" variant="h6" className={classes.toolbarLabel}>
+                        {disc?.fullWidthTitle && `${disc.fullWidthTitle} / `}
                         {disc?.title || `Untitled Disc`}
                     </Typography>
                 )}
@@ -491,6 +495,7 @@ export const Main = (props: {}) => {
                                     )}
                                 </TableCell>
                                 <TableCell className={classes.titleCell} title={track.title}>
+                                    {track.fullWidthTitle ? `${track.fullWidthTitle} / ` : ``}
                                     {track.title || `No Title`}
                                 </TableCell>
                                 <TableCell align="right" className={classes.durationCell}>

src/components/rename-dialog.tsx

@@ -4,6 +4,7 @@ import { useShallowEqualSelector } from '../utils';
 import { actions as renameDialogActions } from '../redux/rename-dialog-feature';
 import { renameTrack, renameDisc } from '../redux/actions';
 
+import { makeStyles } from '@material-ui/core/styles';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
@@ -21,12 +22,22 @@ const Transition = React.forwardRef(function Transition(
     return <Slide direction="up" ref={ref} {...props} />;
 });
 
+const useStyles = makeStyles(theme => ({
+    marginUpDown: {
+        marginTop: theme.spacing(3),
+        marginBottom: theme.spacing(3),
+    },
+}));
+
 export const RenameDialog = (props: {}) => {
     let dispatch = useDispatch();
+    let classes = useStyles();
 
     let renameDialogVisible = useShallowEqualSelector(state => state.renameDialog.visible);
     let renameDialogTitle = useShallowEqualSelector(state => state.renameDialog.title);
+    let renameDialogFullWidthTitle = useShallowEqualSelector(state => state.renameDialog.fullWidthTitle);
     let renameDialogIndex = useShallowEqualSelector(state => state.renameDialog.index);
+    let allowFullWidth = useShallowEqualSelector(state => state.appState.fullWidthSupport);
 
     const what = renameDialogIndex < 0 ? `Disc` : `Track`;
 
@@ -36,15 +47,27 @@ export const RenameDialog = (props: {}) => {
 
     const handleDoRename = () => {
         if (renameDialogIndex < 0) {
-            dispatch(renameDisc({ newName: renameDialogTitle }));
+            dispatch(renameDisc({
+                newName: renameDialogTitle,
+                newFullWidthName: renameDialogFullWidthTitle,
+            }));
         } else {
-            dispatch(renameTrack({ index: renameDialogIndex, newName: renameDialogTitle }));
+            dispatch(renameTrack({
+                index: renameDialogIndex,
+                newName: renameDialogTitle,
+                newFullWidthName: renameDialogFullWidthTitle,
+            }));
         }
+        handleCancelRename(); //Close the dialog
     };
 
     const handleChange = useCallback(
         (event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => {
-            dispatch(renameDialogActions.setCurrentName(event.target.value.substring(0, 120))); // MAX title length
+            if (event.target.id === "name") {
+                dispatch(renameDialogActions.setCurrentName(event.target.value.substring(0, 120))); // MAX title length
+            } else {
+                dispatch(renameDialogActions.setCurrentFullWidthName(event.target.value.substring(0, 64)));
+            }
         },
         [dispatch]
     );
@@ -86,6 +109,21 @@ export const RenameDialog = (props: {}) => {
                     }}
                     onChange={handleChange}
                 />
+                {allowFullWidth && (
+                    <TextField
+                        id="fullWidthTitle"
+                        label={`Full-Width ${what} Name`}
+                        type="text"
+                        fullWidth
+                        className={classes.marginUpDown}
+                        value={renameDialogFullWidthTitle}
+                        onKeyDown={event => {
+                            event.key === `Enter` && handleDoRename();
+                        }}
+                        onChange={handleChange}
+                    />
+                )
+                }
             </DialogContent>
             <DialogActions>
                 <Button onClick={handleCancelRename}>Cancel</Button>

src/components/topmenu.tsx

@@ -14,6 +14,7 @@ import { useShallowEqualSelector } from '../utils';
 import Link from '@material-ui/core/Link';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
+import Tooltip from '@material-ui/core/Tooltip';
 import { makeStyles } from '@material-ui/core/styles';
 
 import RefreshIcon from '@material-ui/icons/Refresh';
@@ -33,14 +34,19 @@ const useStyles = makeStyles(theme => ({
     listItemIcon: {
         minWidth: theme.spacing(5),
     },
+    toolTippedText: {
+        textDecoration: 'underline',
+        textDecorationStyle: 'dotted',
+    },
 }));
 
-export const TopMenu = function(props: { onClick?: () => void }) {
+export const TopMenu = function (props: { onClick?: () => void }) {
     const classes = useStyles();
     const dispatch = useDispatch();
 
-    let { mainView, darkMode, vintageMode } = useShallowEqualSelector(state => state.appState);
+    let { mainView, darkMode, vintageMode, fullWidthSupport } = useShallowEqualSelector(state => state.appState);
     let discTitle = useShallowEqualSelector(state => state.main.disc?.title ?? ``);
+    let fullWidthDiscTitle = useShallowEqualSelector(state => state.main.disc?.fullWidthTitle ?? ``);
 
     const githubLinkRef = React.useRef<null | HTMLAnchorElement>(null);
     const helpLinkRef = React.useRef<null | HTMLAnchorElement>(null);
@@ -71,6 +77,10 @@ export const TopMenu = function(props: { onClick?: () => void }) {
         handleMenuClose();
     }, [dispatch, handleMenuClose]);
 
+    const handleAllowFullWidth = useCallback(() => {
+        dispatch(appActions.setFullWidthSupport(!fullWidthSupport));
+    }, [dispatch, fullWidthSupport]);
+
     const handleRefresh = useCallback(() => {
         dispatch(listContent());
         handleMenuClose();
@@ -81,11 +91,12 @@ export const TopMenu = function(props: { onClick?: () => void }) {
             batchActions([
                 renameDialogActions.setVisible(true),
                 renameDialogActions.setCurrentName(discTitle),
+                renameDialogActions.setCurrentFullWidthName(fullWidthDiscTitle),
                 renameDialogActions.setIndex(-1),
             ])
         );
         handleMenuClose();
-    }, [dispatch, handleMenuClose, discTitle]);
+    }, [dispatch, handleMenuClose, discTitle, fullWidthDiscTitle]);
 
     const handleExit = useCallback(() => {
         dispatch(appActions.setMainView('WELCOME'));
@@ -147,6 +158,15 @@ export const TopMenu = function(props: { onClick?: () => void }) {
                 <ListItemText>Wipe Disc</ListItemText>
             </MenuItem>
         );
+        menuItems.push(
+            <MenuItem key="allowFullWidth" onClick={handleAllowFullWidth}>
+                <ListItemIcon className={classes.listItemIcon}>
+                    {fullWidthSupport ? <ToggleOnIcon fontSize="small" /> : <ToggleOffIcon fontSize="small" />}
+                </ListItemIcon>
+                <ListItemText>
+                    Allow <Tooltip title="Minidiscs have 2 slots for titles - the default half-width one used for standard alphabet and half-width katakana, and full-width for hiragana and kanji." arrow><span className={classes.toolTippedText}>Full-Width</span></Tooltip> Title Editing</ListItemText>
+            </MenuItem>
+        );
         menuItems.push(
             <MenuItem key="exit" onClick={handleExit}>
                 <ListItemIcon className={classes.listItemIcon}>

src/redux/actions.ts

@@ -105,12 +105,12 @@ export function listContent() {
     };
 }
 
-export function renameTrack({ index, newName }: { index: number; newName: string }) {
+export function renameTrack({ index, newName, newFullWidthName }: { index: number; newName: string, newFullWidthName?: string }) {
     return async function(dispatch: AppDispatch) {
         const { netmdService } = serviceRegistry;
         dispatch(renameDialogActions.setVisible(false));
         try {
-            await netmdService!.renameTrack(index, newName);
+            await netmdService!.renameTrack(index, newName, newFullWidthName);
         } catch (err) {
             console.error(err);
             dispatch(batchActions([errorDialogAction.setVisible(true), errorDialogAction.setErrorMessage(`Rename failed.`)]));
@@ -119,10 +119,13 @@ export function renameTrack({ index, newName }: { index: number; newName: string
     };
 }
 
-export function renameDisc({ newName }: { newName: string }) {
+export function renameDisc({ newName, newFullWidthName }: { newName: string, newFullWidthName?: string }) {
     return async function(dispatch: AppDispatch) {
         const { netmdService } = serviceRegistry;
-        await netmdService!.renameDisc(newName);
+        await netmdService!.renameDisc(
+            newName.replace(/\/\//g, ' /'), //Make sure the title doesn't interfere with the groups
+            newFullWidthName?.replace(/／／/g, '／')
+        );
         dispatch(renameDialogActions.setVisible(false));
         listContent()(dispatch);
     };
@@ -387,8 +390,12 @@ export function convertAndUpload(files: File[], format: UploadFormat, titleForma
         };
 
         let disc = getState().main.disc;
-        let maxTitleLength = disc ? getAvailableCharsForTrackTitle(getTracks(disc).map(track => track.title || ``)) : -1;
+        let useFullWidth = getState().appState.fullWidthSupport;
+        let tracks = disc && getTracks(disc);
+        let maxTitleLength = tracks ? getAvailableCharsForTrackTitle(tracks.map(track => track.title || ``)) : -1;
+        let maxFullWidthTitleLength = tracks ? getAvailableCharsForTrackTitle(tracks.map(track => track.fullWidthTitle || ``)) : -1;
         maxTitleLength = Math.floor(maxTitleLength / files.length);
+        maxFullWidthTitleLength = Math.floor(maxFullWidthTitleLength / files.length);
 
         let error: any;
         let errorMessage = ``;
@@ -408,7 +415,7 @@ export function convertAndUpload(files: File[], format: UploadFormat, titleForma
             }
 
             if (maxTitleLength > -1) {
-                title = title.substring(0, maxTitleLength);
+                title = title.substring(0, useFullWidth ? Math.min(maxTitleLength, maxFullWidthTitleLength) : maxTitleLength);
             }
 
             trackUpdate.current = i++;
@@ -416,7 +423,7 @@ export function convertAndUpload(files: File[], format: UploadFormat, titleForma
             updateTrack();
             updateProgressCallback({ written: 0, encrypted: 0, total: 100 });
             try {
-                await netmdService?.upload(title, data, wireformat, updateProgressCallback);
+                await netmdService?.upload(title, data, wireformat, useFullWidth, updateProgressCallback);
             } catch (err) {
                 error = err;
                 errorMessage = `${file.name}: Error uploading to device. There might not be enough space left.`;

src/redux/app-feature.ts

@@ -15,6 +15,7 @@ export interface AppState {
     aboutDialogVisible: boolean;
     notifyWhenFinished: boolean;
     hasNotificationSupport: boolean;
+    fullWidthSupport: boolean;
 }
 
 export const buildInitialState = (): AppState => {
@@ -29,6 +30,7 @@ export const buildInitialState = (): AppState => {
         aboutDialogVisible: false,
         notifyWhenFinished: loadPreference('notifyWhenFinished', false),
         hasNotificationSupport: true,
+        fullWidthSupport: loadPreference('fullWidthSupport', false),
     };
 };
 
@@ -72,6 +74,10 @@ export const slice = createSlice({
         showAboutDialog: (state, action: PayloadAction<boolean>) => {
             state.aboutDialogVisible = action.payload;
         },
+        setFullWidthSupport: (state, action: PayloadAction<boolean>) => {
+            state.fullWidthSupport = action.payload;
+            savePreference('fullWidthSupport', state.fullWidthSupport);
+        },
     },
 });
 

src/redux/rename-dialog-feature.ts

@@ -4,12 +4,14 @@ import { enableBatching } from 'redux-batched-actions';
 export interface RenameDialogState {
     visible: boolean;
     title: string;
+    fullWidthTitle: string;
     index: number;
 }
 
 const initialState: RenameDialogState = {
     visible: false,
     title: '',
+    fullWidthTitle: '',
     index: -1,
 };
 
@@ -23,6 +25,9 @@ export const slice = createSlice({
         setCurrentName: (state: RenameDialogState, action: PayloadAction<string>) => {
             state.title = action.payload;
         },
+        setCurrentFullWidthName: (state: RenameDialogState, action: PayloadAction<string>) => {
+            state.fullWidthTitle = action.payload;
+        },
         setIndex: (state: RenameDialogState, action: PayloadAction<number>) => {
             state.index = action.payload;
         },

src/services/netmd-mock.ts

@@ -1,6 +1,6 @@
 import { Track, Channels, Encoding, Wireformat, TrackFlag, DeviceStatus } from 'netmd-js';
 import { NetMDService } from './netmd';
-import { sleep, sanitizeHalfWidthTitle, asyncMutex } from '../utils';
+import { sleep, sanitizeFullWidthTitle, sanitizeHalfWidthTitle, asyncMutex } from '../utils';
 import { assert } from 'netmd-js/dist/utils';
 import { Mutex } from 'async-mutex';
 
@@ -9,6 +9,7 @@ class NetMDMockService implements NetMDService {
     public mutex = new Mutex();
     public _tracksTitlesMaxLength = 1700;
     public _discTitle: string = 'Mock Disc';
+    public _fullWidthDiscTitle: string = '';
     public _discCapacity: number = 80 * 60 * 512;
     public _tracks: Track[] = [
         {
@@ -18,6 +19,7 @@ class NetMDMockService implements NetMDService {
             channel: Channels.stereo,
             protected: TrackFlag.unprotected,
             title: 'Long name for - Mock Track 1 - by some artist -12398729837198723',
+            fullWidthTitle: '',
         },
         {
             duration: 5 * 60 * 512,
@@ -26,6 +28,7 @@ class NetMDMockService implements NetMDService {
             channel: Channels.stereo,
             protected: TrackFlag.unprotected,
             title: 'Mock Track 2',
+            fullWidthTitle: '',
         },
         {
             duration: 5 * 60 * 512,
@@ -34,6 +37,7 @@ class NetMDMockService implements NetMDService {
             channel: Channels.stereo,
             protected: TrackFlag.unprotected,
             title: 'Mock Track 3',
+            fullWidthTitle: '',
         },
         {
             duration: 5 * 60 * 512,
@@ -42,6 +46,7 @@ class NetMDMockService implements NetMDService {
             channel: Channels.stereo,
             protected: TrackFlag.unprotected,
             title: 'Mock Track 4',
+            fullWidthTitle: '',
         },
     ];
     public _status: DeviceStatus = {
@@ -108,18 +113,22 @@ class NetMDMockService implements NetMDService {
         return `Generic MD Unit`;
     }
 
-    async finalize() {}
+    async finalize() { }
 
-    async renameTrack(index: number, newTitle: string) {
+    async renameTrack(index: number, newTitle: string, fullWidthTitle?: string) {
         newTitle = sanitizeHalfWidthTitle(newTitle);
         if (this._getTracksTitlesLength() + newTitle.length > this._tracksTitlesMaxLength) {
             throw new Error(`Track's title too long`);
         }
+        if (fullWidthTitle !== undefined){
+            this._tracks[index].fullWidthTitle = sanitizeFullWidthTitle(fullWidthTitle);
+        } 
         this._tracks[index].title = newTitle;
     }
 
-    async renameDisc(newName: string) {
+    async renameDisc(newName: string, fullWidthName?: string) {
-        this._discTitle = newName;
+        this._discTitle = sanitizeHalfWidthTitle(newName);
+        if (fullWidthName !== undefined) this._fullWidthDiscTitle = sanitizeFullWidthTitle(fullWidthName);
     }
 
     async deleteTrack(index: number) {
@@ -142,11 +151,13 @@ class NetMDMockService implements NetMDService {
         title: string,
         data: ArrayBuffer,
         format: Wireformat,
+        useFullWidth: boolean,
         progressCallback: (progress: { written: number; encrypted: number; total: number }) => void
     ) {
         progressCallback({ written: 0, encrypted: 0, total: 100 });
 
-        title = sanitizeHalfWidthTitle(title);
+        let halfWidthTitle = sanitizeHalfWidthTitle(title);
+        let fullWidthTitle = sanitizeFullWidthTitle(title);
 
         if (this._getTracksTitlesLength() + title.length > this._tracksTitlesMaxLength) {
             throw new Error(`Track's title too long`); // Simulates reject from device
@@ -160,12 +171,13 @@ class NetMDMockService implements NetMDService {
         }
 
         this._tracks.push({
-            title,
+            title: halfWidthTitle,
             duration: 5 * 60 * 512,
             encoding: Encoding.sp,
             index: this._tracks.length,
             protected: TrackFlag.unprotected,
             channel: 0,
+            fullWidthTitle: useFullWidth ? fullWidthTitle : '',
         });
 
         await sleep(1000);

src/services/netmd.ts

@@ -12,7 +12,7 @@ import {
 } from 'netmd-js';
 import { makeGetAsyncPacketIteratorOnWorkerThread } from 'netmd-js/dist/web-encrypt-worker';
 import { Logger } from 'netmd-js/dist/logger';
-import { asyncMutex, sanitizeHalfWidthTitle, sleep } from '../utils';
+import { asyncMutex, sanitizeHalfWidthTitle, sanitizeFullWidthTitle, sleep } from '../utils';
 import { Mutex } from 'async-mutex';
 
 const Worker = require('worker-loader!netmd-js/dist/web-encrypt-worker.js'); // eslint-disable-line import/no-webpack-loader-syntax
@@ -25,8 +25,8 @@ export interface NetMDService {
     listContent(): Promise<Disc>;
     getDeviceName(): Promise<string>;
     finalize(): Promise<void>;
-    renameTrack(index: number, newTitle: string): Promise<void>;
+    renameTrack(index: number, newTitle: string, newFullWidthTitle?: string): Promise<void>;
-    renameDisc(newName: string): Promise<void>;
+    renameDisc(newName: string, newFullWidthName?: string): Promise<void>;
     deleteTrack(index: number): Promise<void>;
     moveTrack(src: number, dst: number): Promise<void>;
     wipeDisc(): Promise<void>;
@@ -34,6 +34,7 @@ export interface NetMDService {
         title: string,
         data: ArrayBuffer,
         format: Wireformat,
+        useFullWidth: boolean,
         progressCallback: (progress: { written: number; encrypted: number; total: number }) => void
     ): Promise<void>;
 
@@ -109,22 +110,46 @@ export class NetMDUSBService implements NetMDService {
     }
 
     @asyncMutex
-    async renameTrack(index: number, title: string) {
+    async renameTrack(index: number, title: string, fullWidthTitle?: string) {
         title = sanitizeHalfWidthTitle(title);
         await this.netmdInterface!.cacheTOC();
         await this.netmdInterface!.setTrackTitle(index, title);
+        if (fullWidthTitle !== undefined) {
+            await this.netmdInterface!.setTrackTitle(index, sanitizeFullWidthTitle(fullWidthTitle), true);
+        }
         await this.netmdInterface!.syncTOC();
     }
 
     @asyncMutex
-    async renameDisc(newName: string) {
+    async renameDisc(newName: string, newFullWidthName?: string) {
         // TODO: This whole function should be moved in netmd-js
         const oldName = await this.netmdInterface!.getDiscTitle();
+        const oldFullWidthName = await this.netmdInterface!.getDiscTitle(true);
         const oldRawName = await this.netmdInterface!._getDiscTitle();
+        const oldRawFullWidthName = await this.netmdInterface!._getDiscTitle(true);
         const hasGroups = oldRawName.indexOf('//') >= 0;
+        const hasFullWidthGroups = oldRawName.indexOf('／／') >= 0;
         const hasGroupsAndTitle = oldRawName.startsWith('0;');
+        const hasFullWidthGroupsAndTitle = oldRawName.startsWith('０；');
 
         newName = sanitizeHalfWidthTitle(newName);
+        newFullWidthName = newFullWidthName && sanitizeFullWidthTitle(newFullWidthName);
+
+        if(newFullWidthName !== oldFullWidthName && newFullWidthName !== undefined){
+            let newFullWidthNameWithGroups;
+            if (hasFullWidthGroups) {
+                if (hasFullWidthGroupsAndTitle) {
+                    newFullWidthNameWithGroups = oldRawFullWidthName.replace(/^０；.*?／／/, newFullWidthName !== '' ? `０；${newFullWidthName}／／` : ``);
+                } else {
+                    newFullWidthNameWithGroups = `０；${newFullWidthName}／／${oldRawFullWidthName}`; // Add the new title
+                }
+            } else {
+                newFullWidthNameWithGroups = newFullWidthName;
+            }
+            await this.netmdInterface!.cacheTOC();
+            await this.netmdInterface!.setDiscTitle(newFullWidthNameWithGroups, true);
+            await this.netmdInterface!.syncTOC();
+        }
 
         if (newName === oldName) {
             return;
@@ -167,6 +192,7 @@ export class NetMDUSBService implements NetMDService {
         title: string,
         data: ArrayBuffer,
         format: Wireformat,
+        useFullWidth: boolean,
         progressCallback: (progress: { written: number; encrypted: number; total: number }) => void
     ) {
         let total = data.byteLength;
@@ -183,8 +209,9 @@ export class NetMDUSBService implements NetMDService {
             updateProgress();
         });
 
-        title = sanitizeHalfWidthTitle(title);
+        let halfWidthTitle = sanitizeHalfWidthTitle(title);
-        let mdTrack = new MDTrack(title, format, data, 0x80000, webWorkerAsyncPacketIterator);
+        let fullWidthTitle = sanitizeFullWidthTitle(title);
+        let mdTrack = new MDTrack(halfWidthTitle, format, data, 0x80000, useFullWidth ? fullWidthTitle : '', webWorkerAsyncPacketIterator);
 
         await download(this.netmdInterface!, mdTrack, ({ writtenBytes }) => {
             written = writtenBytes;

src/utils.ts

@@ -66,20 +66,37 @@ export function sanitizeTitle(title: string) {
     return title.normalize('NFD').replace(/[^\x00-\x7F]/g, '');
 }
 
-export function sanitizeHalfWidthTitle(title: string){
+export function sanitizeHalfWidthTitle(title: string) {
-    const mappings: {[key: string]: string} = {'ァ': 'ｧ', 'ア': 'ｱ', 'ィ': 'ｨ', 'イ': 'ｲ', 'ゥ': 'ｩ', 'ウ': 'ｳ', 'ェ': 'ｪ', 'エ': 'ｴ', 'ォ': 'ｫ', 'オ': 'ｵ', 'カ': 'ｶ', 'ガ': 'ｶﾞ', 'キ': 'ｷ', 'ギ': 'ｷﾞ', 'ク': 'ｸ', 'グ': 'ｸﾞ', 'ケ': 'ｹ', 'ゲ': 'ｹﾞ', 'コ': 'ｺ', 'ゴ': 'ｺﾞ', 'サ': 'ｻ', 'ザ': 'ｻﾞ', 'シ': 'ｼ', 'ジ': 'ｼﾞ', 'ス': 'ｽ', 'ズ': 'ｽﾞ', 'セ': 'ｾ', 'ゼ': 'ｾﾞ', 'ソ': 'ｿ', 'ゾ': 'ｿﾞ', 'タ': 'ﾀ', 'ダ': 'ﾀﾞ', 'チ': 'ﾁ', 'ヂ': 'ﾁﾞ', 'ッ': 'ｯ', 'ツ': 'ﾂ', 'ヅ': 'ﾂﾞ', 'テ': 'ﾃ', 'デ': 'ﾃﾞ', 'ト': 'ﾄ', 'ド': 'ﾄﾞ', 'ナ': 'ﾅ', 'ニ': 'ﾆ', 'ヌ': 'ﾇ', 'ネ': 'ﾈ', 'ノ': 'ﾉ', 'ハ': 'ﾊ', 'バ': 'ﾊﾞ', 'パ': 'ﾊﾟ', 'ヒ': 'ﾋ', 'ビ': 'ﾋﾞ', 'ピ': 'ﾋﾟ', 'フ': 'ﾌ', 'ブ': 'ﾌﾞ', 'プ': 'ﾌﾟ', 'ヘ': 'ﾍ', 'ベ': 'ﾍﾞ', 'ペ': 'ﾍﾟ', 'ホ': 'ﾎ', 'ボ': 'ﾎﾞ', 'ポ': 'ﾎﾟ', 'マ': 'ﾏ', 'ミ': 'ﾐ', 'ム': 'ﾑ', 'メ': 'ﾒ', 'モ': 'ﾓ', 'ャ': 'ｬ', 'ヤ': 'ﾔ', 'ュ': 'ｭ', 'ユ': 'ﾕ', 'ョ': 'ｮ', 'ヨ': 'ﾖ', 'ラ': 'ﾗ', 'リ': 'ﾘ', 'ル': 'ﾙ', 'レ': 'ﾚ', 'ロ': 'ﾛ', 'ワ': 'ﾜ', 'ヲ': 'ｦ', 'ン': 'ﾝ', 'ー': 'ｰ', 'ヮ': 'ヮ', 'ヰ': 'ヰ', 'ヱ': 'ヱ', 'ヵ': 'ヵ', 'ヶ': 'ヶ', 'ヴ': 'ｳﾞ', 'ヽ': 'ヽ', 'ヾ': 'ヾ', '・': '･', '「': '｢', '」': '｣', '。': '｡', '、': '､', '！': '!', '＂': '"', '＃': '#', '＄': '$', '％': '%', '＆': '&', '＇': "'", '（': '(', '）': ')', '＊': '*', '＋': '+', '，': ',', '－': '-', '．': '.', '／': '/', '：': ':', '；': ';', '＜': '<', '＝': '=', '＞': '>', '？': '?', '＠': '@', 'Ａ': 'A', 'Ｂ': 'B', 'Ｃ': 'C', 'Ｄ': 'D', 'Ｅ': 'E', 'Ｆ': 'F', 'Ｇ': 'G', 'Ｈ': 'H', 'Ｉ': 'I', 'Ｊ': 'J', 'Ｋ': 'K', 'Ｌ': 'L', 'Ｍ': 'M', 'Ｎ': 'N', 'Ｏ': 'O', 'Ｐ': 'P', 'Ｑ': 'Q', 'Ｒ': 'R', 'Ｓ': 'S', 'Ｔ': 'T', 'Ｕ': 'U', 'Ｖ': 'V', 'Ｗ': 'W', 'Ｘ': 'X', 'Ｙ': 'Y', 'Ｚ': 'Z', '［': '[', '＼': '\\', '］': ']', '＾': '^', '＿': '_', '｀': '`', 'ａ': 'a', 'ｂ': 'b', 'ｃ': 'c', 'ｄ': 'd', 'ｅ': 'e', 'ｆ': 'f', 'ｇ': 'g', 'ｈ': 'h', 'ｉ': 'i', 'ｊ': 'j', 'ｋ': 'k', 'ｌ': 'l', 'ｍ': 'm', 'ｎ': 'n', 'ｏ': 'o', 'ｐ': 'p', 'ｑ': 'q', 'ｒ': 'r', 'ｓ': 's', 'ｔ': 't', 'ｕ': 'u', 'ｖ': 'v', 'ｗ': 'w', 'ｘ': 'x', 'ｙ': 'y', 'ｚ': 'z', '｛': '{', '｜': '|', '｝': '}', '～': '~', '\u3000': ' ', '０': '0', '１': '1', '２': '2', '３': '3', '４': '4', '５': '5', '６': '6', '７': '7', '８': '8', '９': '9'};
+    if (title.length > 120) title = title.substring(0, 120);
-    let multiByteChars: {[key: string]: number} = {'ガ': 1, 'ギ': 1, 'グ': 1, 'ゲ': 1, 'ゴ': 1, 'ザ': 1, 'ジ': 1, 'ズ': 1, 'ゼ': 1, 'ゾ': 1, 'ダ': 1, 'ヂ': 1, 'ヅ': 1, 'デ': 1, 'ド': 1, 'バ': 1, 'パ': 1, 'ビ': 1, 'ピ': 1, 'ブ': 1, 'プ': 1, 'ベ': 1, 'ペ': 1, 'ボ': 1, 'ポ': 1, 'ヮ': 1, 'ヰ': 1, 'ヱ': 1, 'ヵ': 1, 'ヶ': 1, 'ヴ': 1, 'ヽ': 1, 'ヾ': 1}; //Dakuten kana are encoded as 2 bytes
+
+    const mappings: { [key: string]: string } = { 'ァ': 'ｧ', 'ア': 'ｱ', 'ィ': 'ｨ', 'イ': 'ｲ', 'ゥ': 'ｩ', 'ウ': 'ｳ', 'ェ': 'ｪ', 'エ': 'ｴ', 'ォ': 'ｫ', 'オ': 'ｵ', 'カ': 'ｶ', 'ガ': 'ｶﾞ', 'キ': 'ｷ', 'ギ': 'ｷﾞ', 'ク': 'ｸ', 'グ': 'ｸﾞ', 'ケ': 'ｹ', 'ゲ': 'ｹﾞ', 'コ': 'ｺ', 'ゴ': 'ｺﾞ', 'サ': 'ｻ', 'ザ': 'ｻﾞ', 'シ': 'ｼ', 'ジ': 'ｼﾞ', 'ス': 'ｽ', 'ズ': 'ｽﾞ', 'セ': 'ｾ', 'ゼ': 'ｾﾞ', 'ソ': 'ｿ', 'ゾ': 'ｿﾞ', 'タ': 'ﾀ', 'ダ': 'ﾀﾞ', 'チ': 'ﾁ', 'ヂ': 'ﾁﾞ', 'ッ': 'ｯ', 'ツ': 'ﾂ', 'ヅ': 'ﾂﾞ', 'テ': 'ﾃ', 'デ': 'ﾃﾞ', 'ト': 'ﾄ', 'ド': 'ﾄﾞ', 'ナ': 'ﾅ', 'ニ': 'ﾆ', 'ヌ': 'ﾇ', 'ネ': 'ﾈ', 'ノ': 'ﾉ', 'ハ': 'ﾊ', 'バ': 'ﾊﾞ', 'パ': 'ﾊﾟ', 'ヒ': 'ﾋ', 'ビ': 'ﾋﾞ', 'ピ': 'ﾋﾟ', 'フ': 'ﾌ', 'ブ': 'ﾌﾞ', 'プ': 'ﾌﾟ', 'ヘ': 'ﾍ', 'ベ': 'ﾍﾞ', 'ペ': 'ﾍﾟ', 'ホ': 'ﾎ', 'ボ': 'ﾎﾞ', 'ポ': 'ﾎﾟ', 'マ': 'ﾏ', 'ミ': 'ﾐ', 'ム': 'ﾑ', 'メ': 'ﾒ', 'モ': 'ﾓ', 'ャ': 'ｬ', 'ヤ': 'ﾔ', 'ュ': 'ｭ', 'ユ': 'ﾕ', 'ョ': 'ｮ', 'ヨ': 'ﾖ', 'ラ': 'ﾗ', 'リ': 'ﾘ', 'ル': 'ﾙ', 'レ': 'ﾚ', 'ロ': 'ﾛ', 'ワ': 'ﾜ', 'ヲ': 'ｦ', 'ン': 'ﾝ', 'ー': 'ｰ', 'ヮ': 'ヮ', 'ヰ': 'ヰ', 'ヱ': 'ヱ', 'ヵ': 'ヵ', 'ヶ': 'ヶ', 'ヴ': 'ｳﾞ', 'ヽ': 'ヽ', 'ヾ': 'ヾ', '・': '･', '「': '｢', '」': '｣', '。': '｡', '、': '､', '！': '!', '＂': '"', '＃': '#', '＄': '$', '％': '%', '＆': '&', '＇': "'", '（': '(', '）': ')', '＊': '*', '＋': '+', '，': ',', '－': '-', '．': '.', '／': '/', '：': ':', '；': ';', '＜': '<', '＝': '=', '＞': '>', '？': '?', '＠': '@', 'Ａ': 'A', 'Ｂ': 'B', 'Ｃ': 'C', 'Ｄ': 'D', 'Ｅ': 'E', 'Ｆ': 'F', 'Ｇ': 'G', 'Ｈ': 'H', 'Ｉ': 'I', 'Ｊ': 'J', 'Ｋ': 'K', 'Ｌ': 'L', 'Ｍ': 'M', 'Ｎ': 'N', 'Ｏ': 'O', 'Ｐ': 'P', 'Ｑ': 'Q', 'Ｒ': 'R', 'Ｓ': 'S', 'Ｔ': 'T', 'Ｕ': 'U', 'Ｖ': 'V', 'Ｗ': 'W', 'Ｘ': 'X', 'Ｙ': 'Y', 'Ｚ': 'Z', '［': '[', '＼': '\\', '］': ']', '＾': '^', '＿': '_', '｀': '`', 'ａ': 'a', 'ｂ': 'b', 'ｃ': 'c', 'ｄ': 'd', 'ｅ': 'e', 'ｆ': 'f', 'ｇ': 'g', 'ｈ': 'h', 'ｉ': 'i', 'ｊ': 'j', 'ｋ': 'k', 'ｌ': 'l', 'ｍ': 'm', 'ｎ': 'n', 'ｏ': 'o', 'ｐ': 'p', 'ｑ': 'q', 'ｒ': 'r', 'ｓ': 's', 'ｔ': 't', 'ｕ': 'u', 'ｖ': 'v', 'ｗ': 'w', 'ｘ': 'x', 'ｙ': 'y', 'ｚ': 'z', '｛': '{', '｜': '|', '｝': '}', '～': '~', '\u3000': ' ', '０': '0', '１': '1', '２': '2', '３': '3', '４': '4', '５': '5', '６': '6', '７': '7', '８': '8', '９': '9', 'ぁ': 'ｧ', 'あ': 'ｱ', 'ぃ': 'ｨ', 'い': 'ｲ', 'ぅ': 'ｩ', 'う': 'ｳ', 'ぇ': 'ｪ', 'え': 'ｴ', 'ぉ': 'ｫ', 'お': 'ｵ', 'か': 'ｶ', 'が': 'ｶﾞ', 'き': 'ｷ', 'ぎ': 'ｷﾞ', 'く': 'ｸ', 'ぐ': 'ｸﾞ', 'け': 'ｹ', 'げ': 'ｹﾞ', 'こ': 'ｺ', 'ご': 'ｺﾞ', 'さ': 'ｻ', 'ざ': 'ｻﾞ', 'し': 'ｼ', 'じ': 'ｼﾞ', 'す': 'ｽ', 'ず': 'ｽﾞ', 'せ': 'ｾ', 'ぜ': 'ｾﾞ', 'そ': 'ｿ', 'ぞ': 'ｿﾞ', 'た': 'ﾀ', 'だ': 'ﾀﾞ', 'ち': 'ﾁ', 'ぢ': 'ﾁﾞ', 'っ': 'ｯ', 'つ': 'ﾂ', 'づ': 'ﾂﾞ', 'て': 'ﾃ', 'で': 'ﾃﾞ', 'と': 'ﾄ', 'ど': 'ﾄﾞ', 'な': 'ﾅ', 'に': 'ﾆ', 'ぬ': 'ﾇ', 'ね': 'ﾈ', 'の': 'ﾉ', 'は': 'ﾊ', 'ば': 'ﾊﾞ', 'ぱ': 'ﾊﾟ', 'ひ': 'ﾋ', 'び': 'ﾋﾞ', 'ぴ': 'ﾋﾟ', 'ふ': 'ﾌ', 'ぶ': 'ﾌﾞ', 'ぷ': 'ﾌﾟ', 'へ': 'ﾍ', 'べ': 'ﾍﾞ', 'ぺ': 'ﾍﾟ', 'ほ': 'ﾎ', 'ぼ': 'ﾎﾞ', 'ぽ': 'ﾎﾟ', 'ま': 'ﾏ', 'み': 'ﾐ', 'む': 'ﾑ', 'め': 'ﾒ', 'も': 'ﾓ', 'ゃ': 'ｬ', 'や': 'ﾔ', 'ゅ': 'ｭ', 'ゆ': 'ﾕ', 'ょ': 'ｮ', 'よ': 'ﾖ', 'ら': 'ﾗ', 'り': 'ﾘ', 'る': 'ﾙ', 'れ': 'ﾚ', 'ろ': 'ﾛ', 'わ': 'ﾜ', 'を': 'ｦ', 'ん': 'ﾝ', 'ゎ': 'ヮ', 'ゐ': 'ヰ', 'ゑ': 'ヱ', 'ゕ': 'ヵ', 'ゖ': 'ヶ', 'ゔ': 'ｳﾞ', 'ゝ': 'ヽ', 'ゞ': 'ヾ' };
+    const multiByteChars: { [key: string]: number } = { "ガ": 1, "ギ": 1, "グ": 1, "ゲ": 1, "ゴ": 1, "ザ": 1, "ジ": 1, "ズ": 1, "ゼ": 1, "ゾ": 1, "ダ": 1, "ヂ": 1, "ヅ": 1, "デ": 1, "ド": 1, "バ": 1, "パ": 1, "ビ": 1, "ピ": 1, "ブ": 1, "プ": 1, "ベ": 1, "ペ": 1, "ボ": 1, "ポ": 1, "ヮ": 1, "ヰ": 1, "ヱ": 1, "ヵ": 1, "ヶ": 1, "ヴ": 1, "ヽ": 1, "ヾ": 1, "が": 1, "ぎ": 1, "ぐ": 1, "げ": 1, "ご": 1, "ざ": 1, "じ": 1, "ず": 1, "ぜ": 1, "ぞ": 1, "だ": 1, "ぢ": 1, "づ": 1, "で": 1, "ど": 1, "ば": 1, "ぱ": 1, "び": 1, "ぴ": 1, "ぶ": 1, "ぷ": 1, "べ": 1, "ぺ": 1, "ぼ": 1, "ぽ": 1, "ゎ": 1, "ゐ": 1, "ゑ": 1, "ゕ": 1, "ゖ": 1, "ゔ": 1, "ゝ": 1, "ゞ": 1 }; //Dakuten kana are encoded as 2 bytes
+    const allowedHalfWidthKana: string[] = Object.values(mappings);
+
     let allowedAdditionalChars = 0;
     const newTitle = title.split('').map(n => {
         allowedAdditionalChars += (multiByteChars[n] ?? 0);
-        return mappings[n] ?? n;
+        if (mappings[n]) return mappings[n];
+        if (n.charCodeAt(0) < 0x7f || allowedHalfWidthKana.includes(n)) return n;
+        return ' ';
     }).join('');
     //Check if the amount of characters is the same as the amount of encoded bytes (when accounting for dakuten). Otherwise the disc might end up corrupted
     const sjisEncoded = jconv.encode(newTitle, 'SJIS');
-    if(sjisEncoded.length - allowedAdditionalChars !== title.length) return sanitizeTitle(title); //Fallback
+    if (sjisEncoded.length - allowedAdditionalChars !== title.length) return sanitizeTitle(title); //Fallback
     return newTitle;
 }
 
+export function sanitizeFullWidthTitle(title: string) {
+    if (title.length > 100) title = title.substring(0, 100);
+    const mappings: { [key: string]: string} = {'!': '！', '"': '＂', '#': '＃', '$': '＄', '%': '％', '&': '＆', "'": '＇', '(': '（', ')': '）', '*': '＊', '+': '＋', ',': '，', '-': '－', '.': '．', '/': '／', ':': '：', ';': '；', '<': '＜', '=': '＝', '>': '＞', '?': '？', '@': '＠', 'A': 'Ａ', 'B': 'Ｂ', 'C': 'Ｃ', 'D': 'Ｄ', 'E': 'Ｅ', 'F': 'Ｆ', 'G': 'Ｇ', 'H': 'Ｈ', 'I': 'Ｉ', 'J': 'Ｊ', 'K': 'Ｋ', 'L': 'Ｌ', 'M': 'Ｍ', 'N': 'Ｎ', 'O': 'Ｏ', 'P': 'Ｐ', 'Q': 'Ｑ', 'R': 'Ｒ', 'S': 'Ｓ', 'T': 'Ｔ', 'U': 'Ｕ', 'V': 'Ｖ', 'W': 'Ｗ', 'X': 'Ｘ', 'Y': 'Ｙ', 'Z': 'Ｚ', '[': '［', '\\': '＼', ']': '］', '^': '＾', '_': '＿', '`': '｀', 'a': 'ａ', 'b': 'ｂ', 'c': 'ｃ', 'd': 'ｄ', 'e': 'ｅ', 'f': 'ｆ', 'g': 'ｇ', 'h': 'ｈ', 'i': 'ｉ', 'j': 'ｊ', 'k': 'ｋ', 'l': 'ｌ', 'm': 'ｍ', 'n': 'ｎ', 'o': 'ｏ', 'p': 'ｐ', 'q': 'ｑ', 'r': 'ｒ', 's': 'ｓ', 't': 'ｔ', 'u': 'ｕ', 'v': 'ｖ', 'w': 'ｗ', 'x': 'ｘ', 'y': 'ｙ', 'z': 'ｚ', '{': '｛', '|': '｜', '}': '｝', '~': '～', ' ': '\u3000', '0': '０', '1': '１', '2': '２', '3': '３', '4': '４', '5': '５', '6': '６', '7': '７', '8': '８', '9': '９', 'ｧ': 'ァ', 'ｱ': 'ア', 'ｨ': 'ィ', 'ｲ': 'イ', 'ｩ': 'ゥ', 'ｳ': 'ウ', 'ｪ': 'ェ', 'ｴ': 'エ', 'ｫ': 'ォ', 'ｵ': 'オ', 'ｶ': 'カ', 'ｶﾞ': 'ガ', 'ｷ': 'キ', 'ｷﾞ': 'ギ', 'ｸ': 'ク', 'ｸﾞ': 'グ', 'ｹ': 'ケ', 'ｹﾞ': 'ゲ', 'ｺ': 'コ', 'ｺﾞ': 'ゴ', 'ｻ': 'サ', 'ｻﾞ': 'ザ', 'ｼ': 'シ', 'ｼﾞ': 'ジ', 'ｽ': 'ス', 'ｽﾞ': 'ズ', 'ｾ': 'セ', 'ｾﾞ': 'ゼ', 'ｿ': 'ソ', 'ｿﾞ': 'ゾ', 'ﾀ': 'タ', 'ﾀﾞ': 'ダ', 'ﾁ': 'チ', 'ﾁﾞ': 'ヂ', 'ｯ': 'ッ', 'ﾂ': 'ツ', 'ﾂﾞ': 'ヅ', 'ﾃ': 'テ', 'ﾃﾞ': 'デ', 'ﾄ': 'ト', 'ﾄﾞ': 'ド', 'ﾅ': 'ナ', 'ﾆ': 'ニ', 'ﾇ': 'ヌ', 'ﾈ': 'ネ', 'ﾉ': 'ノ', 'ﾊ': 'ハ', 'ﾊﾞ': 'バ', 'ﾊﾟ': 'パ', 'ﾋ': 'ヒ', 'ﾋﾞ': 'ビ', 'ﾋﾟ': 'ピ', 'ﾌ': 'フ', 'ﾌﾞ': 'ブ', 'ﾌﾟ': 'プ', 'ﾍ': 'ヘ', 'ﾍﾞ': 'ベ', 'ﾍﾟ': 'ペ', 'ﾎ': 'ホ', 'ﾎﾞ': 'ボ', 'ﾎﾟ': 'ポ', 'ﾏ': 'マ', 'ﾐ': 'ミ', 'ﾑ': 'ム', 'ﾒ': 'メ', 'ﾓ': 'モ', 'ｬ': 'ャ', 'ﾔ': 'ヤ', 'ｭ': 'ュ', 'ﾕ': 'ユ', 'ｮ': 'ョ', 'ﾖ': 'ヨ', 'ﾗ': 'ラ', 'ﾘ': 'リ', 'ﾙ': 'ル', 'ﾚ': 'レ', 'ﾛ': 'ロ', 'ﾜ': 'ワ', 'ｦ': 'ヲ', 'ﾝ': 'ン', 'ｰ': 'ー', 'ヮ': 'ヮ', 'ヰ': 'ヰ', 'ヱ': 'ヱ', 'ヵ': 'ヵ', 'ヶ': 'ヶ', 'ｳﾞ': 'ヴ', 'ヽ': 'ヽ', 'ヾ': 'ヾ', '･': '・', '｢': '「', '｣': '」', '｡': '。', '､': '、'};
+
+    const newTitle = title.split('').map(n => mappings[n] ?? n).join('');
+    
+    const sjisEncoded = jconv.encode(newTitle, 'SJIS');
+    if(jconv.decode(sjisEncoded, 'SJIS') !== newTitle) return sanitizeTitle(title); //Fallback
+    return newTitle; 
+}
+
 const EncodingName: { [k: number]: string } = {
     [Encoding.sp]: 'SP',
     [Encoding.lp2]: 'LP2',
@@ -87,13 +104,14 @@ const EncodingName: { [k: number]: string } = {
 };
 
 export function getSortedTracks(disc: Disc | null) {
-    let tracks: { index: number; title: string; group: string; duration: string; encoding: string }[] = [];
+    let tracks: { index: number; title: string; fullWidthTitle: string; group: string; duration: string; encoding: string }[] = [];
     if (disc !== null) {
         for (let group of disc.groups) {
             for (let track of group.tracks) {
                 tracks.push({
                     index: track.index,
                     title: track.title ?? `Unknown Title`,
+                    fullWidthTitle: track.fullWidthTitle ?? ``,
                     group: group.title ?? ``,
                     encoding: EncodingName[track.encoding],
                     duration: formatTimeFromFrames(track.duration, false),