Support auto fullscreen

packages/application/src/plugins/rise.ts

@@ -69,6 +69,7 @@ export const plugin: JupyterFrontEndPlugin<void> = {
 
     // Remove active cell from argument
     url.searchParams.delete('activeCellIndex');
+    url.searchParams.delete('fullscreen');
     window.history.pushState(null, '', url.toString());
 
     Promise.all([
@@ -122,7 +123,13 @@ export const plugin: JupyterFrontEndPlugin<void> = {
 
           // We wait for the notebook to be loaded to get the settings from the metadata.
           Rise.loadConfiguration(settings, notebookPanel.model);
-          Rise.revealMode(notebookPanel, app.commands, trans);
+          Rise.revealMode(notebookPanel, app.commands, trans)
+            .catch(reason => {
+              console.error(
+                'Fail to update the notebook with Reveal.JS.',
+                reason
+              );
+            });
 
           Signal.disconnectAll(this);
         }
@@ -886,9 +893,7 @@ namespace Rise {
     // Attempt to load css with the same path as notebook
     document.head.insertAdjacentHTML(
       'beforeend',
-      `<link rel="stylesheet" href="${PageConfig.getOption(
-        'fullStaticUrl'
-      )}/${name_css}" id="rise-notebook-css" />`
+      `<link rel="stylesheet" href="${PageConfig.getBaseUrl()}/${name_css}" id="rise-notebook-css" />`
     );
 
     // Asynchronously import reveal

packages/lab/schema/plugin.json

@@ -12,7 +12,7 @@
             "command": "RISE:preview"
           },
           {
-            "command": "RISE:slideshow"
+            "command": "RISE:fullscreen-plugin"
           },
           { "type": "separator" }
         ]
@@ -21,7 +21,7 @@
   },
   "jupyter.lab.shortcuts": [
     {
-      "command": "RISE:slideshow",
+      "command": "RISE:preview",
       "keys": ["Alt R"],
       "selector": ".jp-Notebook:focus"
     },

packages/lab/src/icons.ts

@@ -1,5 +1,10 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 
 import RISESvg from '../style/slideshow.svg';
+import fullScreenSvg from '../style/fullscreen.svg';
 
 export const RISEIcon = new LabIcon({ name: 'RISE', svgstr: RISESvg });
+export const fullScreenIcon = new LabIcon({
+  name: 'RISE:fullScreen',
+  svgstr: fullScreenSvg
+});

packages/lab/src/index.ts

@@ -7,10 +7,11 @@ import {
 import {
   CommandToolbarButton,
   ICommandPalette,
+  showDialog,
   WidgetTracker
 } from '@jupyterlab/apputils';
 
-import { IChangedArgs, PageConfig, URLExt } from '@jupyterlab/coreutils';
+import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 
 import { DocumentRegistry } from '@jupyterlab/docregistry';
 
@@ -25,9 +26,11 @@ import { ISettingRegistry } from '@jupyterlab/settingregistry';
 
 import { ITranslator } from '@jupyterlab/translation';
 
+import { toArray } from '@lumino/algorithm';
+
 import { ReadonlyPartialJSONObject } from '@lumino/coreutils';
 
-import { RISEIcon } from './icons';
+import { fullScreenIcon, RISEIcon } from './icons';
 
 import {
   RisePreview,
@@ -45,6 +48,7 @@ namespace CommandIDs {
    * Open the current notebook in a new browser tab
    */
   export const openRise = 'RISE:slideshow';
+  export const riseFullScreen = 'RISE:fullscreen-plugin';
   /**
    * Open the current notebook in a IFrame within JupyterLab
    */
@@ -104,6 +108,7 @@ const plugin: JupyterFrontEndPlugin<IRisePreviewTracker> = {
 
     if (restorer) {
       restorer.restore(tracker, {
+        // Need to modify to handle auto full screen
         command: 'docmanager:open',
         args: panel => ({
           path: panel.context.path,
@@ -157,7 +162,6 @@ const plugin: JupyterFrontEndPlugin<IRisePreviewTracker> = {
       caption: trans.__(
         'Open the current notebook in a new browser tab as an RevealJS slideshow.'
       ),
-      icon: RISEIcon,
       execute: async () => {
         const current = notebookTracker.currentWidget;
         if (!current) {
@@ -203,11 +207,76 @@ const plugin: JupyterFrontEndPlugin<IRisePreviewTracker> = {
           widget.disposed.connect(() => {
             current.content.activeCellChanged.disconnect(updateActiveIndex);
           });
+
+          if (args['fullscreen'] === true) {
+            widget.ready
+              .then(() => {
+                showDialog({
+                  title: trans.__('Switch to full screen'),
+                  body: trans.__(
+                    'The slideshow is set to automatically open in full screen. Your web browser requires your confirmation to do so.'
+                  )
+                }).then(result => {
+                  if (result.button.accept) {
+                    commands.execute(CommandIDs.riseFullScreen, {
+                      id: widget.id
+                    });
+                  }
+                });
+              })
+              .catch(reason => {
+                console.log(reason);
+              });
+          }
         }
       },
       isEnabled
     });
 
+    commands.addCommand(CommandIDs.riseFullScreen, {
+      label: trans.__('Full screen slideshow'),
+      caption: trans.__('Toggle full screen the current active slideshow'),
+      icon: fullScreenIcon,
+      execute: async args => {
+        if (args['id']) {
+          app.shell.activateById(args['id'] as string);
+        }
+        const current = args['id']
+          ? toArray(app.shell.widgets('main')).find(
+              widget => widget.id === args['id']
+            )
+          : app.shell.currentWidget;
+        if (current && tracker.has(current)) {
+          const iframe = (current as RisePreview).content.node.querySelector(
+            'iframe'
+          );
+          if (iframe) {
+            if (
+              !document.fullscreenElement &&
+              !iframe.contentDocument?.fullscreenElement
+            ) {
+              const goFullScreen = () => {
+                iframe?.contentWindow?.document
+                  .querySelector('div.reveal')
+                  ?.requestFullscreen();
+              };
+              if (iframe.contentDocument?.readyState === 'complete') {
+                goFullScreen();
+              } else {
+                iframe.contentWindow?.addEventListener('load', goFullScreen);
+              }
+            } else {
+              if (document.exitFullscreen) {
+                await document.exitFullscreen();
+              }
+            }
+          }
+        }
+      },
+      isEnabled: () =>
+        !!app.shell.currentWidget && tracker.has(app.shell.currentWidget)
+    });
+
     commands.addCommand(CommandIDs.riseSetSlideType, {
       label: args => trans.__('Toggle slideshow %1 type', args['type']),
       caption: args =>
@@ -275,31 +344,24 @@ const plugin: JupyterFrontEndPlugin<IRisePreviewTracker> = {
           })
         );
 
-        const isNotebookModelReady = (
-          _: any,
-          change: IChangedArgs<any, any, string>
-        ) => {
-          if (change.name === 'dirty' && change.newValue === false) {
-            panel.model?.stateChanged.disconnect(isNotebookModelReady);
-
-            let autolaunch: boolean =
-              // @ts-expect-error Unknown type
-              (panel.content.model?.metadata.get('rise') ?? {})['autolaunch'] ??
-              false;
-            if (settings) {
-              // @ts-expect-error unknown type
-              autolaunch |= settings.get('autolaunch').composite;
-            }
-
-            if (autolaunch) {
-              commands.execute(CommandIDs.risePreview);
-            }
-          }
-        };
-
         // Don't trigger auto launch in stand-alone Rise application.
         if (app.name !== 'Rise') {
-          panel.model?.stateChanged.connect(isNotebookModelReady);
+          await panel.context.ready;
+
+          let autolaunch: boolean =
+            // @ts-expect-error Unknown type
+            (panel.content.model?.metadata.get('rise') ?? {})['autolaunch'] ??
+            false;
+          if (settings) {
+            // @ts-expect-error unknown type
+            autolaunch |= settings.get('autolaunch').composite;
+          }
+
+          if (autolaunch) {
+            await commands.execute(CommandIDs.risePreview, {
+              fullscreen: true
+            });
+          }
         }
       }
     );

packages/lab/src/preview.ts

@@ -13,19 +13,21 @@ import {
 
 import { INotebookModel } from '@jupyterlab/notebook';
 
+import { ITranslator, nullTranslator } from '@jupyterlab/translation';
+
 import { refreshIcon } from '@jupyterlab/ui-components';
 
 import { CommandRegistry } from '@lumino/commands';
 
-import { Token } from '@lumino/coreutils';
+import { PromiseDelegate, Token } from '@lumino/coreutils';
 
 import { Message } from '@lumino/messaging';
 
 import { Signal } from '@lumino/signaling';
 
 import { Widget } from '@lumino/widgets';
 
-import { RISEIcon } from './icons';
+import { fullScreenIcon, RISEIcon } from './icons';
 
 /**
  * A class that tracks Rise Preview widgets.
@@ -62,10 +64,17 @@ export class RisePreview extends DocumentWidget<IFrame, INotebookModel> {
       })
     });
 
-    const { getRiseUrl, context, renderOnSave } = options;
+    this._ready = new PromiseDelegate<void>();
+    // `setActiveCellIndex` needs to be called at least once.
+    // after instantiation.
+    this._ready.reject('Not loading at instantiation.');
+
+    const { getRiseUrl, context, renderOnSave, translator } = options;
     this.getRiseUrl = getRiseUrl;
     this._path = context.path;
 
+    const trans = (translator ?? nullTranslator).load('rise');
+
     this.content.title.icon = RISEIcon;
 
     this._renderOnSave = renderOnSave ?? false;
@@ -76,7 +85,7 @@ export class RisePreview extends DocumentWidget<IFrame, INotebookModel> {
 
     const reloadButton = new ToolbarButton({
       icon: refreshIcon,
-      tooltip: 'Reload Preview',
+      tooltip: trans.__('Reload Preview'),
       onClick: () => {
         this.reload();
       }
@@ -86,16 +95,17 @@ export class RisePreview extends DocumentWidget<IFrame, INotebookModel> {
       checked: this._renderOnSave,
       onChange: (event: Event) => {
         this._renderOnSave = (event.target as any)?.checked ?? false;
-      }
+      },
+      translator
     });
 
     this.toolbar.addItem(
-      'open',
+      'fullscreen',
       new ToolbarButton({
-        icon: RISEIcon,
-        tooltip: 'Open in a new browser tab',
+        icon: fullScreenIcon,
+        tooltip: trans.__('Open the slideshow in full screen'),
         onClick: () => {
-          options.commands.execute('RISE:slideshow');
+          options.commands.execute('RISE:fullscreen-plugin');
         }
       })
     );
@@ -116,6 +126,13 @@ export class RisePreview extends DocumentWidget<IFrame, INotebookModel> {
     this.toolbar.addItem('reload', reloadButton);
   }
 
+  /**
+   * Promise that resolves when the slideshow is ready
+   */
+  get ready(): Promise<void> {
+    return this._ready.promise;
+  }
+
   /**
    * Dispose the preview widget.
    */
@@ -145,10 +162,22 @@ export class RisePreview extends DocumentWidget<IFrame, INotebookModel> {
   }
 
   setActiveCellIndex(index: number, reload = true): void {
+    const iframe = this.content.node.querySelector('iframe')!;
     if (reload) {
+      this._ready = new PromiseDelegate<void>();
+      const setReady = () => {
+        iframe.contentWindow!.removeEventListener('load', setReady);
+        const waitForReveal = setInterval(() => {
+          if (iframe.contentDocument!.querySelector('.reveal')) {
+            clearInterval(waitForReveal);
+            this._ready.resolve();
+          }
+        }, 500);
+      };
+
       this.content.url = this.getRiseUrl(this.path, index);
+      iframe.contentWindow!.addEventListener('load', setReady);
     } else {
-      const iframe = this.content.node.querySelector('iframe')!;
       if (iframe.contentWindow) {
         iframe.contentWindow.history.pushState(
           null,
@@ -169,8 +198,9 @@ export class RisePreview extends DocumentWidget<IFrame, INotebookModel> {
     }
   }
 
-  private _renderOnSave: boolean;
   protected getRiseUrl: (path: string, index?: number) => string;
+  private _ready: PromiseDelegate<void>;
+  private _renderOnSave: boolean;
   private _path: string;
 }
 
@@ -190,7 +220,7 @@ export namespace RisePreview {
     /**
      * The Rise URL function.
      */
-    getRiseUrl: (path: string) => string;
+    getRiseUrl: (path: string, index?: number) => string;
 
     /**
      * Whether to reload the preview on context saved.
@@ -242,6 +272,10 @@ namespace Private {
        * Callback on checked status changes
        */
       onChange?: (ev: Event) => void;
+      /**
+       * Translator
+       */
+      translator?: ITranslator;
     }
   }
 
@@ -250,10 +284,13 @@ namespace Private {
    */
   export class CheckBox extends Widget {
     constructor(options: CheckBox.IOptions = {}) {
+      const trans = (options.translator ?? nullTranslator).load('rise');
       const node = document.createElement('label');
       node.insertAdjacentHTML(
         'afterbegin',
-        '<input name="renderOnSave" type="checkbox"></input>Render on Save'
+        `<input name="renderOnSave" type="checkbox"></input>${trans.__(
+          'Render on Save'
+        )}`
       );
       super({ node });
       this.input = node.childNodes.item(0) as HTMLInputElement;