Enhancement: Add open slide source action and toggle presentation mode functionality; #68 #67

Author: estruyf

CHANGELOG.md

@@ -3,6 +3,8 @@
 ## [0.0.85] - 2025-03-xx
 
 - [#58](https://github.com/estruyf/vscode-demo-time/issues/58): Support theme changes in Shiki codeblocks on slides
+- [#67](https://github.com/estruyf/vscode-demo-time/issues/67): Add the open slide source action to the slide view
+- [#68](https://github.com/estruyf/vscode-demo-time/issues/68): Add the toggle action for the presentation mode to the slide view
 
 ## [0.0.84] - 2025-03-18
 

src/constants/WebViewMessages.ts

@@ -16,6 +16,7 @@ export const WebViewMessages = {
     getSlideTheme: "getSlideTheme",
     updateTitle: "updateTitle",
     getPreviousEnabled: "getPreviousEnabled",
+    openFile: "openFile",
   },
   toWebview: {
     updateClock: "updateClock",
@@ -29,5 +30,6 @@ export const WebViewMessages = {
     updateFileUri: "updateFileUri",
     triggerUpdate: "triggerUpdate",
     updateStyles: "updateStyles",
+    updateIsInPresentationMode: "updateIsInPresentationMode",
   },
 };

src/presenterView/PresenterView.ts

@@ -112,7 +112,7 @@ export class PresenterView {
       const startTime = DemoStatusBar.getCountdownStarted();
       PresenterView.postRequestMessage(command, requestId, startTime);
     } else if (command === WebViewMessages.toVscode.getPresentationStarted) {
-      const isPresentationMode = DemoRunner.getIsPresentationMode;
+      const isPresentationMode = DemoRunner.getIsPresentationMode();
       PresenterView.postRequestMessage(command, requestId, isPresentationMode);
     } else if (command === WebViewMessages.toVscode.detach) {
       const panel = PresenterView.webview;

src/preview/Preview.ts

@@ -3,6 +3,7 @@ import { Extension } from "../services/Extension";
 import { COMMAND, Config, WebViewMessages } from "../constants";
 import { MessageHandlerData } from "@estruyf/vscode";
 import { getTheme, getWebviewUrl, readFile, togglePresentationView } from "../utils";
+import { DemoRunner } from "../services";
 
 export class Preview {
   private static webview: WebviewPanel | null = null;
@@ -119,10 +120,21 @@ export class Preview {
       Preview.postRequestMessage(WebViewMessages.toVscode.getPreviousEnabled, requestId, previousEnabled);
     } else if (command === WebViewMessages.toVscode.runCommand && payload) {
       await commands.executeCommand(payload);
+    } else if (command === WebViewMessages.toVscode.getPresentationStarted) {
+      const isPresentationMode = DemoRunner.getIsPresentationMode();
+      Preview.postRequestMessage(command, requestId, isPresentationMode);
+    } else if (command === WebViewMessages.toVscode.openFile && payload) {
+      const fileUri = Uri.parse(payload);
+      const filePath = Uri.file(fileUri.path);
+      await window.showTextDocument(filePath);
     }
   }
 
   public static async postMessage(command: string, payload: any) {
+    if (Preview.isDisposed) {
+      return;
+    }
+
     Preview.webview?.webview.postMessage({
       command,
       payload,

src/preview/components/MarkdownPreview.tsx

@@ -122,7 +122,7 @@ export const MarkdownPreview: React.FunctionComponent<IMarkdownPreviewProps> = (
         </div>
       </div>
 
-      <SlideControls show={showControls && cursorVisible} />
+      <SlideControls show={showControls && cursorVisible} path={crntFilePath} />
     </div>
   );
 };

src/preview/components/ProjectorIcon.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+export interface IProjectorIconProps {
+  className?: string;
+}
+
+export const ProjectorIcon: React.FunctionComponent<IProjectorIconProps> = ({
+  className
+}: React.PropsWithChildren<IProjectorIconProps>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className || ""}>
+      <path stroke="currentcolor" d="M5 7L3 5" />
+      <path stroke="currentcolor" d="M9 6V3" />
+      <path stroke="currentcolor" d="M13 7L15 5" />
+      <circle stroke="currentcolor" cx="9" cy="13" r="3" />
+      <path stroke="currentcolor" d="M11.83 12H20a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h2.17" />
+      <path stroke="currentcolor" d="M16 16h2" />
+    </svg>
+  );
+};

src/preview/components/SlideControl.tsx

@@ -8,6 +8,7 @@ export interface ISlideControlProps {
   title: string;
   disabled?: boolean;
   isSlideControl?: boolean;
+  className?: string;
 }
 
 export const SlideControl: React.FunctionComponent<ISlideControlProps> = ({
@@ -17,13 +18,14 @@ export const SlideControl: React.FunctionComponent<ISlideControlProps> = ({
   title,
   disabled,
   isSlideControl,
+  className,
 }: React.PropsWithChildren<ISlideControlProps>) => {
   return (
     <button
       title={title}
       onClick={action}
       disabled={disabled}
-      className={`p-2 inline-flex justify-center items-center rounded hover:bg-[var(--vscode-toolbar-hoverBackground)] disabled:opacity-50 disabled:cursor-not-allowed ${!isSlideControl ? ' opacity-70 hover:opacity-100' : ''}`}
+      className={`p-2 inline-flex justify-center items-center rounded disabled:opacity-50 disabled:cursor-not-allowed ${!isSlideControl ? ' opacity-70 hover:opacity-100' : ''} ${className ? className : "hover:bg-[var(--vscode-toolbar-hoverBackground)]"}`}
     >
       <span className="sr-only">{title}</span>
       {iconName && <Icon name={iconName as any} className="!text-[var(--vscode-editorWidget-foreground)] inline-flex justify-center items-center" />}

src/preview/components/SlideControls.tsx

@@ -1,18 +1,34 @@
-import { messageHandler } from '@estruyf/vscode/dist/client/webview';
+import { messageHandler, Messenger } from '@estruyf/vscode/dist/client/webview';
 import * as React from 'react';
 import { COMMAND, WebViewMessages } from '../../constants';
 import { SlideControl } from './SlideControl';
 import { WhiteboardIcon } from './WhiteboardIcon';
 import { Icon } from 'vscrui';
+import { ProjectorIcon } from './ProjectorIcon';
+import { EventData } from '@estruyf/vscode';
 
 export interface ISlideControlsProps {
   show: boolean;
+  path?: string;
 }
 
 export const SlideControls: React.FunctionComponent<ISlideControlsProps> = ({
-  show
+  show,
+  path
 }: React.PropsWithChildren<ISlideControlsProps>) => {
   const [previousEnabled, setPreviousEnabled] = React.useState(false);
+  const [isPresentationMode, setIsPresentationMode] = React.useState(false);
+
+  const messageListener = (message: MessageEvent<EventData<any>>) => {
+    const { command, payload } = message.data;
+    if (!command) {
+      return;
+    }
+
+    if (command === WebViewMessages.toWebview.updateIsInPresentationMode) {
+      setIsPresentationMode(payload);
+    }
+  };
 
   const previous = React.useCallback(() => {
     if (previousEnabled) {
@@ -40,6 +56,14 @@ export const SlideControls: React.FunctionComponent<ISlideControlsProps> = ({
     messageHandler.send(WebViewMessages.toVscode.runCommand, "demo-time.focus");
   }, []);
 
+  const togglePresentationMode = React.useCallback(() => {
+    messageHandler.send(WebViewMessages.toVscode.runCommand, "demo-time.togglePresentationMode");
+  }, []);
+
+  const openSlideSource = React.useCallback(() => {
+    messageHandler.send(WebViewMessages.toVscode.openFile, path);
+  }, [path]);
+
   React.useEffect(() => {
     if (show) {
       messageHandler.request<boolean>(WebViewMessages.toVscode.getPreviousEnabled).then((previous) => {
@@ -48,6 +72,19 @@ export const SlideControls: React.FunctionComponent<ISlideControlsProps> = ({
     }
   }, [show]);
 
+  React.useEffect(() => {
+    messageHandler.request<boolean>(WebViewMessages.toVscode.getPresentationStarted).then((value) => {
+      console.log("value", value);
+      setIsPresentationMode(value);
+    });
+
+    Messenger.listen(messageListener);
+
+    return () => {
+      Messenger.unlisten(messageListener);
+    };
+  }, []);
+
   return (
     <div
       className={`absolute bottom-0 w-full transition-opacity duration-300 ${show ? 'opacity-90' : 'opacity-0 pointer-events-none'
@@ -58,6 +95,7 @@ export const SlideControls: React.FunctionComponent<ISlideControlsProps> = ({
         style={{ boxShadow: '0 0 8px 0 var(--vscode-widget-shadow)' }}
       >
         <div className='flex items-center'>
+          <SlideControl title="Toggle presentation mode" className={`${isPresentationMode ? `bg-[var(--vscode-statusBarItem-errorBackground)] hover:-[var(--vscode-statusBarItem-errorHoverBackground)]` : ''}`} icon={<ProjectorIcon className={`w-4 h-4 inline-flex justify-center items-center ${isPresentationMode ? `text-[var(--vscode-statusBarItem-errorForeground)] hover:text-[var(--vscode-statusBarItem-errorHoverForeground)]` : `text-[var(--vscode-editorWidget-foreground)]`}`} />} action={togglePresentationMode} />
           <SlideControl title="Toggle fullscreen" iconName="screen-full" action={toggleFullscreen} />
           <SlideControl title="Toggle presentation view" icon={<WhiteboardIcon className="w-4 h-4 text-[var(--vscode-editorWidget-foreground)] inline-flex justify-center items-center" />} action={togglePresentationView} />
           <SlideControl title="Close sidebar" icon={(
@@ -80,7 +118,13 @@ export const SlideControls: React.FunctionComponent<ISlideControlsProps> = ({
 
           <SlideControl title="Next" iconName="arrow-right" action={next} isSlideControl />
         </div>
-        <div></div>
+        <div className="flex items-center justify-end gap-4">
+          {
+            path && (
+              <SlideControl title="Open slide source" iconName="preview" action={openSlideSource} />
+            )
+          }
+        </div>
       </div>
     </div>
   );

src/services/DemoRunner.ts

@@ -169,8 +169,10 @@ export class DemoRunner {
     if (DemoRunner.isPresentationMode) {
       DemoPanel.updateMessage("Presentation mode enabled");
       await DemoRunner.getDemoFile();
+      Preview.postMessage(WebViewMessages.toWebview.updateIsInPresentationMode, true);
     } else {
       DemoPanel.updateMessage();
+      Preview.postMessage(WebViewMessages.toWebview.updateIsInPresentationMode, false);
     }
     DemoPanel.update();
   }