mirror of
				https://github.com/advplyr/audiobookshelf.git
				synced 2025-11-03 19:07:00 -05:00 
			
		
		
		
	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)
 | 
						|
    }
 | 
						|
  }
 | 
						|
} |