snapdrop/app/elements/buddy-finder/buddy-avatar.html

<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../file-sharing/file-input-behavior.html">
<link rel="import" href="../text-sharing/text-input-behavior.html">
<dom-module id="buddy-avatar">
    <template>
        <style>
        :host {
            display: block;
            @apply(--layout-vertical);
            @apply(--layout-center-center);
            width: 120px;
            height: 124px;
            cursor: pointer;
        }
        
        paper-icon-button {
            display: inline-block;
            width: 64px !important;
            height: 64px !important;
            border-radius: 50%;
            overflow: hidden;
            padding: 12px;
            margin-bottom: 4px;
            background-color: #4285f4;
            color: white;
        }
        
        :host:hover paper-icon-button {
            transform: scale(1.05);
        }
        
        .paper-font-subhead {
            text-align: center;
            margin-top: 0px;
            line-height: 18px;
        }
        
        .paper-font-body1 {
            text-align: center;
            width: 100%;
            font-size: 13px;
            color: grey;
            margin-top: 0px !important;
            line-height: 16px;
        }
        
        :host,
        .paper-font-subhead,
        .paper-font-body1 {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            width: 120px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        @media all and (min-height: 440px) {
            :host([only]) {
                padding: 20vh;
            }
        }
        
        .container {
            @apply(--layout-vertical);
            @apply(--layout-center);
            height: 112px;
            padding-top: 16px;
            display: block;
        }
        </style>
        <div class="container">
            <paper-icon-button icon="{{_displayIcon}}"></paper-icon-button>
            <div class="paper-font-subhead">{{_displayName}}</div>
            <div class="paper-font-body1">{{status}}</div>
        </div>
    </template>
    <script>
    'use strict';
    Polymer({
        is: 'buddy-avatar',
        behaviors: [Chat.FileInputBehavior, Chat.TextInputBehavior],
        properties: {
            contact: Object,
            _displayName: {
                computed: '_computeDisplayName(contact)'
            },
            _displayIcon: {
                computed: '_computeDisplayIcon(contact)'
            },
            status: {
                type: String,
                value: '',
            },
            defaultStatus: {
                computed: '_computeDefaultStatus(contact)'
            }
        },
        _computeDisplayName: function(contact) {
            if (!contact.name.os) {
                return contact.name;
            }
            return this._computeDeviceName(contact.name);
        },
        _computeDeviceName: function(contact) {
            if (contact.model) {
                return contact.os + ' ' + contact.model;
            }
            contact.os = contact.os.replace('Mac OS', 'Mac');
            return contact.os + ' ' + contact.browser;
        },
        _computeDisplayIcon: function(contact) {
            contact = contact.device || contact.name;
            if (contact.type === 'mobile') {
                return 'chat:phone-iphone';
            }
            if (contact.type === 'tablet') {
                return 'chat:tablet-mac';
            }
            return 'chat:desktop-mac';
        },
        _computeDefaultStatus: function(contact) {
            var status = contact.device ? this._computeDeviceName(contact.device) : '';
            this.status = status;
            return status;
        },
        attached: function() {
            this.async(function() {
                app.conn.addEventListener('file-offered', function(e) {
                    if (e.detail.to === this.contact.peerId) {
                        this.status = 'Waiting to accept...';
                    }
                }.bind(this), false);
                app.conn.addEventListener('upload-started', function(e) {
                    if (e.detail.to === this.contact.peerId) {
                        this.status = 'Uploading...';
                    }
                }.bind(this), false);
                app.conn.addEventListener('download-started', function(e) {
                    if (e.detail.from === this.contact.peerId) {
                        this.status = 'Downloading...';
                    }
                }.bind(this), false);
                app.conn.addEventListener('upload-complete', function(e) {
                    if (e.detail.from === this.contact.peerId) {
                        this.status = this.defaultStatus;
                    }
                }.bind(this), false);
                app.conn.addEventListener('download-complete', function(e) {
                    if (e.detail.from === this.contact.peerId) {
                        this.status = this.defaultStatus;
                    }
                }.bind(this), false);
                app.conn.addEventListener('file-declined', function(e) {
                    if (e.detail.from === this.contact.peerId) {
                        this.status = this.defaultStatus;
                    }
                }.bind(this), false);
                app.conn.addEventListener('upload-error', function(e) {
                    this.status = this.defaultStatus;
                }.bind(this), false);
            }, 200);
        }
    });
    </script>
</dom-module>