2021-08-18 00:01:11 +02:00
< template >
< div class = "text-white max-h-screen h-screen overflow-hidden bg-bg" >
< app -appbar / >
2021-09-23 03:40:35 +02:00
2022-05-14 00:40:43 +02:00
< app -side -rail v -if = " isShowingSideRail " class = "hidden md:block" / >
< div id = "app-content" class = "h-full" : class = "{ 'has-siderail': isShowingSideRail }" >
2022-11-10 01:00:20 +01:00
< Nuxt :key ="currentLang" / >
2022-05-14 00:40:43 +02:00
< / div >
2021-09-23 03:40:35 +02:00
2024-02-15 01:12:35 +01:00
< app -media -player -container ref = "mediaPlayerContainer" / >
2021-10-23 03:08:02 +02:00
2022-03-15 00:53:49 +01:00
< modals -item -edit -modal / >
2022-11-12 00:13:10 +01:00
< modals -collections -add -create -modal / >
2022-11-27 18:53:48 +01:00
< modals -collections -edit -modal / >
2022-11-26 23:25:14 +01:00
< modals -playlists -add -create -modal / >
2022-11-27 18:53:48 +01:00
< modals -playlists -edit -modal / >
2022-04-23 02:31:11 +02:00
< modals -podcast -edit -episode / >
2022-05-28 18:38:51 +02:00
< modals -podcast -view -episode / >
2022-05-09 01:21:46 +02:00
< modals -authors -edit -modal / >
2022-09-23 20:37:30 +02:00
< modals -batch -quick -match -model / >
2022-12-31 22:26:37 +01:00
< modals -rssfeed -open -close -modal / >
2023-10-27 23:51:44 +02:00
< modals -raw -cover -preview -modal / >
2024-07-07 22:51:50 +02:00
< modals -share -modal / >
2022-07-30 18:36:04 +02:00
< prompt -confirm / >
2021-10-18 01:05:43 +02:00
< readers -reader / >
2021-08-18 00:01:11 +02:00
< / div >
< / template >
< script >
export default {
2021-08-24 02:37:40 +02:00
middleware : 'authenticated' ,
2021-08-18 00:01:11 +02:00
data ( ) {
return {
2021-11-07 20:02:56 +01:00
socket : null ,
isSocketConnected : false ,
isFirstSocketConnection : true ,
2022-11-10 01:00:20 +01:00
socketConnectionToastId : null ,
2023-05-28 00:21:43 +02:00
currentLang : null ,
multiSessionOtherSessionId : null , // Used for multiple sessions open warning toast
multiSessionCurrentSessionId : null // Used for multiple sessions open warning toast
2021-08-18 00:01:11 +02:00
}
} ,
watch : {
$route ( newVal ) {
if ( this . $store . state . showEditModal ) {
this . $store . commit ( 'setShowEditModal' , false )
}
2022-12-01 00:09:00 +01:00
this . $store . commit ( 'globals/resetSelectedMediaItems' , [ ] )
2022-07-12 23:11:23 +02:00
this . updateBodyClass ( )
2021-08-18 00:01:11 +02:00
}
} ,
computed : {
user ( ) {
2021-08-24 01:31:04 +02:00
return this . $store . state . user . user
2022-02-23 00:33:55 +01:00
} ,
isCasting ( ) {
return this . $store . state . globals . isCasting
2022-05-14 00:40:43 +02:00
} ,
2022-11-27 00:24:46 +01:00
currentLibraryId ( ) {
return this . $store . state . libraries . currentLibraryId
} ,
2022-05-14 00:40:43 +02:00
isShowingSideRail ( ) {
if ( ! this . $route . name ) return false
2022-11-27 00:24:46 +01:00
return ! this . $route . name . startsWith ( 'config' ) && this . currentLibraryId
2022-05-14 00:40:43 +02:00
} ,
2022-07-12 23:11:23 +02:00
isShowingToolbar ( ) {
return this . isShowingSideRail && this . $route . name !== 'upload' && this . $route . name !== 'account'
} ,
2022-05-14 00:40:43 +02:00
appContentMarginLeft ( ) {
return this . isShowingSideRail ? 80 : 0
2021-08-18 00:01:11 +02:00
}
} ,
methods : {
2022-07-12 23:11:23 +02:00
updateBodyClass ( ) {
if ( this . isShowingToolbar ) {
document . body . classList . remove ( 'no-bars' , 'app-bar' )
document . body . classList . add ( 'app-bar-and-toolbar' )
} else {
document . body . classList . remove ( 'no-bars' , 'app-bar-and-toolbar' )
document . body . classList . add ( 'app-bar' )
}
} ,
2021-12-04 01:03:34 +01:00
updateSocketConnectionToast ( content , type , timeout ) {
if ( this . socketConnectionToastId !== null && this . socketConnectionToastId !== undefined ) {
this . $toast . update ( this . socketConnectionToastId , { content : content , options : { timeout : timeout , type : type , closeButton : false , position : 'bottom-center' , onClose : ( ) => null , closeOnClick : timeout !== null } } , false )
} else {
this . socketConnectionToastId = this . $toast [ type ] ( content , { position : 'bottom-center' , timeout : timeout , closeButton : false , closeOnClick : timeout !== null } )
}
} ,
2021-08-18 00:01:11 +02:00
connect ( ) {
console . log ( '[SOCKET] Connected' )
2021-08-24 01:31:04 +02:00
var token = this . $store . getters [ 'user/getToken' ]
2021-08-18 00:01:11 +02:00
this . socket . emit ( 'auth' , token )
2021-11-07 20:02:56 +01:00
2021-12-04 01:03:34 +01:00
if ( ! this . isFirstSocketConnection || this . socketConnectionToastId !== null ) {
2022-11-16 23:11:06 +01:00
this . updateSocketConnectionToast ( this . $strings . ToastSocketConnected , 'success' , 5000 )
2021-11-07 20:02:56 +01:00
}
this . isFirstSocketConnection = false
this . isSocketConnected = true
} ,
connectError ( ) {
console . error ( '[SOCKET] connect error' )
2022-11-16 23:11:06 +01:00
this . updateSocketConnectionToast ( this . $strings . ToastSocketFailedToConnect , 'error' , null )
2021-08-18 00:01:11 +02:00
} ,
disconnect ( ) {
console . log ( '[SOCKET] Disconnected' )
2021-11-07 20:02:56 +01:00
this . isSocketConnected = false
2022-11-16 23:11:06 +01:00
this . updateSocketConnectionToast ( this . $strings . ToastSocketDisconnected , 'error' , null )
2021-11-07 20:02:56 +01:00
} ,
reconnect ( ) {
console . error ( '[SOCKET] reconnected' )
} ,
2021-12-04 01:03:34 +01:00
reconnectAttempt ( val ) {
console . log ( ` [SOCKET] reconnect attempt ${ val } ` )
2021-11-07 20:02:56 +01:00
} ,
reconnectError ( ) {
2021-12-04 01:03:34 +01:00
// console.error('[SOCKET] reconnect error')
2021-11-07 20:02:56 +01:00
} ,
reconnectFailed ( ) {
console . error ( '[SOCKET] reconnect failed' )
2021-08-18 00:01:11 +02:00
} ,
2022-08-28 00:27:55 +02:00
init ( payload ) {
2021-08-18 00:01:11 +02:00
console . log ( 'Init Payload' , payload )
2021-11-26 01:39:02 +01:00
2021-10-23 03:08:02 +02:00
if ( payload . usersOnline ) {
2022-11-24 21:44:09 +01:00
this . $store . commit ( 'users/setUsersOnline' , payload . usersOnline )
2021-10-23 03:08:02 +02:00
}
2021-12-21 02:26:22 +01:00
this . $eventBus . $emit ( 'socket_init' )
2021-08-18 00:01:11 +02:00
} ,
streamOpen ( stream ) {
2024-02-15 01:12:35 +01:00
if ( this . $refs . mediaPlayerContainer ) this . $refs . mediaPlayerContainer . streamOpen ( stream )
2021-08-18 00:01:11 +02:00
} ,
streamClosed ( streamId ) {
2024-02-15 01:12:35 +01:00
if ( this . $refs . mediaPlayerContainer ) this . $refs . mediaPlayerContainer . streamClosed ( streamId )
2021-08-18 00:01:11 +02:00
} ,
streamProgress ( data ) {
2024-02-15 01:12:35 +01:00
if ( this . $refs . mediaPlayerContainer ) this . $refs . mediaPlayerContainer . streamProgress ( data )
2021-08-18 00:01:11 +02:00
} ,
streamReady ( ) {
2024-02-15 01:12:35 +01:00
if ( this . $refs . mediaPlayerContainer ) this . $refs . mediaPlayerContainer . streamReady ( )
2021-08-18 00:01:11 +02:00
} ,
streamReset ( payload ) {
2024-02-15 01:12:35 +01:00
if ( this . $refs . mediaPlayerContainer ) this . $refs . mediaPlayerContainer . streamReset ( payload )
2021-08-18 00:01:11 +02:00
} ,
2021-11-13 22:24:56 +01:00
streamError ( { id , errorMessage } ) {
this . $toast . error ( ` Stream Failed: ${ errorMessage } ` )
2024-02-15 01:12:35 +01:00
if ( this . $refs . mediaPlayerContainer ) this . $refs . mediaPlayerContainer . streamError ( id )
2021-11-13 22:24:56 +01:00
} ,
2021-10-05 05:11:42 +02:00
libraryAdded ( library ) {
this . $store . commit ( 'libraries/addUpdate' , library )
} ,
libraryUpdated ( library ) {
this . $store . commit ( 'libraries/addUpdate' , library )
} ,
2022-04-30 01:57:46 +02:00
async libraryRemoved ( library ) {
2022-05-15 00:23:22 +02:00
console . log ( 'Library removed' , library )
2021-10-05 05:11:42 +02:00
this . $store . commit ( 'libraries/remove' , library )
2022-04-30 01:57:46 +02:00
// When removed currently selected library then set next accessible library
2022-11-27 00:24:46 +01:00
const currLibraryId = this . currentLibraryId
2022-04-30 01:57:46 +02:00
if ( currLibraryId === library . id ) {
var nextLibrary = this . $store . getters [ 'libraries/getNextAccessibleLibrary' ]
if ( nextLibrary ) {
await this . $store . dispatch ( 'libraries/fetch' , nextLibrary . id )
if ( this . $route . name . startsWith ( 'config' ) ) {
// No need to refresh
} else if ( this . $route . name . startsWith ( 'library' ) ) {
var newRoute = this . $route . path . replace ( currLibraryId , nextLibrary . id )
this . $router . push ( newRoute )
} else {
this . $router . push ( ` /library/ ${ nextLibrary . id } ` )
}
} else {
2022-05-15 00:23:22 +02:00
console . error ( 'User has no more accessible libraries' )
this . $store . commit ( 'libraries/setCurrentLibrary' , null )
2022-04-30 01:57:46 +02:00
}
}
2021-10-05 05:11:42 +02:00
} ,
2022-03-13 02:59:35 +01:00
libraryItemAdded ( libraryItem ) {
2022-05-13 23:51:54 +02:00
this . $store . commit ( 'libraries/updateFilterDataWithItem' , libraryItem )
2022-03-13 02:59:35 +01:00
} ,
2022-03-12 02:46:32 +01:00
libraryItemUpdated ( libraryItem ) {
if ( this . $store . state . selectedLibraryItem && this . $store . state . selectedLibraryItem . id === libraryItem . id ) {
this . $store . commit ( 'setSelectedLibraryItem' , libraryItem )
2022-07-31 20:12:37 +02:00
if ( this . $store . state . globals . selectedEpisode && libraryItem . mediaType === 'podcast' ) {
const episode = libraryItem . media . episodes . find ( ( ep ) => ep . id === this . $store . state . globals . selectedEpisode . id )
if ( episode ) {
this . $store . commit ( 'globals/setSelectedEpisode' , episode )
}
}
2022-03-12 02:46:32 +01:00
}
this . $eventBus . $emit ( ` ${ libraryItem . id } _updated ` , libraryItem )
2022-05-13 23:51:54 +02:00
this . $store . commit ( 'libraries/updateFilterDataWithItem' , libraryItem )
2022-03-12 02:46:32 +01:00
} ,
2022-03-13 00:45:32 +01:00
libraryItemRemoved ( item ) {
if ( this . $route . name . startsWith ( 'item' ) ) {
if ( this . $route . params . id === item . id ) {
2022-11-27 00:24:46 +01:00
this . $router . replace ( ` /library/ ${ this . currentLibraryId } ` )
2022-03-13 00:45:32 +01:00
}
}
} ,
2022-03-13 02:59:35 +01:00
libraryItemsUpdated ( libraryItems ) {
libraryItems . forEach ( ( li ) => {
this . libraryItemUpdated ( li )
} )
} ,
libraryItemsAdded ( libraryItems ) {
libraryItems . forEach ( ( ab ) => {
this . libraryItemAdded ( ab )
} )
} ,
2022-10-02 21:16:17 +02:00
taskStarted ( task ) {
console . log ( 'Task started' , task )
this . $store . commit ( 'tasks/addUpdateTask' , task )
} ,
taskFinished ( task ) {
console . log ( 'Task finished' , task )
this . $store . commit ( 'tasks/addUpdateTask' , task )
} ,
2023-04-02 23:13:18 +02:00
metadataEmbedQueueUpdate ( data ) {
if ( data . queued ) {
this . $store . commit ( 'tasks/addQueuedEmbedLId' , data . libraryItemId )
} else {
this . $store . commit ( 'tasks/removeQueuedEmbedLId' , data . libraryItemId )
}
} ,
2021-08-18 00:01:11 +02:00
userUpdated ( user ) {
2021-08-24 01:31:04 +02:00
if ( this . $store . state . user . user . id === user . id ) {
this . $store . commit ( 'user/setUser' , user )
2021-08-18 00:01:11 +02:00
}
} ,
2021-10-13 03:07:42 +02:00
userOnline ( user ) {
2022-11-24 21:44:09 +01:00
this . $store . commit ( 'users/updateUserOnline' , user )
2021-10-13 03:07:42 +02:00
} ,
userOffline ( user ) {
2022-11-24 21:44:09 +01:00
this . $store . commit ( 'users/removeUserOnline' , user )
2021-10-13 03:07:42 +02:00
} ,
userStreamUpdate ( user ) {
2022-11-24 21:44:09 +01:00
this . $store . commit ( 'users/updateUserOnline' , user )
2021-10-13 03:07:42 +02:00
} ,
2023-04-09 01:01:24 +02:00
userSessionClosed ( sessionId ) {
2023-05-28 00:21:43 +02:00
// If this session or other session is closed then dismiss multiple sessions warning toast
if ( sessionId === this . multiSessionOtherSessionId || this . multiSessionCurrentSessionId === sessionId ) {
this . multiSessionOtherSessionId = null
this . multiSessionCurrentSessionId = null
this . $toast . dismiss ( 'multiple-sessions' )
}
2024-02-15 01:12:35 +01:00
if ( this . $refs . mediaPlayerContainer ) this . $refs . mediaPlayerContainer . sessionClosedEvent ( sessionId )
2023-04-09 01:01:24 +02:00
} ,
2022-03-26 17:59:34 +01:00
userMediaProgressUpdate ( payload ) {
this . $store . commit ( 'user/updateMediaProgress' , payload )
2023-04-09 01:01:24 +02:00
if ( payload . data ) {
2023-05-28 00:21:43 +02:00
if ( this . $store . getters [ 'getIsMediaStreaming' ] ( payload . data . libraryItemId , payload . data . episodeId ) && this . $store . state . playbackSessionId !== payload . sessionId ) {
this . multiSessionOtherSessionId = payload . sessionId
this . multiSessionCurrentSessionId = this . $store . state . playbackSessionId
console . log ( ` Media progress was updated from another session ( ${ this . multiSessionOtherSessionId } ) for currently open media. Device description= ${ payload . deviceDescription } . Current session id= ${ this . multiSessionCurrentSessionId } ` )
if ( this . $store . state . streamIsPlaying ) {
this . $toast . update ( 'multiple-sessions' , { content : ` Another session is open for this item on device ${ payload . deviceDescription } ` , options : { timeout : 20000 , type : 'warning' , pauseOnFocusLoss : false } } , true )
} else {
this . $eventBus . $emit ( 'playback-time-update' , payload . data . currentTime )
}
2023-04-09 01:01:24 +02:00
}
}
2021-10-24 22:53:51 +02:00
} ,
2021-11-06 02:24:02 +01:00
collectionAdded ( collection ) {
2022-11-27 00:24:46 +01:00
if ( this . currentLibraryId !== collection . libraryId ) return
2022-11-12 00:44:19 +01:00
this . $store . commit ( 'libraries/addUpdateCollection' , collection )
2021-11-06 02:24:02 +01:00
} ,
collectionUpdated ( collection ) {
2022-11-27 00:24:46 +01:00
if ( this . currentLibraryId !== collection . libraryId ) return
2022-11-12 00:44:19 +01:00
this . $store . commit ( 'libraries/addUpdateCollection' , collection )
2021-11-06 02:24:02 +01:00
} ,
collectionRemoved ( collection ) {
2022-11-27 00:24:46 +01:00
if ( this . currentLibraryId !== collection . libraryId ) return
2021-11-07 02:31:46 +01:00
if ( this . $route . name . startsWith ( 'collection' ) ) {
if ( this . $route . params . id === collection . id ) {
2022-11-27 00:24:46 +01:00
this . $router . replace ( ` /library/ ${ this . currentLibraryId } /bookshelf/collections ` )
2021-11-07 02:31:46 +01:00
}
}
2022-11-12 00:44:19 +01:00
this . $store . commit ( 'libraries/removeCollection' , collection )
2021-11-06 02:24:02 +01:00
} ,
2023-08-18 21:40:36 +02:00
seriesRemoved ( { id , libraryId } ) {
if ( this . currentLibraryId !== libraryId ) return
this . $store . commit ( 'libraries/removeSeriesFromFilterData' , id )
} ,
2022-11-26 23:45:54 +01:00
playlistAdded ( playlist ) {
2022-11-27 00:24:46 +01:00
if ( playlist . userId !== this . user . id || this . currentLibraryId !== playlist . libraryId ) return
this . $store . commit ( 'libraries/addUpdateUserPlaylist' , playlist )
2022-11-26 23:45:54 +01:00
} ,
playlistUpdated ( playlist ) {
2022-11-27 00:24:46 +01:00
if ( playlist . userId !== this . user . id || this . currentLibraryId !== playlist . libraryId ) return
this . $store . commit ( 'libraries/addUpdateUserPlaylist' , playlist )
2022-11-26 23:45:54 +01:00
} ,
playlistRemoved ( playlist ) {
2022-11-27 00:24:46 +01:00
if ( playlist . userId !== this . user . id || this . currentLibraryId !== playlist . libraryId ) return
2022-11-26 23:45:54 +01:00
if ( this . $route . name . startsWith ( 'playlist' ) ) {
if ( this . $route . params . id === playlist . id ) {
2022-11-27 00:24:46 +01:00
this . $router . replace ( ` /library/ ${ this . currentLibraryId } /bookshelf/playlists ` )
2022-11-26 23:45:54 +01:00
}
}
2022-11-27 00:24:46 +01:00
this . $store . commit ( 'libraries/removeUserPlaylist' , playlist )
2022-11-26 23:45:54 +01:00
} ,
2021-10-09 00:30:20 +02:00
backupApplied ( ) {
// Force refresh
location . reload ( )
} ,
2022-09-24 23:17:36 +02:00
batchQuickMatchComplete ( result ) {
var success = result . success || false
var toast = 'Batch quick match complete!\n' + result . updates + ' Updated'
2022-10-02 21:16:17 +02:00
if ( result . unmatched && result . unmatched > 0 ) {
2022-09-24 23:17:36 +02:00
toast += '\n' + result . unmatched + ' with no matches'
}
if ( success ) {
this . $toast . success ( toast )
} else {
this . $toast . info ( toast )
}
} ,
2022-11-24 20:51:41 +01:00
adminMessageEvt ( message ) {
this . $toast . info ( message )
} ,
2023-05-30 00:38:38 +02:00
ereaderDevicesUpdated ( data ) {
if ( ! data ? . ereaderDevices ) return
this . $store . commit ( 'libraries/setEReaderDevices' , data . ereaderDevices )
} ,
2024-02-11 23:48:16 +01:00
customMetadataProviderAdded ( provider ) {
if ( ! provider ? . id ) return
this . $store . commit ( 'scanners/addCustomMetadataProvider' , provider )
} ,
customMetadataProviderRemoved ( provider ) {
if ( ! provider ? . id ) return
this . $store . commit ( 'scanners/removeCustomMetadataProvider' , provider )
2024-01-03 01:36:56 +01:00
} ,
2021-08-18 00:01:11 +02:00
initializeSocket ( ) {
this . socket = this . $nuxtSocket ( {
name : process . env . NODE _ENV === 'development' ? 'dev' : 'prod' ,
persist : 'main' ,
2021-11-07 20:02:56 +01:00
teardown : false ,
2021-08-18 00:01:11 +02:00
transports : [ 'websocket' ] ,
2021-11-07 20:02:56 +01:00
upgrade : false ,
reconnection : true
2021-08-18 00:01:11 +02:00
} )
2021-11-07 22:28:06 +01:00
this . $root . socket = this . socket
2021-12-02 02:07:03 +01:00
console . log ( 'Socket initialized' )
2021-08-18 00:01:11 +02:00
2022-11-24 23:35:26 +01:00
// Pre-defined socket events
2021-08-18 00:01:11 +02:00
this . socket . on ( 'connect' , this . connect )
this . socket . on ( 'connect_error' , this . connectError )
this . socket . on ( 'disconnect' , this . disconnect )
2021-12-04 01:03:34 +01:00
this . socket . io . on ( 'reconnect_attempt' , this . reconnectAttempt )
2021-11-07 20:02:56 +01:00
this . socket . io . on ( 'reconnect' , this . reconnect )
this . socket . io . on ( 'reconnect_error' , this . reconnectError )
this . socket . io . on ( 'reconnect_failed' , this . reconnectFailed )
2021-08-18 00:01:11 +02:00
2022-11-24 23:35:26 +01:00
// Event received after authorizing socket
2021-08-18 00:01:11 +02:00
this . socket . on ( 'init' , this . init )
// Stream Listeners
this . socket . on ( 'stream_open' , this . streamOpen )
this . socket . on ( 'stream_closed' , this . streamClosed )
this . socket . on ( 'stream_progress' , this . streamProgress )
this . socket . on ( 'stream_ready' , this . streamReady )
this . socket . on ( 'stream_reset' , this . streamReset )
2021-11-13 22:24:56 +01:00
this . socket . on ( 'stream_error' , this . streamError )
2021-08-18 00:01:11 +02:00
2021-10-05 05:11:42 +02:00
// Library Listeners
this . socket . on ( 'library_updated' , this . libraryUpdated )
this . socket . on ( 'library_added' , this . libraryAdded )
this . socket . on ( 'library_removed' , this . libraryRemoved )
2022-03-12 02:46:32 +01:00
// Library Item Listeners
2022-03-13 02:59:35 +01:00
this . socket . on ( 'item_added' , this . libraryItemAdded )
2022-03-12 02:46:32 +01:00
this . socket . on ( 'item_updated' , this . libraryItemUpdated )
2022-03-13 00:45:32 +01:00
this . socket . on ( 'item_removed' , this . libraryItemRemoved )
2022-03-13 02:59:35 +01:00
this . socket . on ( 'items_updated' , this . libraryItemsUpdated )
this . socket . on ( 'items_added' , this . libraryItemsAdded )
2022-03-12 02:46:32 +01:00
2021-08-18 00:01:11 +02:00
// User Listeners
this . socket . on ( 'user_updated' , this . userUpdated )
2021-10-13 03:07:42 +02:00
this . socket . on ( 'user_online' , this . userOnline )
this . socket . on ( 'user_offline' , this . userOffline )
this . socket . on ( 'user_stream_update' , this . userStreamUpdate )
2023-04-09 01:01:24 +02:00
this . socket . on ( 'user_session_closed' , this . userSessionClosed )
2022-03-26 17:59:34 +01:00
this . socket . on ( 'user_item_progress_updated' , this . userMediaProgressUpdate )
2021-08-18 00:01:11 +02:00
2022-11-26 23:45:54 +01:00
// Collection Listeners
2021-11-06 02:24:02 +01:00
this . socket . on ( 'collection_added' , this . collectionAdded )
this . socket . on ( 'collection_updated' , this . collectionUpdated )
this . socket . on ( 'collection_removed' , this . collectionRemoved )
2023-08-18 21:40:36 +02:00
// Series Listeners
this . socket . on ( 'series_removed' , this . seriesRemoved )
2022-11-26 23:45:54 +01:00
// User Playlist Listeners
this . socket . on ( 'playlist_added' , this . playlistAdded )
this . socket . on ( 'playlist_updated' , this . playlistUpdated )
this . socket . on ( 'playlist_removed' , this . playlistRemoved )
2022-10-02 21:16:17 +02:00
// Task Listeners
this . socket . on ( 'task_started' , this . taskStarted )
this . socket . on ( 'task_finished' , this . taskFinished )
2023-04-02 23:13:18 +02:00
this . socket . on ( 'metadata_embed_queue_update' , this . metadataEmbedQueueUpdate )
2021-10-01 01:52:32 +02:00
2023-05-30 00:38:38 +02:00
// EReader Device Listeners
this . socket . on ( 'ereader-devices-updated' , this . ereaderDevicesUpdated )
2021-10-09 00:30:20 +02:00
this . socket . on ( 'backup_applied' , this . backupApplied )
2022-10-02 21:16:17 +02:00
2022-09-24 23:17:36 +02:00
this . socket . on ( 'batch_quickmatch_complete' , this . batchQuickMatchComplete )
2022-11-24 20:51:41 +01:00
this . socket . on ( 'admin_message' , this . adminMessageEvt )
2024-01-03 01:36:56 +01:00
// Custom metadata provider Listeners
2024-02-11 23:48:16 +01:00
this . socket . on ( 'custom_metadata_provider_added' , this . customMetadataProviderAdded )
this . socket . on ( 'custom_metadata_provider_removed' , this . customMetadataProviderRemoved )
2021-09-16 00:59:38 +02:00
} ,
showUpdateToast ( versionData ) {
var ignoreVersion = localStorage . getItem ( 'ignoreVersion' )
var latestVersion = versionData . latestVersion
if ( ! ignoreVersion || ignoreVersion !== latestVersion ) {
this . $toast . info ( ` Update is available! \ nCheck release notes for v ${ versionData . latestVersion } ` , {
position : 'top-center' ,
toastClassName : 'cursor-pointer' ,
bodyClassName : 'custom-class-1' ,
timeout : 20000 ,
closeOnClick : false ,
draggable : false ,
hideProgressBar : false ,
onClick : ( ) => {
window . open ( versionData . githubTagUrl , '_blank' )
} ,
onClose : ( ) => {
localStorage . setItem ( 'ignoreVersion' , versionData . latestVersion )
}
} )
} else {
console . warn ( ` Update is available but user chose to dismiss it! v ${ versionData . latestVersion } ` )
}
2021-10-23 03:08:02 +02:00
} ,
checkActiveElementIsInput ( ) {
2023-06-07 18:01:11 +02:00
const activeElement = document . activeElement
const inputs = [ 'input' , 'select' , 'button' , 'textarea' , 'trix-editor' ]
return activeElement && inputs . some ( ( i ) => i === activeElement . tagName . toLowerCase ( ) )
2021-10-23 03:08:02 +02:00
} ,
2021-10-24 21:02:49 +02:00
getHotkeyName ( e ) {
2021-10-23 23:49:34 +02:00
var keyCode = e . keyCode || e . which
if ( ! this . $keynames [ keyCode ] ) {
// Unused hotkey
2021-10-24 21:02:49 +02:00
return null
2021-10-23 03:08:02 +02:00
}
2021-10-23 23:49:34 +02:00
var keyName = this . $keynames [ keyCode ]
var name = keyName
if ( e . shiftKey ) name = 'Shift-' + keyName
if ( process . env . NODE _ENV !== 'production' ) {
console . log ( 'Hotkey command' , name )
}
2021-10-24 21:02:49 +02:00
return name
} ,
keyDown ( e ) {
var name = this . getHotkeyName ( e )
if ( ! name ) return
2021-10-23 23:49:34 +02:00
// Input is focused then ignore key press
2021-10-23 03:08:02 +02:00
if ( this . checkActiveElementIsInput ( ) ) {
return
}
2021-10-23 23:49:34 +02:00
// Modal is open
2021-10-24 21:02:49 +02:00
if ( this . $store . state . openModal && Object . values ( this . $hotkeys . Modal ) . includes ( name ) ) {
2021-10-23 23:49:34 +02:00
this . $eventBus . $emit ( 'modal-hotkey' , name )
2021-10-24 21:02:49 +02:00
e . preventDefault ( )
2021-10-23 23:49:34 +02:00
return
}
// EReader is open
2021-10-24 21:02:49 +02:00
if ( this . $store . state . showEReader && Object . values ( this . $hotkeys . EReader ) . includes ( name ) ) {
2021-10-23 23:49:34 +02:00
this . $eventBus . $emit ( 'reader-hotkey' , name )
2021-10-24 21:02:49 +02:00
e . preventDefault ( )
2021-10-23 23:49:34 +02:00
return
}
// Batch selecting
2022-12-01 00:09:00 +01:00
if ( this . $store . getters [ 'globals/getIsBatchSelectingMediaItems' ] && name === 'Escape' ) {
2021-10-23 23:49:34 +02:00
// ESCAPE key cancels batch selection
2022-12-01 00:09:00 +01:00
this . $store . commit ( 'globals/resetSelectedMediaItems' , [ ] )
2022-10-29 01:10:19 +02:00
this . $eventBus . $emit ( 'bookshelf_clear_selection' )
2021-10-24 21:02:49 +02:00
e . preventDefault ( )
2021-10-23 03:08:02 +02:00
return
}
// Playing audiobook
2022-03-14 01:34:31 +01:00
if ( this . $store . state . streamLibraryItem && Object . values ( this . $hotkeys . AudioPlayer ) . includes ( name ) ) {
2021-10-23 23:49:34 +02:00
this . $eventBus . $emit ( 'player-hotkey' , name )
2021-10-24 21:02:49 +02:00
e . preventDefault ( )
2021-10-23 03:08:02 +02:00
}
2022-02-09 18:19:02 +01:00
} ,
resize ( ) {
this . $store . commit ( 'globals/updateWindowSize' , { width : window . innerWidth , height : window . innerHeight } )
2022-04-29 19:20:51 +02:00
} ,
checkVersionUpdate ( ) {
2022-06-02 00:15:13 +02:00
this . $store
. dispatch ( 'checkForUpdate' )
. then ( ( res ) => {
if ( res && res . hasUpdate ) this . showUpdateToast ( res )
} )
. catch ( ( err ) => console . error ( err ) )
2022-08-28 21:21:28 +02:00
} ,
initLocalStorage ( ) {
// Queue auto play
var playerQueueAutoPlay = localStorage . getItem ( 'playerQueueAutoPlay' )
this . $store . commit ( 'setPlayerQueueAutoPlay' , playerQueueAutoPlay !== '0' )
2022-10-02 21:16:17 +02:00
} ,
loadTasks ( ) {
this . $axios
2023-04-02 23:13:18 +02:00
. $get ( '/api/tasks?include=queue' )
2022-10-02 21:16:17 +02:00
. then ( ( payload ) => {
console . log ( 'Fetched tasks' , payload )
if ( payload . tasks ) {
this . $store . commit ( 'tasks/setTasks' , payload . tasks )
}
2023-04-02 23:13:18 +02:00
if ( payload . queuedTaskData ? . embedMetadata ? . length ) {
this . $store . commit (
'tasks/setQueuedEmbedLIds' ,
payload . queuedTaskData . embedMetadata . map ( ( td ) => td . libraryItemId )
)
}
2022-10-02 21:16:17 +02:00
} )
. catch ( ( error ) => {
console . error ( 'Failed to load tasks' , error )
} )
2022-11-10 01:00:20 +01:00
} ,
changeLanguage ( code ) {
console . log ( 'Changed lang' , code )
this . currentLang = code
2023-04-26 02:00:57 +02:00
document . documentElement . lang = code
2021-08-18 00:01:11 +02:00
}
} ,
2021-12-02 02:07:03 +01:00
beforeMount ( ) {
this . initializeSocket ( )
} ,
2021-08-18 00:01:11 +02:00
mounted ( ) {
2022-07-12 23:11:23 +02:00
this . updateBodyClass ( )
2022-02-09 18:19:02 +01:00
this . resize ( )
2022-11-10 01:00:20 +01:00
this . $eventBus . $on ( 'change-lang' , this . changeLanguage )
2022-02-09 18:19:02 +01:00
window . addEventListener ( 'resize' , this . resize )
2021-10-24 21:02:49 +02:00
window . addEventListener ( 'keydown' , this . keyDown )
2022-02-23 00:33:55 +01:00
2021-10-05 05:11:42 +02:00
this . $store . dispatch ( 'libraries/load' )
2022-08-28 21:21:28 +02:00
this . initLocalStorage ( )
2021-10-07 04:08:52 +02:00
2022-04-29 19:20:51 +02:00
this . checkVersionUpdate ( )
2022-06-02 00:15:13 +02:00
2022-10-02 21:16:17 +02:00
this . loadTasks ( )
2022-06-02 00:15:13 +02:00
if ( this . $route . query . error ) {
this . $toast . error ( this . $route . query . error )
this . $router . replace ( this . $route . path )
}
2023-04-26 02:00:57 +02:00
// Set lang on HTML tag
if ( this . $languageCodes ? . current ) {
document . documentElement . lang = this . $languageCodes . current
}
2021-10-23 03:08:02 +02:00
} ,
beforeDestroy ( ) {
2022-11-10 01:00:20 +01:00
this . $eventBus . $off ( 'change-lang' , this . changeLanguage )
2022-02-09 18:19:02 +01:00
window . removeEventListener ( 'resize' , this . resize )
2021-10-24 21:02:49 +02:00
window . removeEventListener ( 'keydown' , this . keyDown )
2021-08-18 00:01:11 +02:00
}
}
2021-09-16 00:59:38 +02:00
< / script >
< style >
. Vue - Toastification _ _toast - body . custom - class - 1 {
font - size : 14 px ;
}
2022-05-14 00:40:43 +02:00
# app - content {
width : 100 % ;
}
# app - content . has - siderail {
width : calc ( 100 % - 80 px ) ;
max - width : calc ( 100 % - 80 px ) ;
margin - left : 80 px ;
}
2022-05-15 22:51:30 +02:00
@ media ( max - width : 768 px ) {
# app - content . has - siderail {
width : 100 % ;
max - width : 100 % ;
margin - left : 0 px ;
}
}
2024-07-07 22:51:50 +02:00
< / style >