]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/src/standalone/videos/embed.ts
Add ability to hide plugin settings
[github/Chocobozzz/PeerTube.git] / client / src / standalone / videos / embed.ts
index 1dca84f72c1d53e6230e11536210e0973258a270..103014bb08dd3c7c23bd58c6a88e79da405fc2c0 100644 (file)
@@ -1,7 +1,5 @@
 import './embed.scss'
 import videojs from 'video.js'
-import { objectToUrlEncoded, peertubeLocalStorage } from '@root-helpers/index'
-import { Tokens } from '@root-helpers/users'
 import { peertubeTranslate } from '../../../../shared/core-utils/i18n'
 import {
   ResultList,
@@ -11,12 +9,20 @@ import {
   VideoDetails,
   VideoPlaylist,
   VideoPlaylistElement,
-  VideoStreamingPlaylistType
+  VideoStreamingPlaylistType,
+  PluginType,
+  ClientHookName
 } from '../../../../shared/models'
+import { HttpStatusCode } from '../../../../shared/core-utils/miscs/http-error-codes'
 import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../assets/player/peertube-player-manager'
 import { VideoJSCaption } from '../../assets/player/peertube-videojs-typings'
 import { TranslationsManager } from '../../assets/player/translations-manager'
+import { Hooks, loadPlugin, runHook } from '../../root-helpers/plugins'
+import { Tokens } from '../../root-helpers/users'
+import { peertubeLocalStorage } from '../../root-helpers/peertube-web-storage'
+import { objectToUrlEncoded } from '../../root-helpers/utils'
 import { PeerTubeEmbedApi } from './embed-api'
+import { RegisterClientHelpers } from '../../types/register-client-option.model'
 
 type Translations = { [ id: string ]: string }
 
@@ -60,6 +66,9 @@ export class PeerTubeEmbed {
 
   private wrapperElement: HTMLElement
 
+  private peertubeHooks: Hooks = {}
+  private loadedScripts = new Set<string>()
+
   static async main () {
     const videoContainerId = 'video-wrapper'
     const embed = new PeerTubeEmbed(videoContainerId)
@@ -77,12 +86,9 @@ export class PeerTubeEmbed {
   refreshFetch (url: string, options?: RequestInit) {
     return fetch(url, options)
       .then((res: Response) => {
-        if (res.status !== 401) return res
-
-        // 401 unauthorized is not catch-ed, but then-ed
-        const error = res
+        if (res.status !== HttpStatusCode.UNAUTHORIZED_401) return res
 
-        const refreshingTokenPromise = new Promise((resolve, reject) => {
+        const refreshingTokenPromise = new Promise<void>((resolve, reject) => {
           const clientId: string = peertubeLocalStorage.getItem(this.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_ID)
           const clientSecret: string = peertubeLocalStorage.getItem(this.LOCAL_STORAGE_OAUTH_CLIENT_KEYS.CLIENT_SECRET)
 
@@ -101,24 +107,36 @@ export class PeerTubeEmbed {
             headers,
             method: 'POST',
             body: objectToUrlEncoded(data)
-          }).then(res => res.json())
-            .then((obj: UserRefreshToken) => {
-              this.userTokens.accessToken = obj.access_token
-              this.userTokens.refreshToken = obj.refresh_token
-              this.userTokens.save()
-
-              this.setHeadersFromTokens()
-
-              resolve()
-            })
-            .catch((refreshTokenError: any) => {
-              reject(refreshTokenError)
-            })
+          }).then(res => {
+            if (res.status === HttpStatusCode.UNAUTHORIZED_401) return undefined
+
+            return res.json()
+          }).then((obj: UserRefreshToken & { code: 'invalid_grant'}) => {
+            if (!obj || obj.code === 'invalid_grant') {
+              Tokens.flush()
+              this.removeTokensFromHeaders()
+
+              return resolve()
+            }
+
+            this.userTokens.accessToken = obj.access_token
+            this.userTokens.refreshToken = obj.refresh_token
+            this.userTokens.save()
+
+            this.setHeadersFromTokens()
+
+            resolve()
+          }).catch((refreshTokenError: any) => {
+            reject(refreshTokenError)
+          })
         })
 
         return refreshingTokenPromise
-          .catch(() => this.removeTokensFromHeaders())
-          .then(() => fetch(url, {
+          .catch(() => {
+            Tokens.flush()
+
+            this.removeTokensFromHeaders()
+          }).then(() => fetch(url, {
             ...options,
             headers: this.headers
           }))
@@ -321,7 +339,7 @@ export class PeerTubeEmbed {
 
     try {
       playlistResponse = await playlistPromise
-      isResponseOk = true
+      isResponseOk = playlistResponse.status === HttpStatusCode.OK_200
     } catch (err) {
       console.error(err)
       isResponseOk = false
@@ -330,7 +348,7 @@ export class PeerTubeEmbed {
     if (!isResponseOk) {
       const serverTranslations = await this.translationsPromise
 
-      if (playlistResponse?.status === 404) {
+      if (playlistResponse?.status === HttpStatusCode.NOT_FOUND_404) {
         this.playlistNotFound(serverTranslations)
         return undefined
       }
@@ -350,7 +368,7 @@ export class PeerTubeEmbed {
 
     try {
       videoResponse = await videoPromise
-      isResponseOk = true
+      isResponseOk = videoResponse.status === HttpStatusCode.OK_200
     } catch (err) {
       console.error(err)
 
@@ -360,7 +378,7 @@ export class PeerTubeEmbed {
     if (!isResponseOk) {
       const serverTranslations = await this.translationsPromise
 
-      if (videoResponse?.status === 404) {
+      if (videoResponse?.status === HttpStatusCode.NOT_FOUND_404) {
         this.videoNotFound(serverTranslations)
         return undefined
       }
@@ -463,6 +481,8 @@ export class PeerTubeEmbed {
       this.PeertubePlayerManagerModulePromise
     ])
 
+    await this.ensurePluginsAreLoaded(config, serverTranslations)
+
     const videoInfo: VideoDetails = videoInfoTmp
 
     const PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
@@ -511,6 +531,9 @@ export class PeerTubeEmbed {
         videoCaptions,
         inactivityTimeout: 2500,
         videoViewUrl: this.getVideoUrl(videoInfo.uuid) + '/views',
+        videoUUID: videoInfo.uuid,
+
+        isLive: videoInfo.isLive,
 
         playerElement: this.playerElement,
         onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
@@ -523,7 +546,8 @@ export class PeerTubeEmbed {
 
         serverUrl: window.location.origin,
         language: navigator.language,
-        embedUrl: window.location.origin + videoInfo.embedPath
+        embedUrl: window.location.origin + videoInfo.embedPath,
+        embedTitle: videoInfo.name
       },
 
       webtorrent: {
@@ -567,6 +591,8 @@ export class PeerTubeEmbed {
         this.playNextVideo()
       })
     }
+
+    this.runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video: videoInfo })
   }
 
   private async initCore () {
@@ -639,10 +665,12 @@ export class PeerTubeEmbed {
       ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
       : undefined
 
-    this.player.dock({
-      title,
-      description
-    })
+    if (title || description) {
+      this.player.dock({
+        title,
+        description
+      })
+    }
   }
 
   private buildCSS () {
@@ -704,6 +732,76 @@ export class PeerTubeEmbed {
   private isPlaylistEmbed () {
     return window.location.pathname.split('/')[1] === 'video-playlists'
   }
+
+  private async ensurePluginsAreLoaded (config: ServerConfig, translations?: { [ id: string ]: string }) {
+    if (config.plugin.registered.length === 0) return
+
+    for (const plugin of config.plugin.registered) {
+      for (const key of Object.keys(plugin.clientScripts)) {
+        const clientScript = plugin.clientScripts[key]
+
+        if (clientScript.scopes.includes('embed') === false) continue
+
+        const script = `/plugins/${plugin.name}/${plugin.version}/client-scripts/${clientScript.script}`
+
+        if (this.loadedScripts.has(script)) continue
+
+        const pluginInfo = {
+          plugin,
+          clientScript: {
+            script,
+            scopes: clientScript.scopes
+          },
+          pluginType: PluginType.PLUGIN,
+          isTheme: false
+        }
+
+        await loadPlugin({
+          hooks: this.peertubeHooks,
+          pluginInfo,
+          onSettingsScripts: () => undefined,
+          peertubeHelpersFactory: _ => this.buildPeerTubeHelpers(translations)
+        })
+      }
+    }
+  }
+
+  private buildPeerTubeHelpers (translations?: { [ id: string ]: string }): RegisterClientHelpers {
+    function unimplemented (): any {
+      throw new Error('This helper is not implemented in embed.')
+    }
+
+    return {
+      getBaseStaticRoute: unimplemented,
+
+      getSettings: unimplemented,
+
+      isLoggedIn: unimplemented,
+
+      notifier: {
+        info: unimplemented,
+        error: unimplemented,
+        success: unimplemented
+      },
+
+      showModal: unimplemented,
+
+      getServerConfig: unimplemented,
+
+      markdownRenderer: {
+        textMarkdownToHTML: unimplemented,
+        enhancedMarkdownToHTML: unimplemented
+      },
+
+      translate: (value: string) => {
+        return Promise.resolve(peertubeTranslate(value, translations))
+      }
+    }
+  }
+
+  private runHook <T> (hookName: ClientHookName, result?: T, params?: any): Promise<T> {
+    return runHook(this.peertubeHooks, hookName, result, params)
+  }
 }
 
 PeerTubeEmbed.main()