Skip to content

Commit

Permalink
show uploading indicator (threema-ch#29) (threema-ch#68)
Browse files Browse the repository at this point in the history 
Fixes threema-ch#29
  • Loading branch information
@sillych
sillych authored Feb 20, 2017
1 parent 9c83874 commit 6fc1d3c
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 88 deletions.
123 changes: 66 additions & 57 deletions src/directives/message_media.html
View file
Original file line number Diff line number Diff line change
@@ -1,74 +1,83 @@
<!-- Thumbnail -->
<!-- Images, Gifs & Videos -->
<span class="in-view-indicator" in-view="ctrl.thumbnailInView($inview)"></span>
<div ng-if="ctrl.showThumbnail" class="thumbnail {{ctrl.type}}" ng-click="ctrl.download()" ng-style="ctrl.thumbnailStyle">

<div class="loading-wrapper" ng-class="{active: ctrl.downloading || ctrl.thumbnailDownloading}">
<div class="loading"></div>
<div class="loading-text" translate>messenger.DOWNLOADING</div>
</div>
<div class="overlay video" ng-if="ctrl.type === 'video' && !ctrl.downloading">
<i class="material-icons md-light">play_circle_outline</i>
</div>
<div class="overlay gif" ng-if="ctrl.type === 'file' && ctrl.message.file.type === 'image/gif' && !ctrl.downloading">
<i class="material-icons md-light">play_circle_outline</i>
</div>
<img ng-if="ctrl.thumbnail !== null" ng-src="{{ctrl.thumbnail}}">
<div ng-if="ctrl.message.thumbnail != undefined" class="thumbnail-loader">
<img ng-src="{{ ctrl.message.thumbnail.preview | bufferToUrl: 'image/png' }}">
<div ng-if="ctrl.uploading">
<! -- Loading indicator -->
<div class="circle active center">
<i class="material-icons md-24">file_upload</i>
<div class="loading active"></div>
</div>
</div>
<div ng-if="!ctrl.uploading">
<div ng-if="ctrl.showThumbnail" class="thumbnail {{ctrl.type}}" ng-click="ctrl.download()" ng-style="ctrl.thumbnailStyle">

<!-- Location -->
<location ng-if="ctrl.type === 'location'" location="ctrl.location"></location>

<!-- Audio file -->
<div class="file-message" ng-if="ctrl.type === 'audio'">
<! -- Loading indicator -->
<div class="circle" ng-click="ctrl.download()"
ng-class="{active: !ctrl.downloading}"
ng-if="!ctrl.downloaded">
<i class="material-icons md-24">file_download</i>
<div class="loading" ng-class="{active: ctrl.downloading}"></div>
</div>
<! -- Play Indicator -->
<div class="circle" ng-click="ctrl.download()" ng-if="ctrl.downloaded">
<i class="material-icons md-24">play_arrow</i>
<div class="loading-wrapper" ng-class="{active: ctrl.downloading || ctrl.thumbnailDownloading}">
<div class="loading"></div>
<div class="loading-text" translate>messenger.DOWNLOADING</div>
</div>
<div class="overlay video" ng-if="ctrl.type === 'video' && !ctrl.downloading">
<i class="material-icons md-light">play_circle_outline</i>
</div>
<div class="overlay gif" ng-if="ctrl.type === 'file' && ctrl.message.file.type === 'image/gif' && !ctrl.downloading">
<i class="material-icons md-light">play_circle_outline</i>
</div>
<img ng-if="ctrl.thumbnail !== null" ng-src="{{ctrl.thumbnail}}">
<div ng-if="ctrl.message.thumbnail != undefined" class="thumbnail-loader">
<img ng-src="{{ ctrl.message.thumbnail.preview | bufferToUrl: 'image/png' }}">
</div>
</div>
<div class="info" translate>messageTypes.AUDIO_MESSAGE</div>
</div>

<!-- Anim GIF -->
<div class="animgif" ng-if="ctrl.downloaded && ctrl.isAnimGif">
<img ng-src="{{ ctrl.blobBuffer | bufferToUrl: 'image/gif'}}" />
</div>
<!-- Location -->
<location ng-if="ctrl.type === 'location'" location="ctrl.location"></location>

<!-- Other file messages -->
<div class="file-message" ng-if="ctrl.type === 'file' && !ctrl.isAnimGif" ng-click="ctrl.download()">
<! -- Loading indicator -->
<div class="circle"
ng-class="{active: !ctrl.downloading && !ctrl.message.temporaryId}"
ng-if="!ctrl.downloaded"
ng-style="{'background-image': 'url({{ctrl.message.thumbnail.preview | bufferToUrl: 'image/png'}})' }">
<i class="material-icons md-24">file_download</i>
<div class="loading" ng-class="{active: ctrl.downloading || ctrl.message.temporaryId}"></div>
</div>
<! -- Open Indicator -->
<div class="circle"
ng-if="ctrl.downloaded && ctrl.message.thumbnail.preview !== undefined"
ng-style="{'background-image': 'url({{ctrl.message.thumbnail.preview | bufferToUrl: 'image/png'}})' }">
<!-- Audio file -->
<div class="file-message" ng-if="ctrl.type === 'audio'">
<! -- Loading indicator -->
<div class="circle" ng-click="ctrl.download()"
ng-class="{active: !ctrl.downloading}"
ng-if="!ctrl.downloaded">
<i class="material-icons md-24">file_download</i>
<div class="loading" ng-class="{active: ctrl.downloading}"></div>
</div>
<! -- Play Indicator -->
<div class="circle" ng-click="ctrl.download()" ng-if="ctrl.downloaded">
<i class="material-icons md-24">play_arrow</i>
</div>
<div class="info" translate>messageTypes.AUDIO_MESSAGE</div>
</div>

<div class="circle"
ng-if="ctrl.downloaded && ctrl.message.thumbnail.preview == undefined">
<img ng-src="{{ ctrl.message.file.type | mimeType: false }}"/>
<!-- Anim GIF -->
<div class="animgif" ng-if="ctrl.downloaded && ctrl.isAnimGif">
<img ng-src="{{ ctrl.blobBuffer | bufferToUrl: 'image/gif'}}" />
</div>
<div class="info">
<p>{{ctrl.message.file.name}}</p>
<p>{{ctrl.message.file.type | mimeType: true}}</p>
<p>{{ctrl.message.file.size | fileSize}}</p>

<!-- Other file messages -->
<div class="file-message" ng-if="ctrl.type === 'file' && !ctrl.isAnimGif" ng-click="ctrl.download()">
<! -- Loading indicator -->
<div class="circle"
ng-class="{active: !ctrl.downloading}"
ng-if="!ctrl.downloaded"
ng-style="{'background-image': 'url({{ctrl.message.thumbnail.preview | bufferToUrl: 'image/png'}})' }">
<i class="material-icons md-24">file_download</i>
<div class="loading" ng-class="{active: ctrl.downloading}"></div>
</div>
<! -- Open Indicator -->
<div class="circle"
ng-if="ctrl.downloaded && ctrl.message.thumbnail.preview !== undefined"
ng-style="{'background-image': 'url({{ctrl.message.thumbnail.preview | bufferToUrl: 'image/png'}})' }">
</div>

<div class="circle"
ng-if="ctrl.downloaded && ctrl.message.thumbnail.preview == undefined">
<img ng-src="{{ ctrl.message.file.type | mimeType: false }}"/>
</div>
<div class="info">
<p>{{ctrl.message.file.name}}</p>
<p>{{ctrl.message.file.type | mimeType: true}}</p>
<p>{{ctrl.message.file.size | fileSize}}</p>
</div>
</div>
</div>

<!-- Ballot -->
<span ng-if="ctrl.type === 'ballot'"><em>Ballot messages are not yet supported.</em></span> <!-- TODO -->
6 changes: 5 additions & 1 deletion src/directives/message_media.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,18 @@ export default [
this.thumbnailDownloading = false;
this.downloaded = false;
this.timeout = null as ng.IPromise<void>;
this.isAnimGif = (this.message as threema.Message).type === 'file'
this.uploading = this.message.temporaryId !== undefined
&& this.message.temporaryId !== null;
this.isAnimGif = !this.uploading
&& (this.message as threema.Message).type === 'file'
&& (this.message as threema.Message).file.type === 'image/gif';
// do not show thumbnail in file messages (except anim gif
// if a thumbnail in file messages are available, the thumbnail
// will be shown in the file circle
this.showThumbnail = this.message.thumbnail !== undefined
&& ((this.message as threema.Message).type !== 'file'
|| this.isAnimGif);

this.thumbnail = null;

if (this.message.thumbnail !== undefined) {
Expand Down
65 changes: 35 additions & 30 deletions src/sass/components/_message_media.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,41 @@ $loading-ring-thickness: 5px;
height: 100%;
}

// up/downloading circle element
.circle {
height: $circle-size;
width: $circle-size;
background-color: grey;
outline: none;
position: relative;
border-radius: $circle-size / 2;
display: flex;
// centering element
&.center {
margin: 0 auto;
}
i,
img {
color: white;
margin: auto auto;
position: relative;
}
}

// Loading indicator
.loading.active {
display: block;
width: $circle-size - 2 * $loading-ring-thickness;
height: $circle-size - 2 * $loading-ring-thickness;
border: $loading-ring-thickness solid rgba(0, 0, 0, 0.1);
border-left-color: lightgreen;
animation: file-download-rotater 1.1s infinite linear;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}

// Thumbnails (Images, GIFs, Locations, ...)
.thumbnail {
// For absolute positioning of children
Expand Down Expand Up @@ -97,36 +132,6 @@ $loading-ring-thickness: 5px;
height: $circle-size;
@include mouse-hand;

.circle {
height: $circle-size;
width: $circle-size;
background-color: grey;
outline: none;
position: relative;
border-radius: $circle-size / 2;

display: flex;
i,
img {
color: white;
margin: auto auto;
position: relative;
}
}

// Loading indicator
.loading.active {
display: block;
width: $circle-size - 2 * $loading-ring-thickness;
height: $circle-size - 2 * $loading-ring-thickness;
border: $loading-ring-thickness solid rgba(0, 0, 0, 0.1);
border-left-color: lightgreen;
animation: file-download-rotater 1.1s infinite linear;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}

.message-text {
padding-top: 8px;
Expand Down

0 comments on commit 6fc1d3c

Please sign in to comment.