Improved video messages playback

Support read message contents in channels
2017-12-29 00:09:03 +04:00 · 2017-12-29 00:09:03 +04:00 · 2e62cbb30b
commit 2e62cbb30b
parent e613f095ef
4 changed files with 121 additions and 45 deletions
--- a/app/js/directives.js
+++ b/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)
-            $(video).on('ended', function () {
-              if ($scope.isActive) {
-                $scope.toggle()
-              }
-            })
-            $scope.isActive = true
+            if (!peerChanged) {
+              $scope.isActive = true
+            }
+            var video = toggleVideoPlayer($scope, element)
+            if (video) {
+              $(video).on('ended', function () {
+                if ($scope.isActive) {
+                  $scope.toggle()
+                }
+              })
+            }
          }, 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
+        }
      })
    }
  })
--- a/app/js/messages_manager.js
+++ b/app/js/messages_manager.js
@ -1221,19 +1221,40 @@ angular.module('myApp.services')
    }

    function readMessages (messageIDs) {
-      MtpApiManager.invokeApi('messages.readMessageContents', {
-        id: messageIDs
-      }).then(function (affectedMessages) {
-        ApiUpdatesManager.processUpdateMessage({
-          _: 'updateShort',
-          update: {
-            _: 'updateReadMessagesContents',
-            messages: messageIDs,
-            pts: affectedMessages.pts,
-            pts_count: affectedMessages.pts_count
-          }
-        })
+      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: msgIDs
+          }).then(function (affectedMessages) {
+            ApiUpdatesManager.processUpdateMessage({
+              _: 'updateShort',
+              update: {
+                _: 'updateReadMessagesContents',
+                messages: msgIDs,
+                pts: affectedMessages.pts,
+                pts_count: affectedMessages.pts_count
+              }
+            })
+          })
+        }
      })
+
+
    }

    function doFlushHistory (inputPeer, justClear) {
@ -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':
--- a/app/less/app.less
+++ b/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;
--- a/app/partials/desktop/full_round.html
+++ b/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}}" />