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="../file-sharing/file-input.html">
<link rel="import" href="user-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);
            overflow: hidden;
            position: relative;
            height: 100%;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            margin: 0;
        }
        
        .buddies {
            z-index: 1;
            @apply(--layout-horizontal);
            @apply(--layout-center-center);
            @apply(--layout-wrap);
        }
        
        .buddy {
            cursor: pointer;
        }
        
        .me {
            position: absolute;
            bottom: 24px;
            left: 50%;
            margin-left: -180px;
        }
        
        .explanation {
            @apply(--paper-font-headline);
            color: #4285f4;
            text-align: center;
        }
        </style>
        <div class="buddies">
            <template is="dom-repeat" items="{{buddies}}">
                <file-input on-file-selected="_fileSelected">
                    <user-avatar contact="{{item}}" class="buddy"></user-avatar>
                </file-input>
            </template>
        </div>
        <div hidden$="{{buddies.length}}" class="explanation">
            Open this page on another device
            <wbr>to share files.
        </div>
        <personal-avatar class="me"></personal-avatar>
        <!-- <iron-ajax id="ajax" auto url="https://yawim.com/findbuddies/{{me}}" handle-as="json" last-response="{{buddies}}"></iron-ajax> -->
    </template>
    <script>
    'use strict';
    Polymer({
        is: 'buddy-finder',
        properties: {
            buddies: {
                type: Array,
                value: []
            },
            me: {
                type: String,
            }
        },
        attached: function() {
            //Ask server every second for changes
            var ajax = this.$.ajax;

            function request() {
                //ajax.generateRequest();
            }
            var intervalId = setInterval(request, 1000);
            document.addEventListener('visibilitychange', function() {
                if (document.hidden) {
                    clearInterval(intervalId);
                    intervalId = 0;
                } else {
                    if (!intervalId) {
                        intervalId = setInterval(request, 1000);
                    }
                }
            });
        },
        _fileSelected: function(e) {
            var peerId = e.model.item.peerId;
            var file = e.detail;
            app.p2p.sendFile(peerId, file);
        }
    });
    </script>
</dom-module>