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']) @@ -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']) @@ -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']) @@ -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']) @@ -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']) @@ -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
}
})
}
})

54
app/js/messages_manager.js

@ -1221,19 +1221,40 @@ angular.module('myApp.services') @@ -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') @@ -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') @@ -3394,7 +3423,6 @@ angular.module('myApp.services')
})
}
update.messages = messages
console.warn(dT(), update, channelID, messages, history)
case 'updateDeleteMessages':
case 'updateDeleteChannelMessages':

20
app/less/app.less

@ -1618,17 +1618,15 @@ div.im_message_video_thumb { @@ -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 { @@ -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;

6
app/partials/desktop/full_round.html

@ -1,8 +1,8 @@ @@ -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 @@ @@ -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}}" />

Loading…
Cancel
Save