Youtube shared videos playwright tests (#646)

* news and announcement test

* fix comment

* fix no youtube video message also for observation date videos

* utility function to generate random int

* page object for youtube drawer

* implement test for the youtube drawer scenarios

* some useful renaming

* fix typescript style

* code style fixes

* fix typo bug

index.php

@@ -722,7 +722,7 @@ function attr($attr, $file) {
 								<div id="user-video-gallery-main-current">
 									<span id="user-video-gallery-spinner-current"></span>
 								</div>
-								<p class="js-no-movies" style="display: none;">No shared movies found.</p>
+								<p class="js-no-movies" style="display: none;">No movies found around the observation date.</p>
 							</div>
 						</div>
 					</div>
@@ -741,6 +741,7 @@ function attr($attr, $file) {
 								<div id="user-video-gallery-main">
 									<span id="user-video-gallery-spinner"></span>
 								</div>
+								<p class="js-no-movies" style="display: none;">No shared movies found.</p>
 							</div>
 						</div>
 					</div>

resources/js/UI/UserVideoGallery.js

@@ -20,7 +20,8 @@ var UserVideoGallery = Class.extend(
     init : function (url) {
         this._container   			= $("#user-video-gallery-main");
         this._containerCurrent   	= $("#user-video-gallery-main-current");
-        this._noSharedMoviesFound   = $("#user-video-gallery-current .js-no-movies");
+        this._noSharedMoviesFound   = $("#user-video-gallery .js-no-movies");
+        this._noSharedMoviesFoundForObservationDate   = $("#user-video-gallery-current .js-no-movies");
         this._loader      			= $("#user-video-gallery-spinner");
         this._loaderCurrent      	= $("#user-video-gallery-spinner-current");
 
@@ -262,9 +263,15 @@ var UserVideoGallery = Class.extend(
 	        count++;
         });
 
-		if($('.user-video-thumbnail-container-recent').length == 0){
+        if($('.user-video-thumbnail-container-current').length == 0){
+            this._noSharedMoviesFoundForObservationDate.show();
+        } else {
+            this._noSharedMoviesFoundForObservationDate.hide();
+        }
+
+        if($('.user-video-thumbnail-container-recent').length == 0){
             this._noSharedMoviesFound.show();
-		} else {
+        } else {
             this._noSharedMoviesFound.hide();
         }
 
@@ -370,14 +377,20 @@ var UserVideoGallery = Class.extend(
         }
 
 		if($('.user-video-thumbnail-container-current').length == 0){
-            this._noSharedMoviesFound.show();
+            this._noSharedMoviesFoundForObservationDate.show();
 		} else {
-            this._noSharedMoviesFound.hide();
+            this._noSharedMoviesFoundForObservationDate.hide();
             if(count == this._numVideosCurrent){
                 this._containerCurrent.append('<span class="user-video-current-show-more">SHOW MORE</span>');
             }
         }
 
+        if($('.user-video-thumbnail-container-recent').length == 0){
+            this._noSharedMoviesFound.show();
+        } else {
+            this._noSharedMoviesFound.hide();
+        }
+
 	    $('#user-video-gallery-main-current > div').off();
 	    $('#user-video-gallery-main-current > div').hover(function(){
             var id = $(this).data('id');