Enh #106 : Add an autoPlayVideo user attribute (#159)

Warning : I was not able to run the tests on my machine. It uses a different approach to handle databse connexion and didn't find where to configure it...

- create a migration file to add a boolean column in user table
- add autoPlayVideo attribute everywhere it is needed (both on client and server side)
- add tests
- add a way to configure this attribute in account-settings
- use the attribute in video-watch component to actually autoplay or not the video

7 files changed, 30 insertions, 7 deletions

diff --git a/client/src/app/account/account-settings/account-details/account-details.component.html b/client/src/app/account/account-settings/account-details/account-details.component.html
index bc18b39b4..593b87e29 100644
--- a/client/src/app/account/account-settings/account-details/account-details.component.html
+++ b/client/src/app/account/account-settings/account-details/account-details.component.html
@@ -9,6 +9,12 @@
   <div *ngIf="formErrors['displayNSFW']" class="alert alert-danger">
     {{ formErrors['displayNSFW'] }}
   </div>
+  <br/>
+  <input
+    type="checkbox" id="autoPlayVideo"
+    formControlName="autoPlayVideo"
+  >
+  <label for="autoPlayVideo">Automatically plays video</label>
 
   <input type="submit" value="Save" [disabled]="!form.valid">
 </form>
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.ts b/client/src/app/account/account-settings/account-details/account-details.component.ts
index d835c53e5..b8c19d8d6 100644
--- a/client/src/app/account/account-settings/account-details/account-details.component.ts
+++ b/client/src/app/account/account-settings/account-details/account-details.component.ts
@@ -31,7 +31,8 @@ export class AccountDetailsComponent extends FormReactive implements OnInit {
 
   buildForm () {
     this.form = this.formBuilder.group({
-      displayNSFW: [ this.user.displayNSFW ]
+      displayNSFW: [ this.user.displayNSFW ],
+      autoPlayVideo: [ this.user.autoPlayVideo ]
     })
 
     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
@@ -43,8 +44,10 @@ export class AccountDetailsComponent extends FormReactive implements OnInit {
 
   updateDetails () {
     const displayNSFW = this.form.value['displayNSFW']
+    const autoPlayVideo = this.form.value['autoPlayVideo']
     const details: UserUpdateMe = {
-      displayNSFW
+      displayNSFW,
+      autoPlayVideo
     }
 
     this.error = null
diff --git a/client/src/app/account/account-settings/account-settings.component.html b/client/src/app/account/account-settings/account-settings.component.html
index c0a74cc47..f14eadd49 100644
--- a/client/src/app/account/account-settings/account-settings.component.html
+++ b/client/src/app/account/account-settings/account-settings.component.html
@@ -11,5 +11,5 @@
 <div class="account-title">Account settings</div>
 <my-account-change-password></my-account-change-password>
 
-<div class="account-title">Filtering</div>
+<div class="account-title">Videos</div>
 <my-account-details [user]="user"></my-account-details>
diff --git a/client/src/app/core/auth/auth-user.model.ts b/client/src/app/core/auth/auth-user.model.ts
index 7b6c8816f..9ad275392 100644
--- a/client/src/app/core/auth/auth-user.model.ts
+++ b/client/src/app/core/auth/auth-user.model.ts
@@ -69,7 +69,8 @@ export class AuthUser extends User {
     ROLE: 'role',
     EMAIL: 'email',
     USERNAME: 'username',
-    DISPLAY_NSFW: 'display_nsfw'
+    DISPLAY_NSFW: 'display_nsfw',
+    AUTO_PLAY_VIDEO: 'auto_play_video'
   }
 
   tokens: Tokens
@@ -83,7 +84,8 @@ export class AuthUser extends User {
           username: localStorage.getItem(this.KEYS.USERNAME),
           email: localStorage.getItem(this.KEYS.EMAIL),
           role: parseInt(localStorage.getItem(this.KEYS.ROLE), 10) as UserRole,
-          displayNSFW: localStorage.getItem(this.KEYS.DISPLAY_NSFW) === 'true'
+          displayNSFW: localStorage.getItem(this.KEYS.DISPLAY_NSFW) === 'true',
+          autoPlayVideo: localStorage.getItem(this.KEYS.AUTO_PLAY_VIDEO) === 'true'
         },
         Tokens.load()
       )
@@ -97,6 +99,7 @@ export class AuthUser extends User {
     localStorage.removeItem(this.KEYS.ID)
     localStorage.removeItem(this.KEYS.ROLE)
     localStorage.removeItem(this.KEYS.DISPLAY_NSFW)
+    localStorage.removeItem(this.KEYS.AUTO_PLAY_VIDEO)
     localStorage.removeItem(this.KEYS.EMAIL)
     Tokens.flush()
   }
@@ -133,6 +136,7 @@ export class AuthUser extends User {
     localStorage.setItem(AuthUser.KEYS.EMAIL, this.email)
     localStorage.setItem(AuthUser.KEYS.ROLE, this.role.toString())
     localStorage.setItem(AuthUser.KEYS.DISPLAY_NSFW, JSON.stringify(this.displayNSFW))
+    localStorage.setItem(AuthUser.KEYS.AUTO_PLAY_VIDEO, JSON.stringify(this.autoPlayVideo))
     this.tokens.save()
   }
 }
diff --git a/client/src/app/core/auth/auth.service.ts b/client/src/app/core/auth/auth.service.ts
index e2b8b6ba5..37264a8ad 100644
--- a/client/src/app/core/auth/auth.service.ts
+++ b/client/src/app/core/auth/auth.service.ts
@@ -33,6 +33,7 @@ interface UserLoginWithUserInformation extends UserLogin {
   id: number
   role: UserRole
   displayNSFW: boolean
+  autoPlayVideo: boolean
   email: string
   videoQuota: number
   account: Account
@@ -191,6 +192,7 @@ export class AuthService {
       .subscribe(
         res => {
           this.user.displayNSFW = res.displayNSFW
+          this.user.autoPlayVideo = res.autoPlayVideo
           this.user.role = res.role
           this.user.videoChannels = res.videoChannels
           this.user.account = res.account
@@ -212,6 +214,7 @@ export class AuthService {
                         id: res.id,
                         role: res.role,
                         displayNSFW: res.displayNSFW,
+                        autoPlayVideo: res.autoPlayVideo,
                         email: res.email,
                         videoQuota: res.videoQuota,
                         account: res.account,
@@ -230,6 +233,7 @@ export class AuthService {
       role: obj.role,
       email: obj.email,
       displayNSFW: obj.displayNSFW,
+      autoPlayVideo: obj.autoPlayVideo,
       videoQuota: obj.videoQuota,
       videoChannels: obj.videoChannels,
       account: obj.account
diff --git a/client/src/app/shared/users/user.model.ts b/client/src/app/shared/users/user.model.ts
index b4d13f37c..7a962ae3e 100644
--- a/client/src/app/shared/users/user.model.ts
+++ b/client/src/app/shared/users/user.model.ts
@@ -8,6 +8,7 @@ export type UserConstructorHash = {
   role: UserRole,
   videoQuota?: number,
   displayNSFW?: boolean,
+  autoPlayVideo?: boolean,
   createdAt?: Date,
   account?: Account,
   videoChannels?: VideoChannel[]
@@ -18,6 +19,7 @@ export class User implements UserServerModel {
   email: string
   role: UserRole
   displayNSFW: boolean
+  autoPlayVideo: boolean
   videoQuota: number
   account: Account
   videoChannels: VideoChannel[]
@@ -42,6 +44,10 @@ export class User implements UserServerModel {
       this.displayNSFW = hash.displayNSFW
     }
 
+    if (hash.autoPlayVideo !== undefined) {
+      this.autoPlayVideo = hash.autoPlayVideo
+    }
+
     if (hash.createdAt !== undefined) {
       this.createdAt = hash.createdAt
     }
diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts
index 5e4823c9c..e35b02f3f 100644
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/videos/+video-watch/video-watch.component.ts
@@ -290,12 +290,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
           const videojsOptions = {
             controls: true,
-            autoplay: true,
+            autoplay: this.user.autoPlayVideo,
             plugins: {
               peertube: {
                 videoFiles: this.video.files,
                 playerElement: this.playerElement,
-                autoplay: true,
+                autoplay: this.user.autoPlayVideo,
                 peerTubeLink: false
               }
             }