import { Effect , Actions , ofType } from '@ngrx/effects' ; import { Injectable } from '@angular/core' ; import { map , take , tap } from 'rxjs/operators' ; import { AppStore , ViewerActionTypes , ViewFileAction , ViewNodeAction , getCurrentFolder , getAppSelection , FullscreenViewerAction , ViewNodeVersionAction , PluginPreviewAction } from '@alfresco/aca-shared/store' ; import { Router , UrlTree , UrlSegmentGroup , PRIMARY_OUTLET , UrlSegment } from '@angular/router' ; import { Store , createSelector } from '@ngrx/store' ; import { AppExtensionService } from '@alfresco/aca-shared' ; import { MatDialog } from '@angular/material/dialog' ; export const fileToPreview = createSelector ( getAppSelection , getCurrentFolder , ( selection , folder ) => { return { selection , folder } ; } ) ; @ Injectable ( ) export class ViewerEffects { constructor ( private store , private actions$ , private router , private extensions , private dialog ) { } @ Effect ( { dispatch : false } ) fullscreenViewer$ = this . actions$ . pipe ( ofType < FullscreenViewerAction > ( ViewerActionTypes . FullScreen ) , map ( ( ) => { this . enterFullScreen ( ) ; } ) ) ; @ Effect ( { dispatch : false } ) viewNode$ = this . actions$ . pipe ( ofType < ViewNodeAction > ( ViewerActionTypes . ViewNode ) , map ( ( action ) => { if ( action . viewNodeExtras ) { const { location , path } = action . viewNodeExtras ; if ( location ) { const navigation = this . getNavigationCommands ( location ) ; this . router . navigate ( [ ... navigation , { outlets : { viewer : [ 'view' , action . nodeId ] } } ] , { queryParams : { location } } ) ; } if ( path ) { this . router . navigate ( [ 'view' , { outlets : { viewer : [ action . nodeId ] } } ] , { queryParams : { path } } ) ; } } else { this . router . navigate ( [ 'view' , { outlets : { viewer : [ action . nodeId ] } } ] ) ; } } ) ) ; @ Effect ( { dispatch : false } ) viewFile$ = this . actions$ . pipe ( ofType < ViewFileAction > ( ViewerActionTypes . ViewFile ) , map ( ( action ) => { if ( action . payload && action . payload . entry ) { const { id , nodeId , isFile } = action . payload . entry as any ; if ( this . extensions . canPreviewNode ( action . payload ) && ( isFile || nodeId ) ) { this . displayPreview ( nodeId || id , action . parentId ) ; } } else { this . store . select ( fileToPreview ) . pipe ( take ( 1 ) ) . subscribe ( ( result ) => { if ( result . selection && result . selection . file ) { const { id , nodeId , isFile } = result . selection . file . entry as any ; if ( this . extensions . canPreviewNode ( action . payload ) && ( isFile || nodeId ) ) { const parentId = result . folder ? result . folder . id : null ; this . displayPreview ( nodeId || id , parentId ) ; } } } ) ; } } ) ) ; @ Effect ( { dispatch : false } ) viewNodeVersion$ = this . actions$ . pipe ( ofType < ViewNodeVersionAction > ( ViewerActionTypes . ViewNodeVersion ) , map ( ( action ) => { this . dialog . closeAll ( ) ; if ( action . viewNodeExtras ) { const { location , path } = action . viewNodeExtras ; if ( location ) { const navigation = this . getNavigationCommands ( location ) ; this . router . navigate ( [ ... navigation , { outlets : { viewer : [ 'view' , action . nodeId , action . versionId ] } } ] , { queryParams : { location } } ) ; } if ( path ) { this . router . navigate ( [ 'view' , { outlets : { viewer : [ action . nodeId , action . versionId ] } } ] , { queryParams : { path } } ) ; } } else { this . router . navigate ( [ 'view' , { outlets : { viewer : [ action . nodeId , action . versionId ] } } ] ) ; } } ) ) ; @ Effect ( { dispatch : false } ) pluginPreview$ = this . actions$ . pipe ( ofType < PluginPreviewAction > ( ViewerActionTypes . PluginPreview ) , tap ( ( action ) => { this . router . navigate ( [ action . pluginRoute , { outlets : { viewer : [ 'preview' , action . nodeId ] } } ] ) ; } ) ) ; private displayPreview ( nodeId , parentId ) { if ( ! nodeId ) { return ; } let previewLocation = this . router . url ; if ( previewLocation . lastIndexOf ( '/' ) > 0 ) { previewLocation = previewLocation . substr ( 0 , this . router . url . indexOf ( '/' , 1 ) ) ; } previewLocation = previewLocation . replace ( /\//g , '' ) ; const path = [ previewLocation ] ; if ( parentId ) { path . push ( parentId ) ; } path . push ( 'preview' , nodeId ) ; this . router . navigateByUrl ( path . join ( '/' ) ) ; } enterFullScreen ( ) { const container = document . documentElement . querySelector ( '.adf-viewer__fullscreen-container' ) ; if ( container ) { if ( container . requestFullscreen ) { container . requestFullscreen ( ) ; } else if ( container . webkitRequestFullscreen ) { container . webkitRequestFullscreen ( ) ; } else if ( container . mozRequestFullScreen ) { container . mozRequestFullScreen ( ) ; } else if ( container . msRequestFullscreen ) { container . msRequestFullscreen ( ) ; } } } private getNavigationCommands ( url ) { const urlTree = this . router . parseUrl ( url ) ; const urlSegmentGroup = urlTree . root . children [ PRIMARY_OUTLET ] ; if ( ! urlSegmentGroup ) { return [ url ] ; } const urlSegments = urlSegmentGroup . segments ; return urlSegments . reduce ( function ( acc , item ) { acc . push ( item . path , item . parameters ) ; return acc ; } , [ ] ) ; } }