r4sas
/
webogram-i2p
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Improved gif playback

master
Igor Zhukov 6 years ago
parent
2e62cbb30b
commit
32e3d204e2
4 changed files with 86 additions and 25 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 95
      app/js/directives.js
  2. 8
      app/less/app.less
  3. 4
      app/partials/desktop/full_gif.html
  4. 4
      app/partials/mobile/full_gif.html

95
app/js/directives.js
Unescape View File

@ -2275,6 +2275,10 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -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']) @@ -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']) @@ -2307,19 +2339,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.isActive = !$scope.isActive
$scope.$emit('ui_height')
var video = $('video', element)[0]
if (video) {
if (!$scope.isActive) {
video.pause()
video.currentTime = 0
} else {
video.play()
}
}
toggleVideoPlayer($scope, element)
})
return
}
@ -2330,14 +2358,39 @@ angular.module('myApp.directives', ['myApp.filters']) @@ -2330,14 +2358,39 @@ angular.module('myApp.directives', ['myApp.filters'])
return
}
peerChanged = false
downloadPromise = AppDocsManager.downloadDoc($scope.document.id)
downloadPromise.then(function () {
$timeout(function () {
$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)
})
}
$scope.$on('ui_history_change', function () {
if ($scope.isActive) {
$scope.toggle()
}
peerChanged = true
})
$scope.$on('$destroy', function () {
if (downloadPromise) {
downloadPromise.cancel()
downloadPromise = false
}
})
}
})

8
app/less/app.less
Unescape View File

@ -1756,6 +1756,10 @@ div.im_message_video_thumb { @@ -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 { @@ -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;

4
app/partials/desktop/full_gif.html
Unescape View File

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

4
app/partials/mobile/full_gif.html
Unescape View File

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

Write Preview
Loading…
Cancel
Save