mirror of
https://github.com/schlagmichdoch/PairDrop.git
synced 2025-05-01 03:59:13 -04:00
Lots of small improvements, websockets fallback
This commit is contained in:
Robin Linus
parent
e5eab64c6b
commit
22be7c5cb9
35 changed files with 2672 additions and 916 deletions
|
|
@ -1,97 +1,100 @@
|
|||
<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="../../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 {
|
||||
display: block;
|
||||
background-color: white;
|
||||
background-color: transparent;
|
||||
@apply(--layout-fit);
|
||||
@apply(--layout-horizontal);
|
||||
@apply(--layout-center-center);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.paper-font-display1 {
|
||||
color: black;
|
||||
text-align: center;
|
||||
margin-bottom: 16px;
|
||||
display: none;
|
||||
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;
|
||||
}
|
||||
|
||||
.circles {
|
||||
position: absolute;
|
||||
bottom: -50px;
|
||||
left: 50%;
|
||||
width: 1140px;
|
||||
margin-left: -570px;
|
||||
height: 700px;
|
||||
transform-origin: 570px 570px;
|
||||
animation: grow 1.5s ease-out;
|
||||
fill: transparent;
|
||||
}
|
||||
|
||||
.me {
|
||||
position: absolute;
|
||||
bottom: 30px;
|
||||
bottom: 24px;
|
||||
left: 50%;
|
||||
margin-left: -60px;
|
||||
margin-left: -180px;
|
||||
}
|
||||
|
||||
.explanation {
|
||||
@apply(--paper-font-headline);
|
||||
color: #4285f4;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
<div class="paper-font-display1">People near by</div>
|
||||
<div class="buddies">
|
||||
<template is="dom-repeat" items="{{buddies}}">
|
||||
<file-input on-file-selected="_fileDropped">
|
||||
<user-avatar contact="{{item.peerId}}" class="buddy"></user-avatar>
|
||||
<file-input on-file-selected="_fileSelected">
|
||||
<user-avatar contact="{{item}}" class="buddy"></user-avatar>
|
||||
</file-input>
|
||||
</template>
|
||||
</div>
|
||||
<user-avatar contact="{{me}}" class="me"></user-avatar>
|
||||
<svg class="circles" viewBox="-0.5 -0.5 1140 700">
|
||||
<circle class="circle" cx="570" cy="570" r="120" stroke="rgba(160,160,160,.15)"></circle>
|
||||
<circle class="circle" cx="570" cy="570" r="210" stroke="rgba(160,160,160,.2)"></circle>
|
||||
<circle class="circle" cx="570" cy="570" r="300" stroke="rgba(160,160,160,.3)"></circle>
|
||||
<circle class="circle" cx="570" cy="570" r="390" stroke="rgba(160,160,160,.35)"></circle>
|
||||
<circle class="circle" cx="570" cy="570" r="480" stroke="rgba(160,160,160,.4)"></circle>
|
||||
<circle class="circle" cx="570" cy="570" r="570" stroke="rgba(160,160,160,.43)"></circle>
|
||||
</svg>
|
||||
<iron-ajax id="ajax" auto url="https://yawim.com/findbuddies/{{me}}" handle-as="json" last-response="{{buddies}}"></iron-ajax>
|
||||
<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: Array,
|
||||
buddies: {
|
||||
type: Array,
|
||||
value: []
|
||||
},
|
||||
me: {
|
||||
type: String,
|
||||
}
|
||||
},
|
||||
attached: function() {
|
||||
//Ask server every second for changes
|
||||
setInterval(function() {
|
||||
this.$.ajax.generateRequest();
|
||||
}.bind(this), 1000);
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
_fileDropped: function(e) {
|
||||
_fileSelected: function(e) {
|
||||
var peerId = e.model.item.peerId;
|
||||
var file = e.detail;
|
||||
app.p2p.connectToPeer(peerId, function() {
|
||||
app.p2p.sendFile(peerId, file);
|
||||
});
|
||||
console.log('Send:', file);
|
||||
console.log('To:', peerId);
|
||||
app.p2p.sendFile(peerId, file);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
41
app/elements/buddy-finder/personal-avatar.html
Normal file
41
app/elements/buddy-finder/personal-avatar.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
|
||||
<link rel="import" href="../../styles/icons.html">
|
||||
<dom-module id="personal-avatar">
|
||||
<template>
|
||||
<style>
|
||||
:host {
|
||||
@apply(--layout-vertical);
|
||||
@apply(--layout-center);
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
iron-icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
color: #4285f4;
|
||||
}
|
||||
|
||||
.paper-font-body1 {
|
||||
font-size: 13px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.discover {
|
||||
color: #4285f4;
|
||||
}
|
||||
</style>
|
||||
<iron-icon icon="chat:wifi-tethering"></iron-icon>
|
||||
<div class="paper-font-body1">
|
||||
SnapDrop lets you share instantly with people near by.
|
||||
</div>
|
||||
<div class="paper-font-body1 discover">
|
||||
Allow me to be discovered by: Everyone in this network.
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
'use strict';
|
||||
Polymer({
|
||||
is: 'personal-avatar'
|
||||
});
|
||||
</script>
|
||||
</dom-module>
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<link rel="import" href="../contact-item/anonymous-contact-behavior.html">
|
||||
<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
|
||||
<dom-module id="user-avatar">
|
||||
<template>
|
||||
<style>
|
||||
|
|
@ -9,35 +9,121 @@
|
|||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
|
||||
paper-icon-button {
|
||||
display: inline-block;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
width: 64px !important;
|
||||
height: 64px !important;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
background: #ccc;
|
||||
@apply(--shadow-elevation-2dp);
|
||||
padding: 12px;
|
||||
margin-bottom: 4px;
|
||||
background-color: #4285f4;
|
||||
color: white;
|
||||
}
|
||||
.paper-font-subhead{
|
||||
text-align: center;
|
||||
|
||||
:host:hover paper-icon-button {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.paper-font-subhead {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.paper-font-body1 {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
color: grey;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
:host,
|
||||
.paper-font-subhead,
|
||||
.paper-font-body1 {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
margin: 4px;
|
||||
}
|
||||
</style>
|
||||
<div class="avatar" id="avatar" item-icon></div>
|
||||
<paper-icon-button icon="{{_displayIcon}}"></paper-icon-button>
|
||||
<div class="paper-font-subhead">{{_displayName}}</div>
|
||||
<div class="paper-font-body1">{{status}}</div>
|
||||
</template>
|
||||
<script>
|
||||
'use strict';
|
||||
Polymer({
|
||||
is: 'user-avatar',
|
||||
behaviors:[Chat.AnonymousContactBehavior],
|
||||
observers:['_computeBackgroundImg(contact.*)'],
|
||||
_computeBackgroundImg:function(){
|
||||
console.log('avatar changed');
|
||||
var avatar = this.anonymousAccount(this.contact).avatar;
|
||||
var style = this.$.avatar.style;
|
||||
style.backgroundImage='url('+avatar.url+')';
|
||||
style.backgroundPosition=avatar.left+'px '+avatar.top+'px';
|
||||
properties: {
|
||||
contact: Object,
|
||||
_displayName: {
|
||||
computed: '_computeDisplayName(contact)'
|
||||
},
|
||||
_displayIcon: {
|
||||
computed: '_computeDisplayIcon(contact)'
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
value: ''
|
||||
}
|
||||
},
|
||||
_computeDisplayName: function(contact) {
|
||||
contact = contact.name;
|
||||
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.name;
|
||||
if (contact.type === 'mobile') {
|
||||
return 'chat:phone-iphone';
|
||||
}
|
||||
if (contact.type === 'tablet') {
|
||||
return 'chat:tablet-mac';
|
||||
}
|
||||
|
||||
return 'chat:desktop-mac';
|
||||
},
|
||||
attached: function() {
|
||||
this.async(function() {
|
||||
app.p2p.addEventListener('file-offered', function(e) {
|
||||
if (e.detail.to === this.contact.peerId) {
|
||||
this.status = 'Waiting to accept...';
|
||||
}
|
||||
}.bind(this), false);
|
||||
app.p2p.addEventListener('upload-started', function(e) {
|
||||
if (e.detail.to === this.contact.peerId) {
|
||||
this.status = 'Uploading...';
|
||||
}
|
||||
}.bind(this), false);
|
||||
app.p2p.addEventListener('download-started', function(e) {
|
||||
if (e.detail.from === this.contact.peerId) {
|
||||
this.status = 'Downloading...';
|
||||
}
|
||||
}.bind(this), false);
|
||||
app.p2p.addEventListener('upload-complete', function(e) {
|
||||
if (e.detail.from === this.contact.peerId) {
|
||||
this.status = '';
|
||||
}
|
||||
}.bind(this), false);
|
||||
app.p2p.addEventListener('download-complete', function(e) {
|
||||
if (e.detail.from === this.contact.peerId) {
|
||||
this.status = '';
|
||||
}
|
||||
}.bind(this), false);
|
||||
app.p2p.addEventListener('file-declined', function(e) {
|
||||
if (e.detail.from === this.contact.peerId) {
|
||||
this.status = '';
|
||||
}
|
||||
}.bind(this), false);
|
||||
app.p2p.addEventListener('upload-error', function(e) {
|
||||
this.status = '';
|
||||
}.bind(this), false);
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue