Remote play pause for videos

CHANGELOG.md

@@ -1,3 +1,19 @@
+<a name="1.0.0-rc.13-1"></a>
+# [1.0.0-rc.13-1](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-rc.13...v1.0.0-13-1) (2019-09-15)
+
+### Applications
+
+* studio: v1.0.0-beta.3-2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/studio/CHANGELOG.md))
+* remote: v1.0.0-beta.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/remote/CHANGELOG.md))
+
+### Web Components
+
+* remote: v1.0.0-rc.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/remote/CHANGELOG.md))
+
+### Others
+
+* types: v1.0.0-rc.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/types/CHANGELOG.md))
+
 <a name="1.0.0-rc.13"></a>
 # [1.0.0-rc.13](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-rc.12-2...v1.0.0-13) (2019-09-14)
 
@@ -33,16 +49,19 @@
 # [1.0.0-rc.12-1](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-rc.12...v1.0.0-12-1) (2019-09-09)
 
 ### Applications
+
 * studio: v1.0.0-beta.3-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/studio/CHANGELOG.md))
 
 ### Web Components
+
 * highlight-code: v1.0.0-rc.1-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/highlight-code/CHANGELOG.md))
 * slide-gif: v1.0.0-rc.1-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/gif/CHANGELOG.md))
 
 <a name="1.0.0-rc.12"></a>
 # [1.0.0-rc.12](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-rc.11-2...v1.0.0-12) (2019-09-08)
 
 ### Applications
+
 * studio: v1.0.0-beta.3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/studio/CHANGELOG.md))
 
 ### Others
@@ -53,9 +72,11 @@
 # [1.0.0-rc.11-2](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-rc.11-1...v1.0.0-11-2) (2019-09-04)
 
 ### Web Components
+
 * core: v1.0.0-rc.1-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/core/CHANGELOG.md))
 
 ### Applications
+
 * website: v1.0.0-rc.1-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-website/blob/master/CHANGELOG.md))
 
 ### Others
@@ -74,12 +95,15 @@
 # [1.0.0-rc.11](https://github.com/deckgo/deckdeckgo/compare/v1.0.0-rc.10...v1.0.0-11) (2019-09-01)
 
 ### Applications
+
 * studio: v1.0.0-beta.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/studio/CHANGELOG.md))
 
 ### Web Components
+
 * inline-editor: v1.0.0-rc.1-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/inline-editor/CHANGELOG.md))
 
 ### Others
+
 * utils: v1.0.0-rc.1-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/utils/CHANGELOG.md))
 
 <a name="1.0.0-rc.10"></a>
@@ -93,7 +117,7 @@
 ### Applications
 
 * docs: v1.0.0-rc.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/docs/CHANGELOG.md))
-* remote: v1.0.0-beta.11 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/remote/CHANGELOG.md))
+* remote: v1.0.0-beta.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/remote/CHANGELOG.md))
 * studio: v1.0.0-beta.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/studio/CHANGELOG.md))
 * website: v1.0.0-rc.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo-website/blob/master/CHANGELOG.md))
 

remote/CHANGELOG.md

@@ -1,3 +1,11 @@
+<a name="1.0.0-beta.2"></a>
+# 1.0.0-beta.2 (2019-09-15)
+
+### Features
+
+* support `play` and `pause` for the youtube and big-img slides
+* update `play` and `pause` if performed in the deck
+
 <a name="1.0.0-beta.1"></a>
 # 1.0.0-beta.1 (2019-08-30)
 

remote/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-app",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.2",
   "author": "David Dal Busco",
   "description": "Present and interact with your lightweight DeckDeckGo's presentation",
   "license": "AGPL-3.0-or-later",
@@ -25,7 +25,7 @@
     "socket.io-client": "^2.2.0"
   },
   "devDependencies": {
-    "@deckdeckgo/types": "^1.0.0-rc.1",
+    "@deckdeckgo/types": "^1.0.0-rc.2",
     "@stencil/core": "^1.3.1",
     "@stencil/postcss": "^1.0.1",
     "@stencil/sass": "^1.0.1",

remote/src/app/pages/app-remote/app-remote.tsx

@@ -10,7 +10,7 @@ import {
     DeckdeckgoEventType,
     DeckdeckgoEventSlides,
     DeckdeckgoEventSlideTo,
-    DeckdeckgoSlideAction, DeckdeckgoSlideDefinition
+    DeckdeckgoSlideAction, DeckdeckgoSlideDefinition, DeckdeckgoEventSlideAction
 } from '@deckdeckgo/types';
 
 // Utils
@@ -45,7 +45,7 @@ export class AppRemote {
 
     @State() drawing: boolean = false;
 
-    @State() youtubeAction: DeckdeckgoSlideAction;
+    @State() action: DeckdeckgoSlideAction;
 
     private acceleratorSubscription: Subscription;
     private acceleratorInitSubscription: Subscription;
@@ -89,6 +89,8 @@ export class AppRemote {
                     await this.slideTo(index, speed);
                 } else if ($event.type === DeckdeckgoEventType.DELETE_SLIDE) {
                     await this.deleteSlide();
+                } else if ($event.type === DeckdeckgoEventType.SLIDE_ACTION) {
+                    this.action = ($event as DeckdeckgoEventSlideAction).action;
                 }
             }
         });
@@ -207,7 +209,7 @@ export class AppRemote {
     private async afterSwipe() {
         await this.setActiveIndex();
 
-        this.youtubeAction = null;
+        this.action = null;
     }
 
     private setActiveIndex(): Promise<void> {
@@ -367,15 +369,15 @@ export class AppRemote {
         });
     }
 
-    private emitYoutubeAction(e: UIEvent) {
+    private emitAction(e: UIEvent) {
         e.stopPropagation();
 
-        this.youtubeAction = this.youtubeAction === DeckdeckgoSlideAction.YOUTUBE_PLAY ? DeckdeckgoSlideAction.YOUTUBE_PAUSE : DeckdeckgoSlideAction.YOUTUBE_PLAY;
+        this.action = this.action === DeckdeckgoSlideAction.PLAY ? DeckdeckgoSlideAction.PAUSE : DeckdeckgoSlideAction.PLAY;
 
         this.communicationService.emit({
             type: DeckdeckgoEventType.SLIDE_ACTION,
             emitter: DeckdeckgoEventEmitter.APP,
-            action: this.youtubeAction
+            action: this.action
         });
     }
 
@@ -636,12 +638,14 @@ export class AppRemote {
     }
 
     private renderExtraActions() {
-        if (this.slides && this.slides[this.slideIndex].name === 'deckgo-slide-youtube'.toUpperCase()) {
+        if (this.slides &&
+            (this.slides[this.slideIndex].name === 'deckgo-slide-youtube'.toUpperCase() ||
+             this.slides[this.slideIndex].name === 'deckgo-slide-big-img'.toUpperCase())) {
 
-            const icon: string = this.youtubeAction === DeckdeckgoSlideAction.YOUTUBE_PLAY ? 'pause' : 'play';
+            const icon: string = this.action === DeckdeckgoSlideAction.PLAY ? 'pause' : 'play';
 
             return (
-                <ion-fab-button color="medium" onClick={(e: UIEvent) => this.emitYoutubeAction(e)}>
+                <ion-fab-button color="medium" onClick={(e: UIEvent) => this.emitAction(e)}>
                     <ion-icon name={icon}></ion-icon>
                 </ion-fab-button>
             )

studio/CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="1.0.0-beta.3-2"></a>
+# 1.0.0-beta.3-2 (2019-09-15)
+
+### Refactoring
+
+* remote event `youtube_pause` renamed to `pause`
+
 <a name="1.0.0-beta.3-1"></a>
 # 1.0.0-beta.3-1 (2019-09-09)
 

studio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deckdeckgo-studio",
-  "version": "1.0.0-beta.3-1",
+  "version": "1.0.0-beta.3-2",
   "author": "David Dal Busco",
   "description": "The web open source editor for presentations",
   "license": "AGPL-3.0-or-later",

studio/src/app/handlers/editor/events/remote/remote-events.handler.tsx

@@ -199,7 +199,7 @@ export class RemoteEventsHandler {
                 return;
             }
 
-            if ($event.detail.action === 'youtube_pause') {
+            if ($event.detail.action === 'pause') {
                 await youtubeSlideElement.pause();
             } else {
                 await youtubeSlideElement.play();

webcomponents/remote/CHANGELOG.md

@@ -1,3 +1,17 @@
+<a name="1.0.0-rc.2"></a>
+# 1.0.0-rc.2 (2019-09-15)
+
+### Features
+
+* add methods to forward play and pause from the deck to the remote app
+
+<a name="1.0.0-rc.1-1"></a>
+# 1.0.0-rc.1-1 (2019-09-15)
+
+### Libs
+
+* update `@deckdeckgo/types` last definition
+
 <a name="1.0.0-rc.1"></a>
 # 1.0.0-rc.1 (2019-08-30)
 

webcomponents/remote/README.md

@@ -150,6 +150,22 @@ This method will delete the current slide in the remote app.
 await deck.deleteSlide();
 ```
 
+### Play
+
+This method will tell the remote app that the play action was performed in the deck.
+
+```
+await deck.play();
+```
+
+### Play
+
+This method will tell the remote app that the pause action was performed in the deck.
+
+```
+await deck.pause();
+```
+
 ## License
 
 MIT © [David Dal Busco](mailto:david.dalbusco@outlook.com) and [Nicolas Mattia](mailto:nicolas@nmattia.com)

webcomponents/remote/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/remote",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "description": "Present and interact with your DeckDeckGo's PWA presentation",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -26,7 +26,7 @@
     "socket.io-client": "^2.2.0"
   },
   "devDependencies": {
-    "@deckdeckgo/types": "^1.0.0-rc.1",
+    "@deckdeckgo/types": "^1.0.0-rc.2",
     "@stencil/core": "^1.3.1",
     "@stencil/postcss": "^1.0.1",
     "@stencil/sass": "^1.0.1",

webcomponents/remote/src/components.d.ts

@@ -24,6 +24,8 @@ export namespace Components {
     'length': number;
     'moveDraw': (leftOffset: number, transitionDuration: string) => Promise<void>;
     'nextSlide': () => Promise<void>;
+    'pause': () => Promise<void>;
+    'play': () => Promise<void>;
     'prevSlide': () => Promise<void>;
     'room': string;
     'server': string;

webcomponents/remote/src/components/deckdeckgo-remote/deckdeckgo-remote.tsx

@@ -9,7 +9,7 @@ import {
   DeckdeckgoEventType,
   DeckdeckgoEventEmitter,
   DeckdeckgoDrawAction,
-  DeckdeckgoSlideDefinition
+  DeckdeckgoSlideDefinition, DeckdeckgoSlideAction
 } from '@deckdeckgo/types';
 
 // Services
@@ -313,6 +313,24 @@ export class DeckdeckgoRemote {
     });
   }
 
+  @Method()
+  async play() {
+    this.communicationService.emit({
+      type: DeckdeckgoEventType.SLIDE_ACTION,
+      emitter: DeckdeckgoEventEmitter.DECK,
+      action: DeckdeckgoSlideAction.PLAY
+    });
+  }
+
+  @Method()
+  async pause() {
+    this.communicationService.emit({
+      type: DeckdeckgoEventType.SLIDE_ACTION,
+      emitter: DeckdeckgoEventEmitter.DECK,
+      action: DeckdeckgoSlideAction.PAUSE
+    });
+  }
+
   private clear(): Promise<void> {
     return new Promise<void>((resolve) => {
       this.ctx.beginPath();

webcomponents/remote/src/services/communication/communication.service.tsx

@@ -3,7 +3,12 @@ import * as io from 'socket.io-client';
 import {BehaviorSubject, Observable, Subject} from 'rxjs';
 
 // Types
-import {DeckdeckgoEvent, DeckdeckgoEventSlides, DeckdeckgoEventSlideTo} from '@deckdeckgo/types';
+import {
+  DeckdeckgoEvent,
+  DeckdeckgoEventSlideAction,
+  DeckdeckgoEventSlides,
+  DeckdeckgoEventSlideTo
+} from '@deckdeckgo/types';
 
 const configuration: RTCConfiguration = {
   iceServers: [
@@ -228,7 +233,7 @@ export class CommunicationService {
     this.event.next(data);
   };
 
-  emit(data: DeckdeckgoEvent | DeckdeckgoEventSlides | DeckdeckgoEventSlideTo) {
+  emit(data: DeckdeckgoEvent | DeckdeckgoEventSlides | DeckdeckgoEventSlideTo | DeckdeckgoEventSlideAction) {
     if (this.dataChannelOut) {
       this.dataChannelOut.send(JSON.stringify(data));
     }

webcomponents/types/CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="1.0.0-rc.2"></a>
+# 1.0.0-rc.2 (2019-09-15)
+
+### Breaking Changes
+
+* slide actions `YOUTUBE_PLAY` and `YOUTUBE_PAUSE` renamed to `PLAY` and `PAUSE`
+
 <a name="1.0.0-rc.1"></a>
 # 1.0.0-rc.1 (2019-08-30)