web/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="A super simple, super fast way to share files, links and text between devices." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="recv.live" />
    <meta property="og:title" content="recv" />
    <meta property="og:image" content="https://recv.live/recv.png" />
    <meta
      property="og:description"
      content="A super simple, super fast way to share files, links and text between devices."
    />
    <meta property="twitter:card" content="summary_large_image" />
    <meta property="twitter:url" content="recv.live" />
    <meta property="twitter:title" content="recv" />
    <meta
      property="twitter:description"
      content="A super simple, super fast way to share files, links and text between devices."
    />
    <meta property="twitter:image" content="https://recv.live/recv.png" />
    <link rel="stylesheet" href="style.css" />
    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
    <link rel="icon" href="favicon.ico" />
    <link rel="manifest" href="manifest.json" />
    <meta name="apple-mobile-web-app-status-bar" content="#061433" />
    <meta name="theme-color" content="#061433" />
    <title>Recv</title>
  </head>
  <body>
    <div id="home" class="page">
      <h1>recv</h1>
      <div class="main">
        <button class="btn" onclick="createRoomAndConnect()">Create Room</button>
        <button class="flat-btn" style="margin-top: 0.5rem" onclick="showJoinScreen()">Join Room</button>
      </div>
    </div>
    <div id="join" class="page hidden">
      <h1>recv</h1>
      <form class="main" onsubmit="joinRoom(event)" autocomplete="off">
        <input id="joincode" type="text" inputmode="numeric" />
        <button type="submit" class="btn" style="margin-top: 0.5rem">Join Room</button>
        <button type="button" class="flat-btn" style="margin-top: 0.5rem" onclick="hideJoinScreen()">Go Back</button>
      </form>
    </div>
    <div id="room" class="page hidden">
      <h1>recv</h1>
      <div class="main">
        <p>The Room Code is:</p>
        <p id="code"></p>
        <button class="btn error" onclick="closeRoom()">Close Room</button>
        <button class="flat-btn" style="margin-top: 0.5rem" onclick="openMsgbox()">Open msgbox</button>
      </div>
    </div>
    <div id="chatbox" class="page hidden">
      <h1>msgbox</h1>
      <div class="main">
        <div id="msgbox-container" class="scrollable">
          <div id="msgbox"></div>
          <div id="droptarget">Drop Files to upload...</div>
        </div>
        <form id="form" class="input" onkeydown="checkSubmit(event)" onsubmit="sendMessage(event)">
          <textarea
            id="textarea"
            class="scrollable"
            placeholder="Ctrl+Enter to send"
            oninput="resizeTextArea(event)"
          ></textarea>
          <button class="flat-btn tiny" style="padding-left: 1rem">Send</button>
        </form>
        <button class="flat-btn" style="margin-top: 0.5rem" onclick="closeMsgbox()">Go Back</button>
      </div>
    </div>
    <a href="https://github.com/tusharsadhwani/recv" title="View source on GitHub">
      <svg class="github" viewBox="0 0 512 512">
        <path
          d="M255.968,5.329C114.624,5.329,0,120.401,0,262.353c0,113.536,73.344,209.856,175.104,243.872
            c12.8,2.368,17.472-5.568,17.472-12.384c0-6.112-0.224-22.272-0.352-43.712c-71.2,15.52-86.24-34.464-86.24-34.464
            c-11.616-29.696-28.416-37.6-28.416-37.6c-23.264-15.936,1.728-15.616,1.728-15.616c25.696,1.824,39.2,26.496,39.2,26.496
            c22.848,39.264,59.936,27.936,74.528,21.344c2.304-16.608,8.928-27.936,16.256-34.368c-56.832-6.496-116.608-28.544-116.608-127.008
            c0-28.064,9.984-51.008,26.368-68.992c-2.656-6.496-11.424-32.64,2.496-68c0,0,21.504-6.912,70.4,26.336
            c20.416-5.696,42.304-8.544,64.096-8.64c21.728,0.128,43.648,2.944,64.096,8.672c48.864-33.248,70.336-26.336,70.336-26.336
            c13.952,35.392,5.184,61.504,2.56,68c16.416,17.984,26.304,40.928,26.304,68.992c0,98.72-59.84,120.448-116.864,126.816
            c9.184,7.936,17.376,23.616,17.376,47.584c0,34.368-0.32,62.08-0.32,70.496c0,6.88,4.608,14.88,17.6,12.352
            C438.72,472.145,512,375.857,512,262.353C512,120.401,397.376,5.329,255.968,5.329z"
        />
      </svg>
    </a>
  </body>
  <script>
    // Initial Setup
    const DOMAIN = 'recv.live' // Change to your domain name, localhost:PORT for development
    const SECURE = true // Set to false during development

    const scheme = SECURE ? 'https' : 'http'
    const wsscheme = SECURE ? 'wss' : 'ws'
    const httpdomain = `${scheme}://${DOMAIN}`
    const wsdomain = `${wsscheme}://${DOMAIN}`

    const changeTheme = theme => {
      document.documentElement.style.setProperty('--bg', `var(--bg-${theme})`)
      document.documentElement.style.setProperty('--color', `var(--color-${theme})`)
    }

    const home = document.getElementById('home')
    const room = document.getElementById('room')
    const code = document.getElementById('code')
    const join = document.getElementById('join')
    const joincode = document.getElementById('joincode')
    const chatbox = document.getElementById('chatbox')
    const msgbox = document.getElementById('msgbox')
    const droptarget = document.getElementById('droptarget')
    const form = document.getElementById('form')
    const textarea = document.getElementById('textarea')

    let ws = null
    let imageDomain = null

    // Drag and drop support
    msgbox.ondragover = event => {
      event.preventDefault()
    }
    msgbox.ondragenter = event => {
      droptarget.style.opacity = 1
    }
    msgbox.ondragleave = event => {
      droptarget.style.opacity = 0
    }
    msgbox.ondrop = event => {
      event.preventDefault()

      const file = event.dataTransfer.files[0]
      const reader = new FileReader()
      reader.readAsArrayBuffer(file)
      droptarget.textContent = 'Uploading...'

      reader.addEventListener('loadend', async () => {
        const response = await fetch(`${httpdomain}/upload`, {
          method: 'post',
          body: file.name,
        })
        const preSignedUrl = await response.text()

        const uploadResponse = await fetch(preSignedUrl, {
          method: 'put',
          body: reader.result,
        })

        const fileUrl = new URL(preSignedUrl)
        fileUrl.search = ''
        sendLink(fileUrl.href)

        droptarget.style.opacity = 0
        droptarget.textContent = 'Drop Files to upload...'
      })
    }

    // Pages, Interactivity Setup
    const createRoom = async () => {
      changeTheme('dark')
      home.classList.add('hidden')
      room.classList.remove('hidden')

      const resp = await fetch(`${httpdomain}/connect`)
      const roomCode = await resp.text()

      return roomCode
    }

    const connect = async (roomCode, text) => {
      await setupImageDomain()

      code.textContent = roomCode
      ws = new WebSocket(`${wsdomain}/ws?code=${roomCode}`)
      if (text) {
        ws.onopen = () => {
          addText(text)
        }
      }
      ws.onmessage = addMessage
      // TODO: add onclose, for error handling
    }
    const createRoomAndConnect = async text => {
      const roomCode = await createRoom()
      await connect(roomCode, text)
    }
    const setupImageDomain = async () => {
      // Get a fake pre-signed URL to get S3 hostname
      const response = await fetch(`${httpdomain}/upload`, {
        method: 'post',
        body: 'test',
      })
      const preSignedUrl = await response.text()
      const fileUrl = new URL(preSignedUrl)

      imageDomain = fileUrl.host
    }

    const showJoinScreen = () => {
      home.classList.add('hidden')
      join.classList.remove('hidden')
      setTimeout(() => joincode.focus(), 300)
    }

    const hideJoinScreen = () => {
      home.classList.remove('hidden')
      join.classList.add('hidden')
    }

    const joinRoom = event => {
      event.preventDefault()
      changeTheme('dark')
      join.classList.add('hidden')
      chatbox.classList.remove('hidden')

      const roomCode = joincode.value
      connect(roomCode)
    }

    const closeRoom = () => {
      changeTheme('main')
      home.classList.remove('hidden')
      room.classList.add('hidden')

      code.textContent = ''
      msgbox.textContent = ''
      ws.close()
      ws = null
    }

    const openMsgbox = () => {
      room.classList.add('hidden')
      chatbox.classList.remove('hidden')
    }
    const closeMsgbox = () => {
      room.classList.remove('hidden')
      chatbox.classList.add('hidden')
    }

    const resizeTextArea = () => {
      const text = textarea.value
      const lineCount = text.split('\n').length
      const maxCount = 5

      const newHeight = Math.min(maxCount, lineCount)
      textarea.style.height = `calc(${newHeight * 1.25}rem + 3px)`
    }

    const checkSubmit = event => {
      if (event.ctrlKey && event.keyCode === 13) form.dispatchEvent(new Event('submit'))
    }

    const sendMessage = event => {
      event.preventDefault()
      const text = textarea.value.trimEnd()
      sendText(text)

      textarea.value = ''
      resizeTextArea()
    }
    const addMessage = event => {
      const data = event.data
      if (data.includes(imageDomain)) {
        addLink(data)
      } else {
        addText(data)
      }
    }
    const sendText = text => {
      ws.send(text)
      addText(text)
    }
    const addText = text => {
      const textLine = document.createElement('div')
      textLine.textContent += text
      msgbox.appendChild(textLine)
    }
    const sendLink = link => {
      ws.send(link)
      addLink(link)
    }
    const addLink = link => {
      const linkBlock = document.createElement('div')
      linkBlock.textContent = 'Uploaded file: '
      const linkTag = document.createElement('a')
      linkTag.href = link
      linkTag.textContent = 'Click to download'
      linkBlock.appendChild(linkTag)
      msgbox.appendChild(linkBlock)
    }

    // Handling web share via PWA
    const webShare = async text => {
      createRoomAndConnect(text)
    }

    const parsedUrl = new URL(window.location)
    const text = parsedUrl.searchParams.get('text')
    if (text) {
      webShare(text.trimEnd())
    }

    // Service worker, for the PWA to work
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker
          .register('./serviceWorker.js')
          .catch(err => console.log('service worker not registered', err))
      })
    }
  </script>
</html>