4 files changed, 78 insertions, 19 deletions

diff --git a/client/src/app/shared/shared-share-modal/video-share.component.html b/client/src/app/shared/shared-share-modal/video-share.component.html
index f4d249b41..01d351783 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.html
+++ b/client/src/app/shared/shared-share-modal/video-share.component.html
@@ -72,13 +72,21 @@
           ></my-peertube-checkbox>
         </div>
 
-        <div class="form-group">
-          <my-peertube-checkbox
-            *ngIf="isInPlaylistEmbedTab()"
-            inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
-            i18n-labelText labelText="Only display embed URL"
-          ></my-peertube-checkbox>
-        </div>
+        <ng-container *ngIf="isInPlaylistEmbedTab()">
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
+              i18n-labelText labelText="Only display embed URL"
+            ></my-peertube-checkbox>
+          </div>
+
+          <div class="form-group">
+            <my-peertube-checkbox
+              inputName="responsive" [(ngModel)]="customizations.responsive"
+              i18n-labelText labelText="Responsive embed"
+            ></my-peertube-checkbox>
+          </div>
+        </ng-container>
 
         <my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder>
       </div>
@@ -230,6 +238,13 @@
           <ng-container *ngIf="isInVideoEmbedTab()">
             <div class="form-group">
               <my-peertube-checkbox
+                inputName="responsive" [(ngModel)]="customizations.responsive"
+                i18n-labelText labelText="Responsive embed"
+              ></my-peertube-checkbox>
+            </div>
+
+            <div class="form-group">
+              <my-peertube-checkbox
                 inputName="title" [(ngModel)]="customizations.title"
                 i18n-labelText labelText="Display video title"
               ></my-peertube-checkbox>
diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts
index e1db4a3b8..43229c330 100644
--- a/client/src/app/shared/shared-share-modal/video-share.component.ts
+++ b/client/src/app/shared/shared-share-modal/video-share.component.ts
@@ -29,6 +29,7 @@ type Customizations = {
   warningTitle: boolean
   controlBar: boolean
   peertubeLink: boolean
+  responsive: boolean
 
   includeVideoInPlaylist: boolean
 }
@@ -100,6 +101,7 @@ export class VideoShareComponent {
       warningTitle: true,
       controlBar: true,
       peertubeLink: true,
+      responsive: false,
 
       includeVideoInPlaylist: false
     }, {
@@ -152,10 +154,11 @@ export class VideoShareComponent {
     )
   }
 
-  async getVideoIframeCode () {
+  async getVideoEmbedCode (options: { responsive: boolean }) {
+    const { responsive } = options
     return this.hooks.wrapFun(
       buildVideoOrPlaylistEmbed,
-      { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name },
+      { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive },
       'video-watch',
       'filter:share.video-embed-code.build.params',
       'filter:share.video-embed-code.build.result'
@@ -186,10 +189,11 @@ export class VideoShareComponent {
     )
   }
 
-  async getPlaylistEmbedCode () {
+  async getPlaylistEmbedCode (options: { responsive: boolean }) {
+    const { responsive } = options
     return this.hooks.wrapFun(
       buildVideoOrPlaylistEmbed,
-      { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName },
+      { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName, responsive },
       'video-watch',
       'filter:share.video-playlist-embed-code.build.params',
       'filter:share.video-playlist-embed-code.build.result'
@@ -204,15 +208,15 @@ export class VideoShareComponent {
     if (this.playlist) {
       this.playlistUrl = await this.getPlaylistUrl()
       this.playlistEmbedUrl = await this.getPlaylistEmbedUrl()
-      this.playlistEmbedHTML = await this.getPlaylistEmbedCode()
-      this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.playlistEmbedHTML)
+      this.playlistEmbedHTML = await this.getPlaylistEmbedCode({ responsive: this.customizations.responsive })
+      this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getPlaylistEmbedCode({ responsive: false }))
     }
 
     if (this.video) {
       this.videoUrl = await this.getVideoUrl()
       this.videoEmbedUrl = await this.getVideoEmbedUrl()
-      this.videoEmbedHTML = await this.getVideoIframeCode()
-      this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.videoEmbedHTML)
+      this.videoEmbedHTML = await this.getVideoEmbedCode({ responsive: this.customizations.responsive })
+      this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getVideoEmbedCode({ responsive: false }))
     }
   }
 
diff --git a/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts b/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
index f5b4b3919..2742b21a1 100644
--- a/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
+++ b/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
@@ -218,12 +218,37 @@ class PeerTubeHotkeysPlugin extends Plugin {
   }
 
   private isNaked (event: KeyboardEvent, key: string) {
-    return (!event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey && event.key === key)
+    if (key.length === 1) key = key.toUpperCase()
+
+    return (!event.ctrlKey && !event.altKey && !event.metaKey && !event.shiftKey && this.getLatinKey(event.key, event.code) === key)
   }
 
   private isNakedOrShift (event: KeyboardEvent, key: string) {
     return (!event.ctrlKey && !event.altKey && !event.metaKey && event.key === key)
   }
+
+  // Thanks Maciej Krawczyk
+  // https://stackoverflow.com/questions/70211837/keyboard-shortcuts-commands-on-non-latin-alphabet-keyboards-javascript?rq=1
+  private getLatinKey (key: string, code: string) {
+    if (key.length !== 1) {
+      return key
+    }
+
+    const capitalHetaCode = 880
+    const isNonLatin = key.charCodeAt(0) >= capitalHetaCode
+
+    if (isNonLatin) {
+      if (code.indexOf('Key') === 0 && code.length === 4) { // i.e. 'KeyW'
+        return code.charAt(3)
+      }
+
+      if (code.indexOf('Digit') === 0 && code.length === 6) { // i.e. 'Digit7'
+        return code.charAt(5)
+      }
+    }
+
+    return key.toUpperCase()
+  }
 }
 
 videojs.registerPlugin('peerTubeHotkeysPlugin', PeerTubeHotkeysPlugin)
diff --git a/client/src/root-helpers/video.ts b/client/src/root-helpers/video.ts
index 107ba1eba..01feddbdc 100644
--- a/client/src/root-helpers/video.ts
+++ b/client/src/root-helpers/video.ts
@@ -3,19 +3,34 @@ import { HTMLServerConfig, Video, VideoPrivacy } from '@shared/models'
 function buildVideoOrPlaylistEmbed (options: {
   embedUrl: string
   embedTitle: string
+  responsive?: boolean
 }) {
-  const { embedUrl, embedTitle } = options
+  const { embedUrl, embedTitle, responsive = false } = options
 
   const iframe = document.createElement('iframe')
 
   iframe.title = embedTitle
-  iframe.width = '560'
-  iframe.height = '315'
+  iframe.width = responsive ? '100%' : '560'
+  iframe.height = responsive ? '100%' : '315'
   iframe.src = embedUrl
   iframe.frameBorder = '0'
   iframe.allowFullscreen = true
   iframe.sandbox.add('allow-same-origin', 'allow-scripts', 'allow-popups')
 
+  if (responsive) {
+    const wrapper = document.createElement('div')
+
+    wrapper.style.position = 'relative'
+    wrapper.style['padding-top'] = '56.25%'
+
+    iframe.style.position = 'absolute'
+    iframe.style.inset = '0'
+
+    wrapper.appendChild(iframe)
+
+    return wrapper.outerHTML
+  }
+
   return iframe.outerHTML
 }