Improved video messages playback

Support read message contents in channels

app/js/directives.js

@@ -2341,7 +2341,7 @@ angular.module('myApp.directives', ['myApp.filters'])
     }
   })
 
-  .directive('myLoadRound', function (AppDocsManager, $timeout) {
+  .directive('myLoadRound', function (AppMessagesManager, AppDocsManager, $timeout) {
 
     var currentPlayer = false
     var currentPlayerScope = false
@@ -2367,14 +2367,53 @@ angular.module('myApp.directives', ['myApp.filters'])
       currentPlayerScope = newScope
     }
 
+    function readVideoMessage($scope) {
+      if ($scope.message &&
+          !$scope.message.pFlags.out &&
+          $scope.message.pFlags.media_unread) {
+        AppMessagesManager.readMessages([$scope.message.mid])
+      }
+    }
+
+    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
+              readVideoMessage($scope)
+            }, function () {
+              $scope.needClick = true
+            })
+          } else {
+            readVideoMessage($scope)
+          }
+        }
+        return video
+      }
+      return false
+    }
+
     function link ($scope, element, attrs) {
       var imgWrap = $('.img_round_image_wrap', element)
       imgWrap.css({width: $scope.document.thumb.width, height: $scope.document.thumb.height})
 
       var downloadPromise = false
+      var peerChanged = false
 
       $scope.isActive = false
 
+      if ($scope.$parent.messageId) {
+        $scope.message = AppMessagesManager.wrapForHistory($scope.$parent.messageId)
+      }
+
       $scope.toggle = function (e) {
         if (e && checkClick(e, true)) {
           AppDocsManager.saveDocFile($scope.document.id)
@@ -2382,20 +2421,15 @@ angular.module('myApp.directives', ['myApp.filters'])
         }
 
         if ($scope.document.url) {
+          if ($scope.needClick) {
+            if (toggleVideoPlayer($scope, element)) {
+              return;
+            }
+          }
           $scope.isActive = !$scope.isActive
           onContentLoaded(function () {
             $scope.$emit('ui_height')
-
-            var video = $('video', element)[0]
-            if (video) {
-              if (!$scope.isActive) {
-                video.pause()
-                video.currentTime = 0
-              } else {
-                checkPlayer(video, $scope)
-                video.play()
-              }
-            }
+            toggleVideoPlayer($scope, element)
           })
           return
         }
@@ -2406,18 +2440,22 @@ angular.module('myApp.directives', ['myApp.filters'])
           return
         }
 
+        peerChanged = false
         downloadPromise = AppDocsManager.downloadDoc($scope.document.id)
 
         downloadPromise.then(function () {
           $timeout(function () {
-            var video = $('video', element)[0]
-            checkPlayer(video, $scope)
+            if (!peerChanged) {
+              $scope.isActive = true
+            }
+            var video = toggleVideoPlayer($scope, element)
+            if (video) {
               $(video).on('ended', function () {
                 if ($scope.isActive) {
                   $scope.toggle()
                 }
               })
-            $scope.isActive = true
+            }
           }, 200)
         })
       }
@@ -2426,6 +2464,14 @@ angular.module('myApp.directives', ['myApp.filters'])
         if ($scope.isActive) {
           $scope.toggle()
         }
+        peerChanged = true
+      })
+
+      $scope.$on('$destroy', function () {
+        if (downloadPromise) {
+          downloadPromise.cancel()
+          downloadPromise = false
+        }
       })
     }
   })

app/js/messages_manager.js

@@ -1221,20 +1221,41 @@ angular.module('myApp.services')
     }
 
     function readMessages (messageIDs) {
+      var splitted = AppMessagesIDsManager.splitMessageIDsByChannels(messageIDs)
+      angular.forEach(splitted.msgIDs, function (msgIDs, channelID) {
+        if (channelID > 0) {
+          MtpApiManager.invokeApi('channels.readMessageContents', {
+            channel: AppChatsManager.getChannelInput(channelID),
+            id: msgIDs
+          }).then(function () {
+            ApiUpdatesManager.processUpdateMessage({
+              _: 'updateShort',
+              update: {
+                _: 'updateChannelReadMessagesContents',
+                channel_id: channelID,
+                messages: msgIDs
+              }
+            })
+          })
+        } else {
           MtpApiManager.invokeApi('messages.readMessageContents', {
-        id: messageIDs
+            id: msgIDs
           }).then(function (affectedMessages) {
             ApiUpdatesManager.processUpdateMessage({
               _: 'updateShort',
               update: {
                 _: 'updateReadMessagesContents',
-            messages: messageIDs,
+                messages: msgIDs,
                 pts: affectedMessages.pts,
                 pts_count: affectedMessages.pts_count
               }
             })
           })
         }
+      })
+
+
+    }
 
     function doFlushHistory (inputPeer, justClear) {
       var flags = 0
@@ -3363,6 +3384,14 @@ angular.module('myApp.services')
           }
           break
 
+        case 'updateChannelReadMessagesContents':
+          var channelID = update.channel_id
+          var newMessages = []
+          angular.forEach(update.messages, function (msgID) {
+            newMessages.push(AppMessagesIDsManager.getFullMessageID(msgID, channelID))
+          })
+          update.messages = newMessages
+
         case 'updateReadMessagesContents':
           var messages = update.messages
           var len = messages.length
@@ -3394,7 +3423,6 @@ angular.module('myApp.services')
             })
           }
           update.messages = messages
-          console.warn(dT(), update, channelID, messages, history)
 
         case 'updateDeleteMessages':
         case 'updateDeleteChannelMessages':

app/less/app.less

@@ -1618,17 +1618,15 @@ div.im_message_video_thumb {
   display: inline-block;
   top: 50%;
   left: 50%;
-  margin-left: -21px;
-  margin-top: -21px;
-  width: 42px;
-  height: 42px;
+  margin-left: -5px;
+  margin-top: -9px;
   z-index: 1;
 
-  .image-2x('../img/icons/IconsetW.png', 42px, 1171px);
-  background-position: 0 -590px;
-  .is_2x & {
-    background-position: 0 -591px;
-  }
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 9px 0 9px 14px;
+  border-color: transparent transparent transparent #fff;
 }
 
 .im_message_geopoint {
@@ -4210,6 +4208,10 @@ h5 {
 }
 .img_round_meta {
   background: rgba(0,0,0,0.4);
+  .img_round_video_unread & {
+    background: rgba(100,144,177,0.6);
+  }
+
   width: 40px;
   height: 40px;
   line-height: 0;

app/partials/desktop/full_round.html

@@ -1,8 +1,8 @@
 <a class="img_round_with_progress_wrap" ng-click="toggle($event)">
 
-  <div class="img_round_image_wrap" ng-style="::{width: document.thumb.width + 'px'}">
+  <div class="img_round_image_wrap" ng-style="::{width: document.thumb.width + 'px'}" ng-class="message.pFlags.media_unread ? 'img_round_video_unread' : ''">
 
-    <div class="img_round_meta" ng-show="!isActive" ng-switch="document.progress.enabled">
+    <div class="img_round_meta" ng-show="!isActive || needClick" ng-switch="document.progress.enabled">
       <div ng-switch-when="true" class="img_round_meta_contents">
         <i class="icon icon-cancel">
           <i class="icon icon-bar"></i>
@@ -15,7 +15,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}}" autoplay class="img_round_video">
+      <video ng-switch-when="true" width="{{document.thumb.width}}" height="{{document.thumb.height}}" class="img_round_video">
         <source ng-src="{{document.url}}" type="video/mp4">
       </video>
       <img ng-switch-default class="img_round_image" ng-src="{{document.url}}" width="{{document.thumb.width}}" height="{{document.thumb.height}}" />