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

<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/paper-styles/paper-styles.html">
<link rel="import" href="buddy-avatar.html">
<link rel="import" href="personal-avatar.html">
<dom-module id="buddy-finder">
    <template>
        <style>
        :host {
            background-color: transparent;
            @apply(--layout-fit);
            @apply(--layout-horizontal);
            @apply(--layout-center-center);
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            margin: 0;
            --paper-tooltip: {
                font-size: 14px;
                background-color: #4285f4;
            }
        }
        
        .buddies {
            z-index: 1;
            @apply(--layout-horizontal);
            @apply(--layout-center-center);
            @apply(--layout-wrap);
        }
        
        .explanation {
            @apply(--paper-font-headline);
            color: #4285f4;
            text-align: center;
            cursor: default;
        }
        
        .short {
            font-size: 14px;
            line-height: 20px;
            color: #727272;
        }
        
        .short a {
            color: #4285f4;
            text-decoration: none;
        }
        
        .explanation:hover a {
            transform: scale(1.1);
        }
        
        @media all and (max-width: 600px) {
            .explanation {
                width: 340px;
            }
        }
        
        @media all and (max-height: 440px) {
            .buddies {
                padding-top: 56px;
                @apply(--layout-self-start);
            }
        }
        
        @media all and (max-height: 600px) {
            .buddies[two-lines] {
                padding-top: 56px;
                @apply(--layout-self-start);
            }
        }
        
        .explanation2 {
            display: none;
            position: absolute;
            width: 296px;
            margin-left: -148px;
            left: 50%;
            @apply(--paper-font-title);
            color: rgba(66, 133, 244, 0.65);
            text-align: center;
            opacity: 0;
            -webkit-transition: opacity 500ms ease-out;
            -moz-transition: opacity 500ms ease-out;
            -o-transition: opacity 500ms ease-out;
            transition: opacity 500ms ease-out;
            z-index: 0;
        }
        
        @media all and (min-height: 441px) and (max-height: 559px) {
            .explanation2 {
                display: block;
                top: 64px;
                opacity: 1;
            }
        }
        
        @media all and (min-height: 560px) {
            .explanation2 {
                display: block;
                top: 128px;
                opacity: 1;
            }
        }
        </style>
        <div class="explanation2" hidden$="{{!_showExplanation}}">
            {{_clickExplanation1}} Device to send File.
            <br> {{_clickExplanation2}} to send a Text.
        </div>
        <div class="buddies" two-lines$="{{twoLinesOfBuddies}}">
            <template is="dom-repeat" items="{{buddies}}">
                <buddy-avatar on-file-selected="_fileSelected" only$="{{!buddies.1}}" contact="{{item}}"></buddy-avatar>
            </template>
        </div>
        <div hidden$="{{buddies.0}}" class="explanation">
            Open Snapdrop on other devices to send files.
            <div class="short">
                Short link: <a href="http://yg.gl" target="_blank">yg.gl</a>
            </div>
        </div>
        <personal-avatar class="me"></personal-avatar>
    </template>
    <script>
    'use strict';
    (function() {
        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        Polymer({
            is: 'buddy-finder',
            properties: {
                buddies: {
                    type: Array,
                    notify: true
                },
                me: {
                    type: String,
                },
                _showExplanation: {
                    computed: '_computeShowExplanation(buddies.length)',
                    value: false
                },
                twoLinesOfBuddies: {
                    value: false
                },
                _clickExplanation1: {
                    value: (function() {
                        if (isMobile) {
                            return 'Tap';
                        } else {
                            return 'Click';
                        }
                    })
                },
                _clickExplanation2: {
                    value: (function() {
                        if (isMobile) {
                            return 'Long Press';
                        } else {
                            return 'Right Click';
                        }
                    })
                }
            },
            observers: [
                '_buddiesChanged(buddies.splices)'
            ],
            _fileSelected: function(e) {
                var peerId = e.model.item.peerId;
                var file = e.detail;
                app.conn.sendFile(peerId, file);
            },
            _computeShowExplanation: function(nBuddies) {
                if (!nBuddies || nBuddies === 0) {
                    return false;
                }
                if (nBuddies < 3) {
                    return true;
                }
            },
            _buddiesChanged: function() {
                var length = window.innerWidth / 120;
                this.set('twoLinesOfBuddies', (this.buddies.length > length));
            }
        });
    }());
    </script>
</dom-module>