mirror of https://github.com/kern/filepizza
More logic for upload/download
Alex Kern
5 years ago
parent
981bd31253
commit
a0a1d8643c
@ -1,20 +0,0 @@
|
|||||||
workflow "Build on push" {
|
|
||||||
on = "push"
|
|
||||||
resolves = ["AWS deploy"]
|
|
||||||
}
|
|
||||||
|
|
||||||
action "Docker build, tag, and push" {
|
|
||||||
uses = "pangzineng/Github-Action-One-Click-Docker@master"
|
|
||||||
secrets = ["DOCKER_USERNAME", "DOCKER_PASSWORD"]
|
|
||||||
}
|
|
||||||
|
|
||||||
action "AWS deploy" {
|
|
||||||
uses = "actions/aws/cli@efb074ae4510f2d12c7801e4461b65bf5e8317e6"
|
|
||||||
needs = ["Docker build, tag, and push"]
|
|
||||||
secrets = [
|
|
||||||
"AWS_ACCESS_KEY_ID",
|
|
||||||
"AWS_SECRET_ACCESS_KEY",
|
|
||||||
]
|
|
||||||
args = "deploy --region us-west-2 create-deployment --application-name AppECS-filepizza-filepizza --deployment-config-name CodeDeployDefault.ECSAllAtOnce --deployment-group-name DgpECS-filepizza-filepizza --github-location repository=kern/filepizza,commitId=$GITHUB_REF"
|
|
||||||
runs = "aws"
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
|
|
||||||
export default class DownloadButton extends React.Component {
|
|
||||||
constructor() {
|
|
||||||
super()
|
|
||||||
this.onClick = this.onClick.bind(this)
|
|
||||||
}
|
|
||||||
|
|
||||||
onClick(e) {
|
|
||||||
this.props.onClick(e)
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<button className="download-button" onClick={this.onClick}>
|
|
||||||
Download
|
|
||||||
</button>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
DownloadButton.propTypes = {
|
|
||||||
onClick: React.PropTypes.func.isRequired,
|
|
||||||
}
|
|
||||||
@ -1,103 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import DownloadActions from '../actions/DownloadActions'
|
|
||||||
import DownloadStore from '../stores/DownloadStore'
|
|
||||||
import { formatSize } from '../util'
|
|
||||||
import ChromeNotice from './ChromeNotice'
|
|
||||||
import DownloadButton from './DownloadButton'
|
|
||||||
import ErrorPage from './ErrorPage'
|
|
||||||
import ProgressBar from './ProgressBar'
|
|
||||||
import Spinner from './Spinner'
|
|
||||||
|
|
||||||
export default class DownloadPage extends React.Component {
|
|
||||||
constructor() {
|
|
||||||
super()
|
|
||||||
this.state = DownloadStore.getState()
|
|
||||||
|
|
||||||
this._onChange = () => {
|
|
||||||
this.setState(DownloadStore.getState())
|
|
||||||
}
|
|
||||||
|
|
||||||
this.downloadFile = this.downloadFile.bind(this)
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
DownloadStore.listen(this._onChange)
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
DownloadStore.unlisten(this._onChange)
|
|
||||||
}
|
|
||||||
|
|
||||||
downloadFile() {
|
|
||||||
DownloadActions.requestDownload()
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
switch (this.state.status) {
|
|
||||||
case 'ready':
|
|
||||||
return (
|
|
||||||
<div className="page">
|
|
||||||
<h1>FilePizza</h1>
|
|
||||||
<Spinner
|
|
||||||
dir="down"
|
|
||||||
name={this.state.fileName}
|
|
||||||
size={this.state.fileSize}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ChromeNotice />
|
|
||||||
<p className="notice">
|
|
||||||
Peers: {this.state.peers} · Up:{' '}
|
|
||||||
{formatSize(this.state.speedUp)} · Down:{' '}
|
|
||||||
{formatSize(this.state.speedDown)}
|
|
||||||
</p>
|
|
||||||
<DownloadButton onClick={this.downloadFile} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
case 'requesting':
|
|
||||||
case 'downloading':
|
|
||||||
return (
|
|
||||||
<div className="page">
|
|
||||||
<h1>FilePizza</h1>
|
|
||||||
<Spinner
|
|
||||||
dir="down"
|
|
||||||
animated
|
|
||||||
name={this.state.fileName}
|
|
||||||
size={this.state.fileSize}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ChromeNotice />
|
|
||||||
<p className="notice">
|
|
||||||
Peers: {this.state.peers} · Up:{' '}
|
|
||||||
{formatSize(this.state.speedUp)} · Down:{' '}
|
|
||||||
{formatSize(this.state.speedDown)}
|
|
||||||
</p>
|
|
||||||
<ProgressBar value={this.state.progress} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
case 'done':
|
|
||||||
return (
|
|
||||||
<div className="page">
|
|
||||||
<h1>FilePizza</h1>
|
|
||||||
<Spinner
|
|
||||||
dir="down"
|
|
||||||
name={this.state.fileName}
|
|
||||||
size={this.state.fileSize}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<ChromeNotice />
|
|
||||||
<p className="notice">
|
|
||||||
Peers: {this.state.peers} · Up:{' '}
|
|
||||||
{formatSize(this.state.speedUp)} · Down:{' '}
|
|
||||||
{formatSize(this.state.speedDown)}
|
|
||||||
</p>
|
|
||||||
<ProgressBar value={1} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
|
|
||||||
default:
|
|
||||||
return <ErrorPage />
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,56 +1,108 @@
|
|||||||
import React from 'react'
|
import React, { useCallback, useEffect, useState } from 'react'
|
||||||
|
import { useWebRTC } from './WebRTCProvider'
|
||||||
|
import {
|
||||||
|
browserName,
|
||||||
|
browserVersion,
|
||||||
|
osName,
|
||||||
|
osVersion,
|
||||||
|
mobileVendor,
|
||||||
|
mobileModel,
|
||||||
|
} from 'react-device-detect'
|
||||||
|
import * as t from 'io-ts'
|
||||||
|
import { decodeMessage, Message, MessageType } from '../messages'
|
||||||
|
|
||||||
interface Props {
|
export default function Downloader({
|
||||||
|
uploaderPeerID,
|
||||||
|
}: {
|
||||||
uploaderPeerID: string
|
uploaderPeerID: string
|
||||||
}
|
}): JSX.Element {
|
||||||
|
const peer = useWebRTC()
|
||||||
|
|
||||||
const Downloader: React.FC<Props> = ({ uploaderPeerID }: Props) => {
|
const [password, setPassword] = useState('')
|
||||||
// const room = useRef<Room | null>(null)
|
const [shouldAttemptConnection, setShouldAttemptConnection] = useState(false)
|
||||||
// const peerData = usePeerData()
|
const [open, setOpen] = useState(false)
|
||||||
|
const [errorMessage, setErrorMessage] = useState<string | null>(null)
|
||||||
// useEffect(() => {
|
|
||||||
// if (room.current) return
|
useEffect(() => {
|
||||||
|
if (!shouldAttemptConnection) {
|
||||||
// room.current = peerData.connect(roomName)
|
return
|
||||||
// console.log(room.current)
|
}
|
||||||
// setInterval(() => console.log(room.current), 1000)
|
|
||||||
// room.current
|
const conn = peer.connect(uploaderPeerID, {
|
||||||
// .on('participant', (participant) => {
|
reliable: true,
|
||||||
// console.log(participant.getId() + ' joined')
|
})
|
||||||
// participant.newDataChannel()
|
|
||||||
|
conn.on('open', () => {
|
||||||
// participant
|
setOpen(true)
|
||||||
// .on('connected', () => {
|
|
||||||
// console.log('connected', participant.id)
|
const request: t.TypeOf<typeof Message> = {
|
||||||
// })
|
type: MessageType.Start,
|
||||||
// .on('disconnected', () => {
|
browserName: browserName,
|
||||||
// console.log('disconnected', participant.id)
|
browserVersion: browserVersion,
|
||||||
// })
|
osName: osName,
|
||||||
// .on('track', (event) => {
|
osVersion: osVersion,
|
||||||
// console.log('stream', participant.id, event.streams[0])
|
mobileVendor: mobileVendor,
|
||||||
// })
|
mobileModel: mobileModel,
|
||||||
// .on('message', (payload) => {
|
password,
|
||||||
// console.log(participant.id, payload)
|
}
|
||||||
// })
|
|
||||||
// .on('error', (event) => {
|
conn.send(request)
|
||||||
// console.error('peer', participant.id, event)
|
})
|
||||||
// participant.renegotiate()
|
|
||||||
// })
|
conn.on('data', (data) => {
|
||||||
|
try {
|
||||||
// console.log(participant)
|
const message = decodeMessage(data)
|
||||||
// participant.send(`hello there, I'm the downloader`)
|
switch (message.type) {
|
||||||
// })
|
case MessageType.Info:
|
||||||
// .on('error', (event) => {
|
console.log(message)
|
||||||
// console.error('room', roomName, event)
|
break
|
||||||
// })
|
|
||||||
|
|
||||||
// return () => {
|
|
||||||
// room.current.disconnect()
|
|
||||||
// room.current = null
|
|
||||||
// }
|
|
||||||
// }, [peerData])
|
|
||||||
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Downloader
|
case MessageType.Error:
|
||||||
|
console.error(message.error)
|
||||||
|
setErrorMessage(message.error)
|
||||||
|
conn.close()
|
||||||
|
break
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
console.error(err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
conn.on('close', () => {
|
||||||
|
setOpen(false)
|
||||||
|
setShouldAttemptConnection(false)
|
||||||
|
})
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (conn.open) conn.close()
|
||||||
|
}
|
||||||
|
}, [peer, password, shouldAttemptConnection])
|
||||||
|
|
||||||
|
const handleChangePassword = useCallback(
|
||||||
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setPassword(e.target.value)
|
||||||
|
},
|
||||||
|
[],
|
||||||
|
)
|
||||||
|
|
||||||
|
const handleSubmit = useCallback((ev) => {
|
||||||
|
ev.preventDefault()
|
||||||
|
setShouldAttemptConnection(true)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
if (open) {
|
||||||
|
return <div>Downloading</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
if (shouldAttemptConnection) {
|
||||||
|
return <div>Loading...</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form action="#" method="post" onSubmit={handleSubmit}>
|
||||||
|
{errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
|
||||||
|
<input type="password" value={password} onChange={handleChangePassword} />
|
||||||
|
<button>Start</button>
|
||||||
|
</form>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|||||||
@ -1,104 +0,0 @@
|
|||||||
import React from 'react'
|
|
||||||
import DropZone from './DropZone'
|
|
||||||
import Spinner from "./Spinner";
|
|
||||||
import Tempalink from "./Tempalink";
|
|
||||||
import UploadActions from "../actions/UploadActions";
|
|
||||||
import UploadStore from "../stores/UploadStore";
|
|
||||||
import socket from "filepizza-socket";
|
|
||||||
import { formatSize } from "../util";
|
|
||||||
|
|
||||||
export default class UploadPage extends React.Component {
|
|
||||||
constructor() {
|
|
||||||
super();
|
|
||||||
this.state = UploadStore.getState();
|
|
||||||
|
|
||||||
this._onChange = () => {
|
|
||||||
this.setState(UploadStore.getState());
|
|
||||||
};
|
|
||||||
|
|
||||||
this.uploadFile = this.uploadFile.bind(this);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
UploadStore.listen(this._onChange);
|
|
||||||
}
|
|
||||||
|
|
||||||
componentWillUnmount() {
|
|
||||||
UploadStore.unlisten(this._onChange);
|
|
||||||
}
|
|
||||||
|
|
||||||
uploadFile(file) {
|
|
||||||
UploadActions.uploadFile(file);
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSelectedFile(event) {
|
|
||||||
const files = event.target.files;
|
|
||||||
if (files.length > 0) {
|
|
||||||
UploadActions.uploadFile(files[0]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
switch (this.state.status) {
|
|
||||||
case "ready":
|
|
||||||
return (
|
|
||||||
<DropZone onDrop={this.uploadFile}>
|
|
||||||
<div className="page">
|
|
||||||
<Spinner dir="up" />
|
|
||||||
|
|
||||||
<h1>FilePizza</h1>
|
|
||||||
<p>Free peer-to-peer file transfers in your browser.</p>
|
|
||||||
<small className="notice">
|
|
||||||
We never store anything. Files only served fresh.
|
|
||||||
</small>
|
|
||||||
<p>
|
|
||||||
<label className="select-file-label">
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
onChange={this.handleSelectedFile}
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<span>select a file</span>
|
|
||||||
</label>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</DropZone>
|
|
||||||
);
|
|
||||||
|
|
||||||
case "processing":
|
|
||||||
return (
|
|
||||||
<div className="page">
|
|
||||||
<Spinner dir="up" animated />
|
|
||||||
|
|
||||||
<h1>FilePizza</h1>
|
|
||||||
<p>Processing...</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
case "uploading":
|
|
||||||
return (
|
|
||||||
<div className="page">
|
|
||||||
<h1>FilePizza</h1>
|
|
||||||
<Spinner
|
|
||||||
dir="up"
|
|
||||||
animated
|
|
||||||
name={this.state.fileName}
|
|
||||||
size={this.state.fileSize}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<p>Send someone this link to download.</p>
|
|
||||||
<small className="notice">
|
|
||||||
This link will work as long as this page is open.
|
|
||||||
</small>
|
|
||||||
<p>
|
|
||||||
Peers: {this.state.peers} · Up:{" "}
|
|
||||||
{formatSize(this.state.speedUp)}
|
|
||||||
</p>
|
|
||||||
<Tempalink
|
|
||||||
token={this.state.token}
|
|
||||||
shortToken={this.state.shortToken}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
const twilio = require('twilio')
|
|
||||||
const winston = require('winston')
|
|
||||||
|
|
||||||
if (process.env.TWILIO_SID && process.env.TWILIO_TOKEN) {
|
|
||||||
const twilioSID = process.env.TWILIO_SID
|
|
||||||
const twilioToken = process.env.TWILIO_TOKEN
|
|
||||||
var client = twilio(twilioSID, twilioToken)
|
|
||||||
winston.info('Using Twilio TURN service')
|
|
||||||
} else {
|
|
||||||
var client = null
|
|
||||||
}
|
|
||||||
|
|
||||||
let ICE_SERVERS = [
|
|
||||||
{
|
|
||||||
urls: 'stun:stun.l.google.com:19302',
|
|
||||||
},
|
|
||||||
]
|
|
||||||
|
|
||||||
if (process.env.ICE_SERVERS) {
|
|
||||||
ICE_SERVERS = JSON.parse(process.env.ICE_SERVERS)
|
|
||||||
}
|
|
||||||
|
|
||||||
const CACHE_LIFETIME = 5 * 60 * 1000 // 5 minutes
|
|
||||||
let cachedPromise = null
|
|
||||||
|
|
||||||
function clearCache() {
|
|
||||||
cachedPromise = null
|
|
||||||
}
|
|
||||||
|
|
||||||
exports.getICEServers = function() {
|
|
||||||
if (client == null) {
|
|
||||||
return Promise.resolve(ICE_SERVERS)
|
|
||||||
}
|
|
||||||
if (cachedPromise) {
|
|
||||||
return cachedPromise
|
|
||||||
}
|
|
||||||
|
|
||||||
cachedPromise = new Promise((resolve, reject) => {
|
|
||||||
client.tokens.create({}, (err, token) => {
|
|
||||||
if (err) {
|
|
||||||
winston.error(err)
|
|
||||||
return resolve(DEFAULT_ICE_SERVERS)
|
|
||||||
}
|
|
||||||
|
|
||||||
winston.info('Retrieved ICE servers from Twilio')
|
|
||||||
setTimeout(clearCache, CACHE_LIFETIME)
|
|
||||||
resolve(token.ice_servers)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
|
|
||||||
return cachedPromise
|
|
||||||
}
|
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
import * as t from 'io-ts'
|
||||||
|
import { pipe } from 'fp-ts/function'
|
||||||
|
import { fold } from 'fp-ts/Either'
|
||||||
|
|
||||||
|
export enum MessageType {
|
||||||
|
RequestInfo = 'REQUEST_INFO',
|
||||||
|
Info = 'INFO',
|
||||||
|
Start = 'START',
|
||||||
|
Chunk = 'CHUNK',
|
||||||
|
Pause = 'PAUSE',
|
||||||
|
Error = 'ERROR',
|
||||||
|
}
|
||||||
|
|
||||||
|
const RequestInfoMessage = t.type({
|
||||||
|
type: t.literal(MessageType.RequestInfo),
|
||||||
|
browserName: t.string,
|
||||||
|
browserVersion: t.string,
|
||||||
|
osName: t.string,
|
||||||
|
osVersion: t.string,
|
||||||
|
mobileVendor: t.string,
|
||||||
|
mobileModel: t.string,
|
||||||
|
password: t.string,
|
||||||
|
})
|
||||||
|
|
||||||
|
const InfoMessage = t.type({
|
||||||
|
type: t.literal(MessageType.Info),
|
||||||
|
files: t.array(
|
||||||
|
t.type({
|
||||||
|
fullPath: t.string,
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
})
|
||||||
|
|
||||||
|
const StartMessage = t.type({
|
||||||
|
type: t.literal(MessageType.Start),
|
||||||
|
browserName: t.string,
|
||||||
|
browserVersion: t.string,
|
||||||
|
osName: t.string,
|
||||||
|
osVersion: t.string,
|
||||||
|
mobileVendor: t.string,
|
||||||
|
mobileModel: t.string,
|
||||||
|
password: t.string,
|
||||||
|
})
|
||||||
|
|
||||||
|
const ChunkMessage = t.type({
|
||||||
|
type: t.literal(MessageType.Chunk),
|
||||||
|
// TODO(@kern): Chunk
|
||||||
|
})
|
||||||
|
|
||||||
|
const PauseMessage = t.type({
|
||||||
|
type: t.literal(MessageType.Pause),
|
||||||
|
// TODO(@kern): Pausing
|
||||||
|
})
|
||||||
|
|
||||||
|
const ErrorMessage = t.type({
|
||||||
|
type: t.literal(MessageType.Error),
|
||||||
|
error: t.string,
|
||||||
|
})
|
||||||
|
|
||||||
|
export const Message = t.union([
|
||||||
|
RequestInfoMessage,
|
||||||
|
InfoMessage,
|
||||||
|
StartMessage,
|
||||||
|
ChunkMessage,
|
||||||
|
PauseMessage,
|
||||||
|
ErrorMessage,
|
||||||
|
])
|
||||||
|
|
||||||
|
export function decodeMessage(data: any): t.TypeOf<typeof Message> {
|
||||||
|
const onFailure = (errors: t.Errors): t.TypeOf<typeof Message> => {
|
||||||
|
throw new Error(`${errors.length} error(s) found`)
|
||||||
|
}
|
||||||
|
|
||||||
|
const onSuccess = (mesg: t.TypeOf<typeof Message>) => mesg
|
||||||
|
|
||||||
|
return pipe(Message.decode(data), fold(onFailure, onSuccess))
|
||||||
|
}
|
||||||
@ -1,11 +0,0 @@
|
|||||||
// Borrowed from StackOverflow
|
|
||||||
// http://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript
|
|
||||||
export const formatSize = (bytes: number): string => {
|
|
||||||
if (bytes === 0) {
|
|
||||||
return '0 Bytes'
|
|
||||||
}
|
|
||||||
const k = 1000
|
|
||||||
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
|
|
||||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
|
||||||
return `${(bytes / Math.pow(k, i)).toPrecision(3)} ${sizes[i]}`
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue