Add get status button to test embed page

client/package.json

@@ -66,7 +66,6 @@
     "@types/chart.js": "^2.9.37",
     "@types/core-js": "^2.5.2",
     "@types/debug": "^4.1.5",
-    "@types/dompurify": "^3.0.5",
     "@types/jschannel": "^1.0.0",
     "@types/linkifyjs": "^2.1.2",
     "@types/lodash-es": "^4.17.0",

client/src/app/core/renderer/html-renderer.service.ts

@@ -4,7 +4,7 @@ import {
   getDefaultSanitizedSchemes,
   getDefaultSanitizedTags
 } from '@peertube/peertube-core-utils'
-import DOMPurify, { DOMPurifyI } from 'dompurify'
+import DOMPurify, { DOMPurify as DOMPurifyI } from 'dompurify'
 import { LinkifierService } from './linkifier.service'
 
 @Injectable()
@@ -24,7 +24,7 @@ export class HtmlRendererService {
   }
 
   private addHrefHook (dompurifyInstance: DOMPurifyI) {
-    dompurifyInstance.addHook('afterSanitizeAttributes', node => {
+    dompurifyInstance.addHook('afterSanitizeAttributes', (node: HTMLElement) => {
       if ('target' in node) {
         node.setAttribute('target', '_blank')
 
@@ -40,7 +40,7 @@ export class HtmlRendererService {
   private addCheckSchemesHook (dompurifyInstance: DOMPurifyI, schemes: string[]) {
     const regex = new RegExp(`^(${schemes.join('|')}):`, 'im')
 
-    dompurifyInstance.addHook('afterSanitizeAttributes', node => {
+    dompurifyInstance.addHook('afterSanitizeAttributes', (node: HTMLElement) => {
       const anchor = document.createElement('a')
 
       if (node.hasAttribute('href')) {

client/src/standalone/videos/test-embed.html

@@ -29,6 +29,7 @@
         <button onclick="player.setVolume(1)">Unmute</button>
         <button onclick="player.playNextVideo()">Next video</button>
         <button onclick="player.playPreviousVideo()">Previous video</button>
+        <button onclick="getPlayerStatus()">Get status</button>
       </div>
       <br/>
 
@@ -55,6 +56,11 @@
           <div id="volume"></div>
         </fieldset>
 
+        <fieldset>
+          <legend>Status</legend>
+          <div id="player-status"></div>
+        </fieldset>
+
         <fieldset>
           <legend>Playlist position</legend>
           <div id="playlist-position"></div>

client/src/standalone/videos/test-embed.ts

@@ -157,5 +157,18 @@ window.addEventListener('load', async () => {
   }
 
   player.getVolume().then(volume => updateVolume(volume))
-  player.addEventListener('volumeChange', volume => updateVolume(volume))
+  player.addEventListener('volumeChange', volume => updateVolume(volume));
+
+  (window as any).getPlayerStatus = async () => {
+    try {
+      const currentTime = await player.getCurrentTime()
+      const currentStatus = await player.isPlaying()
+        ? 'playing'
+        : 'not playing'
+
+      document.querySelector('#player-status').textContent = currentStatus + ': ' + currentTime + 's'
+    } catch (err) {
+      console.error('Cannot get player status', err)
+    }
+  }
 })

client/yarn.lock

@@ -2723,13 +2723,6 @@
   dependencies:
     "@types/ms" "*"
 
-"@types/dompurify@^3.0.5":
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-3.2.0.tgz#56610bf3e4250df57744d61fbd95422e07dfb840"
-  integrity sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==
-  dependencies:
-    dompurify "*"
-
 "@types/estree@1.0.5":
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
@@ -5299,7 +5292,7 @@ domhandler@^5.0.2, domhandler@^5.0.3:
   dependencies:
     domelementtype "^2.3.0"
 
-dompurify@*, dompurify@^3.1.6:
+dompurify@^3.1.6:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-3.2.1.tgz#d480972aeb1a59eb8ac47cba95558fbd72a0127b"
   integrity sha512-NBHEsc0/kzRYQd+AY6HR6B/IgsqzBABrqJbpCDQII/OK6h7B7LXzweZTDsqSW2LkTRpoxf18YUP+YjGySk6B3w==