audiobookshelf/client/store/globals.js
Lars Kiesow 452af43916
Fix Hidden Settings Menu
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
2023-01-01 19:49:43 +01:00

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)
}
}
}