QR Code (#802)

Adding QR-Code to the Share modal.

fixes #683

3 files changed, 12 insertions, 1 deletions

diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.html b/client/src/app/videos/+video-watch/modal/video-share.component.html
index 26ab5144a..74a3a57d4 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.html
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.html
@@ -36,6 +36,11 @@
           The url is not secured (no HTTPS), so the embed video won't work on HTTPS websites (web browsers block non secured HTTP requests on HTTPS websites).
         </div>
 
+        <div class="form-group qr-code-group">
+          <label i18n>QR-Code</label>
+          <ngx-qrcode qrc-element-type="url" [qrc-value]="getVideoUrl()" qrc-errorCorrectionLevel="Q"></ngx-qrcode>
+        </div>
+
         <div class="form-group inputs">
           <span i18n class="action-button action-button-cancel" (click)="hide()">
             Cancel
diff --git a/client/src/app/videos/+video-watch/modal/video-share.component.scss b/client/src/app/videos/+video-watch/modal/video-share.component.scss
index 184e09027..c7f30bec5 100644
--- a/client/src/app/videos/+video-watch/modal/video-share.component.scss
+++ b/client/src/app/videos/+video-watch/modal/video-share.component.scss
@@ -1,3 +1,7 @@
 .action-button-cancel {
   margin-right: 0 !important;
 }
+
+.qr-code-group {
+  text-align: center;
+}
diff --git a/client/src/app/videos/+video-watch/video-watch.module.ts b/client/src/app/videos/+video-watch/video-watch.module.ts
index 63128926e..4af993043 100644
--- a/client/src/app/videos/+video-watch/video-watch.module.ts
+++ b/client/src/app/videos/+video-watch/video-watch.module.ts
@@ -16,13 +16,15 @@ import { VideoShareComponent } from './modal/video-share.component'
 import { VideoWatchRoutingModule } from './video-watch-routing.module'
 
 import { VideoWatchComponent } from './video-watch.component'
+import { NgxQRCodeModule } from 'ngx-qrcode2'
 
 @NgModule({
   imports: [
     VideoWatchRoutingModule,
     SharedModule,
     ClipboardModule,
-    TooltipModule.forRoot()
+    TooltipModule.forRoot(),
+    NgxQRCodeModule
   ],
 
   declarations: [