React input change (#77)

* React to input change * React * Only pass single parameter * Fix project * temp commit * Resolve some problems * Fixed some stuff * Fixed issue * Dockerfile * Fix tests
MintPlayer · Jul 31, 2024 · 675f34c · 675f34c
1 parent 1c45f7e
commit 675f34c
Show file tree

Hide file tree

Showing 47 changed files with 624 additions and 159 deletions.
diff --git a/.github/workflows/publish-master.yml b/.github/workflows/publish-master.yml
@@ -400,8 +400,9 @@ jobs:
         github-token: ${{ github.token }}
         images: ghcr.io/${{ github.repository }}
 
+    ## Angular app
     - name: Publish to Github Container Registry
-      id: push-ghcr
+      id: push-ghcr-angular
       uses: docker/build-push-action@v6
       with:
         context: .
@@ -413,12 +414,36 @@ jobs:
     - name: Generate artifact attestation
       uses: actions/attest-build-provenance@v1
       with:
-        subject-name: ghcr.io/${{ github.repository }}
-        subject-digest: ${{ steps.push-ghcr.outputs.digest }}
+        subject-name: ghcr.io/${{ github.repository }}-angular
+        subject-digest: ${{ steps.push-ghcr-angular.outputs.digest }}
         push-to-registry: true
 
     - name: Trigger deploy hook
       uses: fjogeleit/http-request-action@v1
       with:
-        url: ${{ secrets.SLIPLANE_DEPLOY_HOOK }}
+        url: ${{ secrets.SLIPLANE_ANGULAR_DEPLOY_HOOK }}
+        method: GET
+
+    ## React app
+    - name: Publish to Github Container Registry
+      id: push-ghcr-react
+      uses: docker/build-push-action@v6
+      with:
+        context: .
+        file: ./apps/react-demo/Dockerfile
+        push: true
+        tags: ${{ steps.meta-ghcr.outputs.tags }}
+        labels: ${{ steps.meta-ghcr.outputs.labels }}
+
+    - name: Generate artifact attestation
+      uses: actions/attest-build-provenance@v1
+      with:
+        subject-name: ghcr.io/${{ github.repository }}-react
+        subject-digest: ${{ steps.push-ghcr-react.outputs.digest }}
+        push-to-registry: true
+
+    - name: Trigger deploy hook
+      uses: fjogeleit/http-request-action@v1
+      with:
+        url: ${{ secrets.SLIPLANE_REACT_DEPLOY_HOOK }}
         method: GET
diff --git a/apps/angular-demo/Dockerfile b/apps/angular-demo/Dockerfile
@@ -7,7 +7,7 @@ FROM node:latest as node_image
 WORKDIR /usr/local/app
 
 # Add the source code to app
-COPY . /usr/local/app/
+COPY ../.. /usr/local/app/
 
 # Install all the dependencies
 RUN npm install
@@ -24,7 +24,7 @@ LABEL org.opencontainers.image.source="https://github.com/MintPlayer/mintplayer-
 
 # Copy the build output to replace the default nginx contents.
 COPY --from=node_image /usr/local/app/dist/apps/angular-demo/browser /usr/share/nginx/html
-COPY --from=node_image /usr/local/app/dist/apps/angular-demo/browser/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=node_image /usr/local/app/nginx.conf /etc/nginx/conf.d/default.conf
 
 # Expose port 80
 EXPOSE 80

diff --git a/apps/angular-demo/project.json b/apps/angular-demo/project.json
@@ -19,7 +19,6 @@
           "apps/angular-demo/src/favicon.ico",
           "apps/angular-demo/src/assets",
           "apps/angular-demo/src/web.config",
-          "apps/angular-demo/src/nginx.conf",
           {
             "glob": "*.woff|*.woff2",
             "input": "node_modules/bootstrap-icons/font/fonts",

diff --git a/apps/react-demo/.swcrc b/apps/react-demo/.swcrc
@@ -0,0 +1,5 @@
+{
+  "jsc": {
+    "target": "es2020"
+  }
+}
diff --git a/apps/react-demo/Dockerfile b/apps/react-demo/Dockerfile
@@ -0,0 +1,34 @@
+# Stage 1: Compile and Build angular codebase
+
+# Use official node image as the base image
+FROM node:latest as node_image
+
+# Set the working directory
+WORKDIR /usr/local/app
+
+# Add the source code to app
+COPY ../.. /usr/local/app/
+
+# Install all the dependencies
+RUN npm install
+
+# Generate the build of the application
+RUN npx nx run react-demo:build:production
+
+
+# Stage 2: Serve app with nginx server
+
+# Use official nginx image as the base image
+FROM nginx:latest
+LABEL org.opencontainers.image.source="https://github.com/MintPlayer/mintplayer-ng-video-player"
+
+# Copy the build output to replace the default nginx contents.
+COPY --from=node_image /usr/local/app/dist/apps/react-demo /usr/share/nginx/html
+COPY --from=node_image /usr/local/app/nginx.conf /etc/nginx/conf.d/default.conf
+
+# Expose port 80
+EXPOSE 80
+
+# docker build --tag 'ng-bootstrap-demo' .
+# docker run -p 4201:80 ng-bootstrap-demo
+# Visit http://localhost:4201
diff --git a/apps/react-demo/src/app/app.spec.tsx b/apps/react-demo/src/app/app.spec.tsx
@@ -20,6 +20,7 @@ describe('App', () => {
         <App />
       </BrowserRouter>
     );
-    expect(getByText(/react-demo/i)).toBeTruthy();
+
+    expect(getByText(/@mintplayer\/r\-video\-player/i)).toBeTruthy();
   });
 });
diff --git a/apps/react-demo/src/app/app.tsx b/apps/react-demo/src/app/app.tsx
@@ -1,14 +1,99 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+import 'bootstrap/dist/css/bootstrap.min.css';
 import styles from './app.module.scss';
 
 import { RVideoPlayer } from '@mintplayer/r-video-player';
+import { useRef, useState } from 'react';
+import { Button, ButtonGroup, Col, Container, ListGroup, ListGroupItem, Row } from 'react-bootstrap';
+import Form from 'react-bootstrap/Form';
 
 import { Route, Routes, Link } from 'react-router-dom';
+import { EPlayerState } from '@mintplayer/player-provider';
 
 export function App() {
+  const urlState = useState<string | undefined>();
+  const volumeState = useState<number>(0);
+  const muteState = useState<boolean>(false);
+  const muteRef = useRef<HTMLInputElement>(null);
+  const playerStateState = useState<EPlayerState>(EPlayerState.unstarted);
+
+  const [url, setUrl] = urlState;
+  const [volume, setVolume] = volumeState;
+  const [mute, setMute] = muteState;
+  const [playerState, setPlayerState] = playerStateState;
+  const videos = [
+    'https://www.youtube.com/watch?v=tt2k8PGm-TI',
+    'https://www.youtube.com/watch?v=YykjpeuMNEk',
+    'https://www.youtube.com/watch?v=yFKhgF_vkgs',
+    'https://www.youtube.com/live/gCNeDWCI0vo?app=desktop&feature=share',
+    'https://www.dailymotion.com/video/x2yhuhb',
+    'https://www.dailymotion.com/video/x20zq3f',
+    'https://vimeo.com/14190306',
+    'https://vimeo.com/82932655',
+    'https://soundcloud.com/dario-g/sunchyme-radio-edit',
+    'https://soundcloud.com/oasisofficial/whatever',
+    'https://open.spotify.com/episode/7makk4oTQel546B0PZlDM5',
+    'spotify:track:0FDzzruyVECATHXKHFs9eJ',
+    'https://www.twitch.tv/jankos',
+    'https://www.twitch.tv/dearlola1',
+    'https://www.twitch.tv/videos/1920198035',
+    'https://www.mixcloud.com/TheChilloutTent/the-chill-out-tent-warriors-of-the-dystotheque',
+    'https://www.mixcloud.com/gaby-songs/chillout-your-mind-vol32',
+    'https://www.mixcloud.com/radiomonaco/good-vibes-djm4t-29092023',
+    'https://www.facebook.com/MetaCanada/videos/801193189918934',
+    'https://www.facebook.com/iShareitHD/videos/1269681903839169',
+    'https://www.facebook.com/watch/?v=379257177188135',
+    'https://video.vidyard.com/watch/6eK8VUFScWLqX2PqgF5S44?',
+    'https://video.vidyard.com/watch/TKMKV6sdGhz3Fz5vgAAAw9?',
+    'https://home.wistia.com/medias/e4a27b971d',
+    'https://home.wistia.com/medias/29b0fbf547',
+    'https://streamable.com/moo',
+    'https://streamable.com/ifjh',
+  ];
+
   return (
-    <div>
-      <RVideoPlayer title="react-demo" />
+    <>
+      <h1 className='text-center'>@mintplayer/r-video-player</h1>
+      <Container>
+        <Row className='mb-3'>
+          <Col lg="6">
+            <ListGroup className='mb-3'>
+              {videos.map(video => <ListGroupItem key={video} onClick={() => setUrl(video)} className='cursor-pointer overflow-hidden text-truncate truncate-start'>{video}</ListGroupItem>)}
+            </ListGroup>
+          </Col>
+          <Col lg="6" className='text-center'>
+            <div className='d-block text-center'>
+              <RVideoPlayer url={url} volumeState={volumeState} muteState={muteState} playerStateState={playerStateState} />
+              <Row>
+                <Col md="6" className='text-center'>
+                </Col>
+                <Col md="6" className='text-center'>
+                  {
+                    (playerState !== EPlayerState.playing)
+                    ? <Button variant='secondary' onClick={() => setPlayerState(EPlayerState.playing)}>Play</Button>
+                    : <Button variant='secondary' onClick={() => setPlayerState(EPlayerState.paused)}>Pause</Button>
+                  }
+                </Col>
+              </Row>
+              <Row>
+                <Col md="6" className='text-center'>
+                  <label>
+                    <label>{ volume }</label>
+                    <Form.Range value={volume} onChange={(ev) => setVolume(parseFloat(ev.currentTarget.value))} min="0" max="100" />
+                  </label>
+                </Col>
+                <Col md="6" className='text-center'>
+                  <Form.Check type='checkbox' label='Mute' ref={muteRef} checked={mute} onChange={ev => setMute(ev.currentTarget.checked)} />
+                </Col>
+              </Row>
+            </div>
+          </Col>
+        </Row>
+      </Container>
+      <ButtonGroup>
+        {/* <Button onClick={incrementVolume} variant="primary">Increment Volume</Button>
+        <Button onClick={incrementLikes} variant="primary">Increment Likes</Button> */}
+      </ButtonGroup>
 
       {/* START: routes */}
       {/* These routes and navigation have been generated for you */}
@@ -46,7 +131,7 @@ export function App() {
         />
       </Routes>
       {/* END: routes */}
-    </div>
+    </>
   );
 }
 

diff --git a/apps/react-demo/src/styles.scss b/apps/react-demo/src/styles.scss
@@ -1 +1,4 @@
 /* You can add global styles to this file, and also import other style files */
+.cursor-pointer {
+    cursor: pointer;
+}
diff --git a/apps/react-demo/tsconfig.app.json b/apps/react-demo/tsconfig.app.json
@@ -2,11 +2,34 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
+    "target": "ES2022",
     "types": [
       "node",
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts",
-      "vite/client"
+      "cssmodule", /* from @nx/react/typings */
+      "image", /* from @nx/react/typings */
+      "client", /* from vite */
+      "youtube",
+      "dailymotion",
+      "vimeo",
+      "soundcloud",
+      "twitch",
+      "facebook",
+      "vidyard",
+      "wistia",
+      "playerjs"
+    ],
+    "typeRoots": [
+      "../../libs/platforms/dailymotion-player/types",
+      "../../libs/platforms/soundcloud-player/types",
+      "../../libs/platforms/twitch-player/types",
+      "../../libs/platforms/vimeo-player/types",
+      "../../libs/platforms/facebook-player/types",
+      "../../libs/platforms/vidyard-player/types",
+      "../../libs/platforms/wistia-player/types",
+      "../../libs/platforms/streamable-player/types",
+      "../../node_modules/vite",
+      "../../node_modules/@nx/react/typings",
+      "../../node_modules/@types",
     ]
   },
   "exclude": [

diff --git a/libs/frameworks/ng-video-player/src/lib/components/video-player/video-player.component.ts b/libs/frameworks/ng-video-player/src/lib/components/video-player/video-player.component.ts
@@ -1,13 +1,13 @@
 import { AfterViewInit, Component, DestroyRef, ElementRef, EventEmitter, Inject, InjectionToken, Input, ModuleWithProviders, NgZone, OnDestroy, Output, StaticProvider, Type, ViewChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { PlayerProgress } from '@mintplayer/player-progress';
-import { ApiLoader, ECapability, EPlayerState, IApiService } from '@mintplayer/player-provider';
+import { ApiPlugin, ECapability, EPlayerState, IApiService } from '@mintplayer/player-provider';
 import { VideoPlayer, fromVideoEvent } from "@mintplayer/video-player";
 import { BehaviorSubject, combineLatest, filter, take } from 'rxjs';
 
 const VIDEO_APIS = new InjectionToken<IApiService>('VideoApis');
 
-export function provideVideoApis(...platforms: ApiLoader[]): StaticProvider {
+export function provideVideoApis(...platforms: ApiPlugin[]): StaticProvider {
   return {
     provide: VIDEO_APIS,
     useFactory: () => Promise.all(platforms.map(loader => loader())),
@@ -31,19 +31,19 @@ export class VideoPlayerComponent implements AfterViewInit, OnDestroy {
 
     const player = new VideoPlayer();
     fromVideoEvent(player, 'stateChange').pipe(takeUntilDestroyed(this.destroy))
-      .subscribe(([state]) => this.zoneEmit(this.playerStateChange, state));
+      .subscribe((state) => this.zoneEmit(this.playerStateChange, state));
     fromVideoEvent(player, 'isPipChange').pipe(takeUntilDestroyed(this.destroy))
-      .subscribe(([isPip]) => this.zoneEmit(this.isPipChange, isPip));
+      .subscribe((isPip) => this.zoneEmit(this.isPipChange, isPip));
     fromVideoEvent(player, 'isFullscreenChange').pipe(takeUntilDestroyed(this.destroy))
-      .subscribe(([isFullscreen]) => this.zoneEmit(this.isFullscreenChange, isFullscreen));
+      .subscribe((isFullscreen) => this.zoneEmit(this.isFullscreenChange, isFullscreen));
     fromVideoEvent(player, 'muteChange').pipe(takeUntilDestroyed(this.destroy))
-      .subscribe(([mute]) => this.zoneEmit(this.muteChange, mute));
+      .subscribe((mute) => this.zoneEmit(this.muteChange, mute));
     fromVideoEvent(player, 'volumeChange').pipe(takeUntilDestroyed(this.destroy))
-      .subscribe(([volume]) => this.zoneEmit(this.volumeChange, volume));
+      .subscribe((volume) => this.zoneEmit(this.volumeChange, volume));
     fromVideoEvent(player, 'capabilitiesChange').pipe(takeUntilDestroyed(this.destroy))
-      .subscribe(([capabilities]) => this.zoneEmit(this.capabilitiesChange, capabilities));
+      .subscribe((capabilities) => this.zoneEmit(this.capabilitiesChange, capabilities));
     fromVideoEvent(player, 'progressChange').pipe(takeUntilDestroyed(this.destroy))
-      .subscribe(([progress]) => this.zoneEmit(this.progressChange, progress));
+      .subscribe((progress) => this.zoneEmit(this.progressChange, progress));
     this.player$ = new BehaviorSubject<VideoPlayer>(player);
 
     combineLatest([this.url$, this.player$])

diff --git a/libs/frameworks/r-video-player/src/lib/r-video-player.module.scss b/libs/frameworks/r-video-player/src/lib/r-video-player.module.scss
@@ -4,4 +4,4 @@
  * e.g.
  * .container {
  * }
-*/
+*/
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,4 +4,4 @@ @@
      * e.g.
      * .container {
      * }
-    */
+    */