mirror of
https://github.com/advplyr/audiobookshelf.git
synced 2024-12-20 19:06:06 +01:00
452af43916
This patch fixes several problems of the settings menu related to display on mobile devices or small(ish) windows: - The `isMobileLandscape` is now calculated correctly. Previously, this was set to `true` if a device was in portrait mode. - Showing the button to collapse the settings menu and making the menu collapsible now use the same mechanism. Previously, it could happen that the menu was opened and not fixed, but no button to close it again was shown. - The icons fore opening and closing the settings menu are now both arrows, indicating that their functionality is reversed. - The button to open the menu now always has the string “Settings”, instead of using the name of the current page. The current page hader is listed below that anyway and this is the action component to open the settings menu after all. This fixes #1334
172 lines
5.8 KiB
JavaScript
172 lines
5.8 KiB
JavaScript
export const state = () => ({
|
|
isMobile: false,
|
|
isMobileLandscape: false,
|
|
isMobilePortrait: false,
|
|
showBatchCollectionModal: false,
|
|
showCollectionsModal: false,
|
|
showEditCollectionModal: false,
|
|
showPlaylistsModal: false,
|
|
showEditPlaylistModal: false,
|
|
showEditPodcastEpisode: false,
|
|
showViewPodcastEpisodeModal: false,
|
|
showRSSFeedOpenCloseModal: false,
|
|
showConfirmPrompt: false,
|
|
confirmPromptOptions: null,
|
|
showEditAuthorModal: false,
|
|
rssFeedEntity: null,
|
|
selectedEpisode: null,
|
|
selectedPlaylistItems: null,
|
|
selectedPlaylist: null,
|
|
selectedCollection: null,
|
|
selectedAuthor: null,
|
|
selectedMediaItems: [],
|
|
isCasting: false, // Actively casting
|
|
isChromecastInitialized: false, // Script loadeds
|
|
showBatchQuickMatchModal: false,
|
|
dateFormats: [
|
|
{
|
|
text: 'MM/DD/YYYY',
|
|
value: 'MM/dd/yyyy'
|
|
},
|
|
{
|
|
text: 'DD/MM/YYYY',
|
|
value: 'dd/MM/yyyy'
|
|
},
|
|
{
|
|
text: 'YYYY-MM-DD',
|
|
value: 'yyyy-MM-dd'
|
|
}
|
|
],
|
|
libraryIcons: ['database', 'audiobookshelf', 'books-1', 'books-2', 'book-1', 'microphone-1', 'microphone-3', 'radio', 'podcast', 'rss', 'headphones', 'music', 'file-picture', 'rocket', 'power', 'star', 'heart']
|
|
})
|
|
|
|
export const getters = {
|
|
getLibraryItemCoverSrc: (state, getters, rootState, rootGetters) => (libraryItem, placeholder = null) => {
|
|
if (!placeholder) placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
|
|
if (!libraryItem) return placeholder
|
|
var media = libraryItem.media
|
|
if (!media || !media.coverPath || media.coverPath === placeholder) return placeholder
|
|
|
|
// Absolute URL covers (should no longer be used)
|
|
if (media.coverPath.startsWith('http:') || media.coverPath.startsWith('https:')) return media.coverPath
|
|
|
|
const userToken = rootGetters['user/getToken']
|
|
const lastUpdate = libraryItem.updatedAt || Date.now()
|
|
const libraryItemId = libraryItem.libraryItemId || libraryItem.id // Workaround for /users/:id page showing media progress covers
|
|
|
|
if (process.env.NODE_ENV !== 'production') { // Testing
|
|
return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}`
|
|
}
|
|
|
|
return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}&ts=${lastUpdate}`
|
|
},
|
|
getLibraryItemCoverSrcById: (state, getters, rootState, rootGetters) => (libraryItemId, placeholder = null) => {
|
|
if (!placeholder) placeholder = `${rootState.routerBasePath}/book_placeholder.jpg`
|
|
if (!libraryItemId) return placeholder
|
|
var userToken = rootGetters['user/getToken']
|
|
if (process.env.NODE_ENV !== 'production') { // Testing
|
|
return `http://localhost:3333${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}`
|
|
}
|
|
return `${rootState.routerBasePath}/api/items/${libraryItemId}/cover?token=${userToken}`
|
|
},
|
|
getIsBatchSelectingMediaItems: (state) => {
|
|
return state.selectedMediaItems.length
|
|
}
|
|
}
|
|
|
|
export const mutations = {
|
|
updateWindowSize(state, { width, height }) {
|
|
state.isMobile = width < 640 || height < 640
|
|
state.isMobileLandscape = state.isMobile && height < width
|
|
state.isMobilePortrait = state.isMobile && height >= width
|
|
},
|
|
setShowCollectionsModal(state, val) {
|
|
state.showBatchCollectionModal = false
|
|
state.showCollectionsModal = val
|
|
},
|
|
setShowBatchCollectionsModal(state, val) {
|
|
state.showBatchCollectionModal = true
|
|
state.showCollectionsModal = val
|
|
},
|
|
setShowEditCollectionModal(state, val) {
|
|
state.showEditCollectionModal = val
|
|
},
|
|
setShowPlaylistsModal(state, val) {
|
|
state.showPlaylistsModal = val
|
|
},
|
|
setShowEditPlaylistModal(state, val) {
|
|
state.showEditPlaylistModal = val
|
|
},
|
|
setShowEditPodcastEpisodeModal(state, val) {
|
|
state.showEditPodcastEpisode = val
|
|
},
|
|
setShowViewPodcastEpisodeModal(state, val) {
|
|
state.showViewPodcastEpisodeModal = val
|
|
},
|
|
setShowRSSFeedOpenCloseModal(state, val) {
|
|
state.showRSSFeedOpenCloseModal = val
|
|
},
|
|
setRSSFeedOpenCloseModal(state, entity) {
|
|
state.rssFeedEntity = entity
|
|
state.showRSSFeedOpenCloseModal = true
|
|
},
|
|
setShowConfirmPrompt(state, val) {
|
|
state.showConfirmPrompt = val
|
|
},
|
|
setConfirmPrompt(state, options) {
|
|
state.confirmPromptOptions = options
|
|
state.showConfirmPrompt = true
|
|
},
|
|
setEditCollection(state, collection) {
|
|
state.selectedCollection = collection
|
|
state.showEditCollectionModal = true
|
|
},
|
|
setEditPlaylist(state, playlist) {
|
|
state.selectedPlaylist = playlist
|
|
state.showEditPlaylistModal = true
|
|
},
|
|
setSelectedEpisode(state, episode) {
|
|
state.selectedEpisode = episode
|
|
},
|
|
setSelectedPlaylistItems(state, items) {
|
|
state.selectedPlaylistItems = items
|
|
},
|
|
showEditAuthorModal(state, author) {
|
|
state.selectedAuthor = author
|
|
state.showEditAuthorModal = true
|
|
},
|
|
setShowEditAuthorModal(state, val) {
|
|
state.showEditAuthorModal = val
|
|
},
|
|
setSelectedAuthor(state, author) {
|
|
state.selectedAuthor = author
|
|
},
|
|
setChromecastInitialized(state, val) {
|
|
state.isChromecastInitialized = val
|
|
},
|
|
setCasting(state, val) {
|
|
state.isCasting = val
|
|
},
|
|
setShowBatchQuickMatchModal(state, val) {
|
|
state.showBatchQuickMatchModal = val
|
|
},
|
|
resetSelectedMediaItems(state) {
|
|
state.selectedMediaItems = []
|
|
},
|
|
toggleMediaItemSelected(state, item) {
|
|
if (state.selectedMediaItems.some(i => i.id === item.id)) {
|
|
state.selectedMediaItems = state.selectedMediaItems.filter(i => i.id !== item.id)
|
|
} else {
|
|
state.selectedMediaItems.push(item)
|
|
}
|
|
},
|
|
setMediaItemSelected(state, { item, selected }) {
|
|
const isAlreadySelected = state.selectedMediaItems.some(i => i.id === item.id)
|
|
if (isAlreadySelected && !selected) {
|
|
state.selectedMediaItems = state.selectedMediaItems.filter(i => i.id !== item.id)
|
|
|
|
} else if (selected && !isAlreadySelected) {
|
|
state.selectedMediaItems.push(item)
|
|
}
|
|
}
|
|
} |