Improved gif playback

app/js/directives.js

@@ -2275,6 +2275,10 @@ angular.module('myApp.directives', ['myApp.filters'])
   })
 
   .directive('myLoadGif', function (AppDocsManager, $timeout) {
+
+    var currentPlayer = false
+    var currentPlayerScope = false
+
     return {
       link: link,
       templateUrl: templateUrl('full_gif'),
@@ -2283,23 +2287,51 @@ angular.module('myApp.directives', ['myApp.filters'])
       }
     }
 
+    function checkPlayer(newPlayer, newScope) {
+      if (currentPlayer === newPlayer) {
+        return false
+      }
+      if (currentPlayer) {
+        currentPlayer.pause()
+        currentPlayer.currentTime = 0
+        currentPlayerScope.isActive = false
+      }
+      currentPlayer = newPlayer
+      currentPlayerScope = newScope
+    }
+
+    function toggleVideoPlayer ($scope, element) {
+      var video = $('video', element)[0]
+      if (video) {
+        if (!$scope.isActive) {
+          video.pause()
+          video.currentTime = 0
+        } else {
+          checkPlayer(video, $scope)
+
+          var promise = video.play()
+          if (promise && promise.then) {
+            promise.then(function () {
+              $scope.needClick = false
+            }, function () {
+              $scope.needClick = true
+            })
+          }
+        }
+        return video
+      }
+      return false
+    }
+
     function link ($scope, element, attrs) {
       var imgWrap = $('.img_gif_image_wrap', element)
       imgWrap.css({width: $scope.document.thumb.width, height: $scope.document.thumb.height})
 
       var downloadPromise = false
+      var peerChanged = false
 
       $scope.isActive = false
 
-      // Demo
-      // $scope.document.progress = {enabled: true, percent: 30}
-      // $timeout(function () {
-      //   $scope.document.progress.percent = 60
-      // }, 3000)
-      // $timeout(function () {
-      //   $scope.document.progress.percent = 100
-      // }, 10000)
-
       $scope.toggle = function (e) {
         if (e && checkClick(e, true)) {
           AppDocsManager.saveDocFile($scope.document.id)
@@ -2307,19 +2339,15 @@ angular.module('myApp.directives', ['myApp.filters'])
         }
 
         if ($scope.document.url) {
-          onContentLoaded(function () {
+          if ($scope.needClick) {
+            if (toggleVideoPlayer($scope, element)) {
+              return;
+            }
+          }
           $scope.isActive = !$scope.isActive
+          onContentLoaded(function () {
             $scope.$emit('ui_height')
-
+            toggleVideoPlayer($scope, element)
-            var video = $('video', element)[0]
-            if (video) {
-              if (!$scope.isActive) {
-                video.pause()
-                video.currentTime = 0
-              } else {
-                video.play()
-              }
-            }
           })
           return
         }
@@ -2330,14 +2358,39 @@ angular.module('myApp.directives', ['myApp.filters'])
           return
         }
 
+        peerChanged = false
         downloadPromise = AppDocsManager.downloadDoc($scope.document.id)
 
         downloadPromise.then(function () {
           $timeout(function () {
+            if (!peerChanged) {
               $scope.isActive = true
+            }
+            var video = toggleVideoPlayer($scope, element)
+            if (video) {
+              $(video).on('ended', function () {
+                if ($scope.isActive) {
+                  $scope.toggle()
+                }
+              })
+            }
           }, 200)
         })
       }
+
+      $scope.$on('ui_history_change', function () {
+        if ($scope.isActive) {
+          $scope.toggle()
+        }
+        peerChanged = true
+      })
+
+      $scope.$on('$destroy', function () {
+        if (downloadPromise) {
+          downloadPromise.cancel()
+          downloadPromise = false
+        }
+      })
     }
   })
 

app/less/app.less

@@ -1756,6 +1756,10 @@ div.im_message_video_thumb {
 .im_message_gif_wrap {
   position: relative;
 }
+.img_gif_with_progress_wrap {
+  display: inline-block;
+  line-height: 0;
+}
 .im_message_gif_btn {
   color: #fff;
   font-style: normal;
@@ -4200,6 +4204,10 @@ h5 {
 
 
 /* Round documents */
+.img_round_with_progress_wrap {
+  display: inline-block;
+  line-height: 0;
+}
 .img_round_image_wrap {
   position: relative;
   overflow: hidden;

app/partials/desktop/full_gif.html

@@ -2,7 +2,7 @@
 
   <div class="img_gif_image_wrap">
 
-    <div class="img_gif_meta" ng-show="!isActive" ng-switch="document.progress.enabled">
+    <div class="img_gif_meta" ng-show="!isActive || needClick" ng-switch="document.progress.enabled">
       <div ng-switch-when="true" class="img_gif_meta_contents">
         <i class="icon icon-cancel">
           <i class="icon icon-bar"></i>
@@ -14,7 +14,7 @@
     </div>
 
     <div ng-if="document.url" ng-show="document.downloaded &amp;&amp; isActive" ng-switch="document.mime_type == 'video/mp4'">
-      <video ng-switch-when="true" width="{{document.thumb.width}}" height="{{document.thumb.height}}" loop autoplay class="img_gif_video">
+      <video ng-switch-when="true" width="{{document.thumb.width}}" height="{{document.thumb.height}}" loop autoplay muted class="img_gif_video">
         <source ng-src="{{document.url}}" type="video/mp4">
       </video>
       <img ng-switch-default class="img_gif_image" ng-src="{{document.url}}" width="{{document.thumb.width}}" height="{{document.thumb.height}}" />

app/partials/mobile/full_gif.html

@@ -2,7 +2,7 @@
 
   <div class="img_gif_image_wrap">
 
-    <div class="img_gif_meta" ng-show="!isActive" ng-switch="document.progress.enabled">
+    <div class="img_gif_meta" ng-show="!isActive || needClick" ng-switch="document.progress.enabled">
       <div ng-switch-when="true" class="img_gif_meta_contents">
         <i class="icon icon-cancel">
           <i class="icon icon-bar"></i>
@@ -14,7 +14,7 @@
     </div>
 
     <div ng-if="document.url" ng-show="document.downloaded &amp;&amp; isActive" ng-switch="document.mime_type == 'video/mp4'">
-      <video ng-switch-when="true" width="{{document.thumb.width}}" height="{{document.thumb.height}}" controls loop class="img_gif_video">
+      <video ng-switch-when="true" width="{{document.thumb.width}}" height="{{document.thumb.height}}" controls loop muted class="img_gif_video">
         <source ng-src="{{document.url}}" type="video/mp4">
       </video>
       <img ng-switch-default class="img_gif_image" ng-src="{{document.url}}" width="{{document.thumb.width}}" height="{{document.thumb.height}}" />