diff --git a/app/css/app.css b/app/css/app.css index 9e407f54..5c7b6e53 100644 --- a/app/css/app.css +++ b/app/css/app.css @@ -256,7 +256,7 @@ input[type="number"]::-webkit-inner-spin-button { vertical-align: text-top; background: url(../img/icons/IconsetW.png) -15px -419px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; opacity: 0.6; } .is_1x .icon-back { @@ -518,7 +518,7 @@ input[type="number"]::-webkit-inner-spin-button { font-size: 12px; line-height: normal; background: #F2F2F2 url(../img/icons/IconsetW.png) -6px -205px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; border: 1px solid #F2F2F2; border-radius: 3px; padding: 6px 20px 6px 30px; @@ -542,7 +542,7 @@ input[type="number"]::-webkit-inner-spin-button { height: 13px; vertical-align: text-top; background: url(../img/icons/IconsetW.png) -15px -192px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; opacity: 0.6; } .is_1x .im_dialogs_search_clear { @@ -795,7 +795,7 @@ a.im_dialog:hover .im_dialog_date { margin-left: 6px; background: url(../img/icons/IconsetW.png) -17px -444px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; } .is_1x .icon-caret { background-image: url(../img/icons/IconsetW_1x.png); @@ -961,7 +961,6 @@ a.im_message_contact_photo { a.im_message_photo_thumb, a.im_message_video_thumb { display: block; - margin-top: 5px; overflow: hidden; border-radius: 2px; } @@ -970,6 +969,15 @@ img.im_message_video_thumb { overflow: hidden; border-radius: 2px; } +.im_message_video, +a.im_message_photo_thumb { + margin-top: 5px; +} +a.im_message_video_thumb { + float: left; + margin-right: 15px; + position: relative; +} img.im_message_video_thumb { -webkit-filter: blur(2px); @@ -983,21 +991,36 @@ img.im_message_video_thumb { div.im_message_video_thumb { position: relative; } -.im_message_video_duration_wrap { - background: rgba(0, 0, 0, 0.5); +.im_message_video_duration { + background: rgba(0, 0, 0, 0.4); color: #FFF; position: absolute; - margin-top: -15px; - height: 15px; - padding: 0 3px; + bottom: 4px; + right: 4px; + padding: 2px 6px; font-size: 11px; line-height: 15px; - - border-radius: 0 0 2px 2px; + border-radius: 2px; overflow: hidden; + z-index: 1; } -.im_message_video_duration { +.icon-videoplay { + position: absolute; + display: inline-block; + top: 50%; + left: 50%; + margin-left: -21px; + margin-top: -21px; + width: 42px; + height: 42px; + + background: url(../img/icons/IconsetW.png) 0 -590px no-repeat; + background-size: 42px 680px; + z-index: 1; +} +.is_1x .icon-videoplay { + background-image: url(../img/icons/IconsetW_1x.png); } .im_message_geopoint { @@ -1020,7 +1043,7 @@ div.im_message_video_thumb { height: 19px; background: url(../img/icons/IconsetW.png) -14px -389px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; } .is_1x .icon-geo-point { background-image: url(../img/icons/IconsetW_1x.png); @@ -1048,7 +1071,7 @@ div.im_message_video_thumb { vertical-align: text-top; background: #F2F2F2 url(../img/icons/IconsetW.png) -2px -229px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; border-radius: 3px; margin-right: 10px; } @@ -1135,7 +1158,7 @@ img.im_message_document_thumb { vertical-align: text-top; background: #F2F2F2 url(../img/icons/IconsetW.png) -2px -277px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; border-radius: 3px; margin-right: 10px; } @@ -1189,6 +1212,13 @@ img.im_message_document_thumb { .im_message_document_thumbed .im_message_document_name { max-width: 150px; } +.im_message_video .im_message_document_name_wrap, +.im_message_video .im_message_download_progress_wrap { + width: 150px; +} +.im_message_video .im_message_document_name_wrap { + margin-top: 5px; +} .tg_up_progress, .tg_down_progress { @@ -1404,7 +1434,7 @@ textarea.im_message_field { height: 23px; vertical-align: text-top; background: url(../img/icons/IconsetW.png) -12px -68px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; opacity: 0.8; } .is_1x .icon-paperclip { @@ -1432,7 +1462,7 @@ textarea.im_message_field { height: 23px; vertical-align: text-top; background: url(../img/icons/IconsetW.png) -10px -4px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; opacity: 0.8; } .is_1x .icon-emoji { @@ -1482,7 +1512,7 @@ textarea.im_message_field { height: 21px; vertical-align: text-top; background: url(../img/icons/IconsetW.png) -9px -132px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; opacity: 0.8; } .is_1x .icon-camera { @@ -1905,7 +1935,7 @@ img.img_fullsize { .emoji-menu-tail { display: none; background: url(../img/icons/IconsetW.png) -14px -268px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; width: 14px; height: 7px; margin: 0 83px; @@ -2050,7 +2080,7 @@ img.img_fullsize { font-size: 12px; line-height: normal; background: #F2F2F2 url(../img/icons/IconsetW.png) -6px -205px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; border: 1px solid #F2F2F2; border-radius: 3px; padding: 6px 20px 6px 30px; @@ -2074,7 +2104,7 @@ img.img_fullsize { height: 13px; vertical-align: text-top; background: url(../img/icons/IconsetW.png) -15px -192px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; opacity: 0.6; } .is_1x .contacts_modal_search_clear { @@ -2151,7 +2181,7 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status { width: 17px; height: 15px; background: url(../img/icons/IconsetW.png) -13px -366px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; opacity: 0.5; } .is_1x .icon-contact-tick { @@ -2249,7 +2279,7 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status { height: 15px; background: url(../img/icons/IconsetW.png) -15px -319px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; } .is_1x .icon-delete { background-image: url(../img/icons/IconsetW_1x.png); @@ -2296,7 +2326,7 @@ a.contacts_modal_contact:hover .contacts_modal_contact_status { height: 26px; margin: 13px 0 0 40px; background: url(../img/icons/IconsetW.png) -9px -516px no-repeat; - background-size: 42px 620px; + background-size: 42px 680px; } .is_1x .icon-select-tick { background-image: url(../img/icons/IconsetW_1x.png); @@ -2531,4 +2561,4 @@ ce671b orange color: #999; font-size: 13px; margin-left: 8px; -} \ No newline at end of file +} diff --git a/app/img/icons/IconsetW.png b/app/img/icons/IconsetW.png index ee6a46c4..4ba289bd 100644 Binary files a/app/img/icons/IconsetW.png and b/app/img/icons/IconsetW.png differ diff --git a/app/img/icons/IconsetW_1x.png b/app/img/icons/IconsetW_1x.png index 4aa8b600..6d7ffbc8 100644 Binary files a/app/img/icons/IconsetW_1x.png and b/app/img/icons/IconsetW_1x.png differ diff --git a/app/js/controllers.js b/app/js/controllers.js index 68959328..7a43c9ba 100644 --- a/app/js/controllers.js +++ b/app/js/controllers.js @@ -623,7 +623,11 @@ angular.module('myApp.controllers', []) $scope.$on('history_append', function (e, addedMessage) { if (addedMessage.peerID == $scope.curDialog.peerID) { if ($scope.mediaType) { - $scope.missedCount++; + if (addedMessage.my) { + toggleMedia(); + } else { + $scope.missedCount++; + } return; } // console.log('append', addedMessage); @@ -665,6 +669,12 @@ angular.module('myApp.controllers', []) } }); + $scope.$on('history_focus', function (e, peerData) { + if ($scope.mediaType) { + toggleMedia(); + } + }); + $scope.$on('apiUpdate', function (e, update) { // console.log('on apiUpdate inline', update); switch (update._) { diff --git a/app/js/services.js b/app/js/services.js index 0fb6428c..aa2b9866 100644 --- a/app/js/services.js +++ b/app/js/services.js @@ -1827,8 +1827,9 @@ angular.module('myApp.services', []) }) -.service('AppVideoManager', function ($rootScope, $modal, $window, MtpApiFileManager, AppUsersManager) { +.service('AppVideoManager', function ($rootScope, $modal, $window, $timeout, MtpApiFileManager, AppUsersManager) { var videos = {}; + var videosForHistory = {}; function saveVideo (apiVideo) { videos[apiVideo.id] = apiVideo; @@ -1844,6 +1845,10 @@ angular.module('myApp.services', []) }; function wrapForHistory (videoID) { + if (videosForHistory[videoID] !== undefined) { + return videosForHistory[videoID]; + } + var video = angular.copy(videos[videoID]), width = 200, height = 200, @@ -1867,7 +1872,7 @@ angular.module('myApp.services', []) video.thumb = thumb; - return video; + return videosForHistory[videoID] = video; } function wrapForFull (videoID) { @@ -1915,7 +1920,76 @@ angular.module('myApp.services', []) }); } + function downloadVideo (videoID, accessHash, popup) { + var video = videos[videoID], + historyVideo = videosForHistory[videoID] || video || {}, + inputFileLocation = { + _: 'inputVideoFileLocation', + id: videoID, + access_hash: accessHash || video.access_hash + }; + + historyVideo.progress = {enabled: true, percent: 1, total: video.size}; + + function updateDownloadProgress (progress) { + console.log('dl progress', progress); + historyVideo.progress.done = progress.done; + historyVideo.progress.percent = Math.max(1, Math.floor(100 * progress.done / progress.total)); + $rootScope.$broadcast('history_update'); + } + + var ext = 'mp4', + mimeType = 'video/mpeg4', + fileName = 'video' + videoID + '.' + ext; + + if (window.chrome && chrome.fileSystem && chrome.fileSystem.chooseEntry) { + + chrome.fileSystem.chooseEntry({ + type: 'saveFile', + suggestedName: fileName, + accepts: [{ + mimeTypes: [mimeType], + extensions: [ext] + }] + }, function (writableFileEntry) { + MtpApiFileManager.downloadFile(video.dc_id, inputFileLocation, video.size, writableFileEntry, {mime: mimeType}).then(function (url) { + delete historyVideo.progress; + console.log('file save done'); + }, function (e) { + console.log('video download failed', e); + historyVideo.progress.enabled = false; + }, updateDownloadProgress); + }); + } else { + MtpApiFileManager.downloadFile(video.dc_id, inputFileLocation, video.size, null, {mime: mimeType}).then(function (url) { + delete historyVideo.progress; + + if (popup) { + window.open(url, '_blank'); + return + } + + var a = $('Download') + .css({position: 'absolute', top: 1, left: 1}) + .attr('href', url) + .attr('target', '_blank') + .attr('download', fileName) + .appendTo('body'); + + a[0].dataset.downloadurl = [mimeType, fileName, url].join(':'); + a[0].click(); + $timeout(function () { + a.remove(); + }, 100); + }, function (e) { + console.log('video download failed', e); + historyVideo.progress.enabled = false; + }, updateDownloadProgress); + } + }; + $rootScope.openVideo = openVideo; + $rootScope.downloadVideo = downloadVideo; return { saveVideo: saveVideo, @@ -1977,7 +2051,7 @@ angular.module('myApp.services', []) return docsForHistory[docID] = doc; } - function openDoc (docID, accessHash, popup) { + function downloadDoc (docID, accessHash, popup) { var doc = docs[docID], historyDoc = docsForHistory[docID] || doc || {}, inputFileLocation = { @@ -2024,8 +2098,14 @@ angular.module('myApp.services', []) return } - var a = $('Download').css({position: 'absolute', top: 1, left: 1}).attr('href', url).attr('target', '_blank').attr('download', doc.file_name).appendTo('body'); - a[0].dataset.downloadurl = ['png', doc.file_name, url].join(':'); + var a = $('Download') + .css({position: 'absolute', top: 1, left: 1}) + .attr('href', url) + .attr('target', '_blank') + .attr('download', doc.file_name) + .appendTo('body'); + + a[0].dataset.downloadurl = [doc.mime_type, doc.file_name, url].join(':'); a[0].click(); $timeout(function () { a.remove(); @@ -2037,12 +2117,12 @@ angular.module('myApp.services', []) } } - $rootScope.openDoc = openDoc; + $rootScope.downloadDoc = downloadDoc; return { saveDoc: saveDoc, wrapForHistory: wrapForHistory, - openDoc: openDoc + downloadDoc: downloadDoc } }) diff --git a/app/partials/im.html b/app/partials/im.html index 492b7f0b..eca2232a 100644 --- a/app/partials/im.html +++ b/app/partials/im.html @@ -118,7 +118,7 @@
-
+
is typing
@@ -175,22 +175,24 @@
Drop photos here to send
-
- - +
+
+ + +
+ +
+ + +
+ + +
+ +
+ +
- -
- - -
- - -
- -
- -
diff --git a/app/partials/message.html b/app/partials/message.html index c35748a7..7214d9cc 100644 --- a/app/partials/message.html +++ b/app/partials/message.html @@ -106,22 +106,47 @@ /> - - -
- {{historyMessage.media.video.duration | duration}} - +
+ + {{historyMessage.media.video.duration | duration}} + + + + +
+
+ Video + + {{historyMessage.media.video.size | formatSize}} + + + {{historyMessage.media.video.progress | formatSizeProgress}} + +
+ +
+
+
+ + {{historyMessage.media.video.progress.percent}}% Complete (success) + +
+
+
- +