Browse Source

Improved video messages playback

Support read message contents in channels
master
Igor Zhukov 7 years ago
parent
commit
2e62cbb30b
  1. 86
      app/js/directives.js
  2. 54
      app/js/messages_manager.js
  3. 20
      app/less/app.less
  4. 6
      app/partials/desktop/full_round.html

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

54
app/js/messages_manager.js

@ -1221,19 +1221,40 @@ angular.module('myApp.services')
} }
function readMessages (messageIDs) { function readMessages (messageIDs) {
MtpApiManager.invokeApi('messages.readMessageContents', { var splitted = AppMessagesIDsManager.splitMessageIDsByChannels(messageIDs)
id: messageIDs angular.forEach(splitted.msgIDs, function (msgIDs, channelID) {
}).then(function (affectedMessages) { if (channelID > 0) {
ApiUpdatesManager.processUpdateMessage({ MtpApiManager.invokeApi('channels.readMessageContents', {
_: 'updateShort', channel: AppChatsManager.getChannelInput(channelID),
update: { id: msgIDs
_: 'updateReadMessagesContents', }).then(function () {
messages: messageIDs, ApiUpdatesManager.processUpdateMessage({
pts: affectedMessages.pts, _: 'updateShort',
pts_count: affectedMessages.pts_count 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) { function doFlushHistory (inputPeer, justClear) {
@ -3363,6 +3384,14 @@ angular.module('myApp.services')
} }
break 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': case 'updateReadMessagesContents':
var messages = update.messages var messages = update.messages
var len = messages.length var len = messages.length
@ -3394,7 +3423,6 @@ angular.module('myApp.services')
}) })
} }
update.messages = messages update.messages = messages
console.warn(dT(), update, channelID, messages, history)
case 'updateDeleteMessages': case 'updateDeleteMessages':
case 'updateDeleteChannelMessages': case 'updateDeleteChannelMessages':

20
app/less/app.less

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

6
app/partials/desktop/full_round.html

@ -1,8 +1,8 @@
<a class="img_round_with_progress_wrap" ng-click="toggle($event)"> <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"> <div ng-switch-when="true" class="img_round_meta_contents">
<i class="icon icon-cancel"> <i class="icon icon-cancel">
<i class="icon icon-bar"></i> <i class="icon icon-bar"></i>
@ -15,7 +15,7 @@
</div> </div>
<div ng-if="document.url" ng-show="document.downloaded &amp;&amp; isActive" ng-switch="document.mime_type == 'video/mp4'"> <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"> <source ng-src="{{document.url}}" type="video/mp4">
</video> </video>
<img ng-switch-default class="img_round_image" ng-src="{{document.url}}" width="{{document.thumb.width}}" height="{{document.thumb.height}}" /> <img ng-switch-default class="img_round_image" ng-src="{{document.url}}" width="{{document.thumb.width}}" height="{{document.thumb.height}}" />

Loading…
Cancel
Save