Skip to content

Commit

Permalink
FeatureRequest: 导出导入歌单
Browse files Browse the repository at this point in the history
  • Loading branch information
@kenmingwang
kenmingwang committed Feb 20, 2022
1 parent 4585aa7 commit 5981b4b
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 13 deletions.
13 changes: 10 additions & 3 deletions src/components/Fav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight';
import LastPageIcon from '@mui/icons-material/LastPage';
import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles';
import { zhCN } from '@mui/material/locale';
import Tooltip from '@mui/material/Tooltip';

const theme = createTheme(
{
Expand Down Expand Up @@ -260,9 +261,15 @@ export const Fav = (function ({ FavList, onSongIndexChange, onAddOneFromFav, han
whiteSpace: 'nowrap'
}}
style={{ paddingLeft: '40px', paddingRight: '8px' }}>
<AddOutlinedIcon sx={CRUDIcon} onClick={() => onAddOneFromFav([song])} />
<AddBoxOutlinedIcon sx={CRUDIcon} onClick={() => handleAddToFavClick(currentFavList.info.id, song)} />
<DeleteOutlineOutlinedIcon sx={CRUDIcon} onClick={() => handleDelteFromSearchList(currentFavList.info.id, index)} />
<Tooltip title="添加到播放列表">
<AddOutlinedIcon sx={CRUDIcon} onClick={() => onAddOneFromFav([song])} />
</Tooltip>
<Tooltip title="添加到收藏歌单">
<AddBoxOutlinedIcon sx={CRUDIcon} onClick={() => handleAddToFavClick(currentFavList.info.id, song)} />
</Tooltip>
<Tooltip title="删除歌曲">
<DeleteOutlineOutlinedIcon sx={CRUDIcon} onClick={() => handleDelteFromSearchList(currentFavList.info.id, index)} />
</Tooltip>
</StyledTableCell>
</StyledTableRow>
)}
Expand Down
53 changes: 44 additions & 9 deletions src/components/FavList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ import PlaylistPlayIcon from '@mui/icons-material/PlaylistPlay';
import AlbumOutlinedIcon from '@mui/icons-material/AlbumOutlined';
import AddBoxOutlinedIcon from '@mui/icons-material/AddBoxOutlined';
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined';
import DownloadIcon from '@mui/icons-material/Download';
import FileUploadIcon from '@mui/icons-material/FileUpload';
import Tooltip from '@mui/material/Tooltip';
import Typography from '@mui/material/Typography';
import Divider from '@mui/material/Divider';
import AddIcon from '@mui/icons-material/Add';
Expand Down Expand Up @@ -166,6 +169,14 @@ export const FavList = memo(function ({ onSongListChange, onPlayOneFromFav, onPl
onAddFavToList(FavList.songList)
}

const exportFav = () => {
StorageManager.exportStorage()
}

const importFav = () => {
StorageManager.importStorage()
}

return (
<React.Fragment>
<Search handleSeach={handleSeach} />
Expand All @@ -182,7 +193,15 @@ export const FavList = memo(function ({ onSongListChange, onPlayOneFromFav, onPl
</Typography>
</Grid>
<Grid item xs={3} style={{ textAlign: 'right', paddingRight: '8px' }}>
<AddIcon sx={AddFavIcon} onClick={() => setOpenNewDialog(true)} />
<Tooltip title="新建歌单">
<AddIcon sx={AddFavIcon} onClick={() => setOpenNewDialog(true)} />
</Tooltip>
<Tooltip title="导出歌单">
<DownloadIcon sx={AddFavIcon} onClick={() => exportFav()} />
</Tooltip>
<Tooltip title="导入歌单">
<FileUploadIcon sx={AddFavIcon} onClick={() => importFav()} />
</Tooltip>
</Grid>
<NewFavDialog
id="NewFav"
Expand All @@ -208,10 +227,18 @@ export const FavList = memo(function ({ onSongListChange, onPlayOneFromFav, onPl
<ListItemText sx={{ color: '#9c55fac9' }} primaryTypographyProps={{ fontSize: '1.1em' }} primary={searchList.info.title} />
</ListItemButton>
<Box component="div" sx={CRUDBtn}>
<PlaylistPlayIcon sx={CRUDIcon} onClick={() => handlePlayListClick(searchList)} />
<PlaylistAddIcon sx={CRUDIcon} onClick={() => handleAddPlayListClick(searchList)} />
<AddBoxOutlinedIcon sx={CRUDIcon} onClick={() => handleAddToFavClick(searchList.info.id)} />
<DeleteOutlineOutlinedIcon sx={CRUDIconDisable} />
<Tooltip title="播放歌单">
<PlaylistPlayIcon sx={CRUDIcon} onClick={() => handlePlayListClick(searchList)} />
</Tooltip>
<Tooltip title="添加到播放列表">
<PlaylistAddIcon sx={CRUDIcon} onClick={() => handleAddPlayListClick(searchList)} />
</Tooltip>
<Tooltip title="添加到收藏歌单">
<AddBoxOutlinedIcon sx={CRUDIcon} onClick={() => handleAddToFavClick(searchList.info.id)} />
</Tooltip>
<Tooltip title="删除歌单">
<DeleteOutlineOutlinedIcon sx={CRUDIconDisable} />
</Tooltip>
</Box>
</ListItemButton>
</React.Fragment>
Expand All @@ -229,10 +256,18 @@ export const FavList = memo(function ({ onSongListChange, onPlayOneFromFav, onPl
<ListItemText sx={{ color: '#9600af94' }} primaryTypographyProps={{ fontSize: '1.1em' }} primary={v.info.title} />
</ListItemButton>
<Box component="div" sx={CRUDBtn}>
<PlaylistPlayIcon sx={CRUDIcon} onClick={() => handlePlayListClick(v)} />
<PlaylistAddIcon sx={CRUDIcon} onClick={() => handleAddPlayListClick(v)} />
<AddBoxOutlinedIcon sx={CRUDIcon} onClick={() => handleAddToFavClick(v.info.id)} />
<DeleteOutlineOutlinedIcon sx={CRUDIcon} onClick={() => handleDeleteFavClick(v.info.id)} />
<Tooltip title="播放歌单">
<PlaylistPlayIcon sx={CRUDIcon} onClick={() => handlePlayListClick(v)} />
</Tooltip>
<Tooltip title="添加到播放列表">
<PlaylistAddIcon sx={CRUDIcon} onClick={() => handleAddPlayListClick(v)} />
</Tooltip>
<Tooltip title="添加到收藏歌单">
<AddBoxOutlinedIcon sx={CRUDIcon} onClick={() => handleAddToFavClick(v.info.id)} />
</Tooltip>
<Tooltip title="删除歌单">
<DeleteOutlineOutlinedIcon sx={CRUDIcon} onClick={() => handleDeleteFavClick(v.info.id)} />
</Tooltip>
</Box>
</ListItemButton>
</React.Fragment>
Expand Down
42 changes: 42 additions & 0 deletions src/objects/Storage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,48 @@ export default class StorageManager {
async setPlayerSetting(newSettings) {
chrome.storage.local.set({ [PLAYER_SETTINGS]: newSettings })
}

async exportStorage() {
chrome.storage.local.get(null, function (items) { // null implies all items
// Convert object to a string.
let result = JSON.stringify(items);
const bytes = new TextEncoder().encode(result);
const blob = new Blob([bytes], {
type: "application/json;charset=utf-8"
});

const href = window.URL.createObjectURL(blob);
const link = document.createElement('a')
link.href = href
link.download = 'AzusaPlayerStorage_' + new Date().toISOString().slice(0, 10) + '.json'
document.body.appendChild(link)
link.click()
});
}

async importStorage() {
const _self = this
const upload = document.createElement('input')
upload.type = "file"
document.body.appendChild(upload)

upload.addEventListener("change", handleFiles, false);
function handleFiles() {
let fileReader = new FileReader();
fileReader.onload = function () {
let parsedJSON = JSON.parse(fileReader.result);
console.log(parsedJSON);
// your code to consume the json
chrome.storage.local.clear(() => {
chrome.storage.local.set(parsedJSON, () => {
_self.initFavLists()
})
})
}
fileReader.readAsText(this.files[0]);
}
upload.click()
}
}


Expand Down
2 changes: 1 addition & 1 deletion src/utils/Data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,6 @@ export const searchLyric = async (searchMID, setLyric) => {
return
}
const data = json.lyric
console.log(data)
// console.log(data)
setLyric(data)
}

0 comments on commit 5981b4b

Please sign in to comment.