Connect through web

backend/index.ts

@@ -23,10 +23,12 @@ app.prepare().then(() => {
   })
 
   // Sorry I don't know another way
-  let publicFolder = path.join(__dirname, '/public')
+  let publicFolder = __dirname
   let distPos = publicFolder.lastIndexOf("dist");
   if (distPos != -1)
-    publicFolder = publicFolder.substring(0, distPos) + publicFolder.substring(distPos+4, publicFolder.length);
+    publicFolder = path.join(publicFolder.substring(0, distPos), '/public/');
+
+  console.log(publicFolder)
 
   server.use(express.static(publicFolder))
 

config.ts

@@ -3,5 +3,5 @@ export default {
   hostPassword: process.env.HOST_PASSWORD || "1234",
   maxDelay: parseInt(process.env.MAX_DELAY!) || 5000,
   clientVersionRequirements: "0.4.x",
-  clientRecommendedVersion: "0.4.0"
+  clientRecommendedVersion: "0.4.1"
 }

package.json

@@ -8,7 +8,8 @@
     "build:server": "tsc --project tsconfig.server.json",
     "build:next": "next build",
     "build": "yarn run build:next && yarn run build:server",
-    "postinstall": "yarn run build"
+    "postinstall": "yarn run build",
+    "web-only": "next dev"
   },
   "dependencies": {
     "express": "^4.17.2",

src/components/song.tsx

@@ -1,14 +1,13 @@
 import SongInfo from '../../backend/web-shared/songInfo'
 import styles from '../styles/Song.module.css'
 import spotStyles from '../styles/Spot.module.css'
-import Image from 'next/image'
 
 const Song = (props: {song: SongInfo | undefined}) => {
   return (
     <div className={`${styles.song} ${spotStyles.box}`}>
-      <Image src={props.song?.image || "images/NoSong.png"} className={styles.image}></Image>
+      <img src={props.song?.image || "images/NoSong.png"} className={styles.image}></img>
       <div className={`${styles.text} ${props.song?.paused ? "" : styles.playing}`}>{props.song?.name}</div>
-      <Image className={`${(props.song?.paused || props.song?.paused===undefined) ? styles.none : ""} ${styles.playingImg}`} src={"images/Playing.gif"}></Image>
+      <img className={`${(props.song?.paused || props.song?.paused===undefined) ? styles.none : ""} ${styles.playingImg}`} src={"images/Playing.gif"}></img>
     </div>
   )
 }

src/pages/index.tsx

@@ -4,6 +4,7 @@ import { Router, useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import { io } from 'socket.io-client'
 import SongInfo from '../../backend/web-shared/songInfo'
+import config from '../../config'
 import ClientList from '../components/clientList'
 import Header from '../components/header'
 import Song from '../components/song'
@@ -37,11 +38,22 @@ const Index: NextPage = () => {
       <br/>
       <ClientList listeners={clients}></ClientList>
       <br/><br/><br/>
+      <button className={styles.button} onClick={() => {
+        window.open(`spotify:listentogether:${encodeURIComponent(typeof location !== 'undefined' ? location.protocol + '//' + location.host : "")}`, '_self')
+      }}>Listen with them!</button>
+      <br/>
       <Link href="/instructions" passHref>
-        <button className={styles.button} onClick={() => Router}>Listen with them!</button>
+        <button className={styles.button + " " + styles.subButton}>Download</button>
       </Link>
       <br/><br/><br/>
     </div>
+    <div className={styles.footer}>
+      <a href='https://github.com/FlafyDev/spotify-listen-together'>
+        <img src='/images/Github.png' width={64}></img>
+      </a>
+      <label>Made by <a href='https://github.com/FlafyDev'>FlafyDev</a></label>
+      <label>Recommended client v{config.clientRecommendedVersion}</label>
+    </div>
   </div>
 }
 

src/pages/instructions.tsx

@@ -55,16 +55,16 @@ const Instructions: NextPage = () => {
         <div className={styles.text+" "+styles.left+" "+styles.instructionsContainer}>
           <div>
             {"1. Open Listen Together's menu by pressing the button on the top left."}<br/>
-            <Image src="images/Instruction1.png"></Image><br/><br/>
+            <img src="images/Instruction1.png"></img><br/><br/>
           </div>
           <div>
             {"2. Select \"Join a server\""}<br/>
-              <Image src="images/Instruction2.png"></Image><br/><br/>
+              <img src="images/Instruction2.png"></img><br/><br/>
           </div>
           <div>
             {"3. Enter the URL and your name"}<br/>
             <div className={styles.instruction2Container}>
-              <Image src="/images/Instruction3.png"></Image>
+              <img src="/images/Instruction3.png"></img>
               <span className={styles.urlValue}>
                 {typeof location !== 'undefined' ? location.protocol + '//' + location.host : ""}
               </span>

src/styles/Index.module.css

@@ -16,6 +16,7 @@
   display: flex;
   align-items: center;
   flex-direction: column;
+  min-height: 70vh;
 }
 
 .button {
@@ -28,10 +29,19 @@
   cursor: pointer;
 }
 
+.subButton {
+  background-color: #c84cc8;
+  font-size: 20px;
+}
+
 .button:active {
   background-color: #14a748;
 }
 
+.subButton:active {
+  background-color: #a53ea5;
+}
+
 .code {
   width: 90vw;
   margin: 0 5px;
@@ -79,4 +89,16 @@
     height: 12px;
     width: 142px;
   }
+}
+
+.footer {
+  background-color: #1f1919;
+  height: 10vh;
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.footer > * {
+  padding: 0 10px;
 }

src/styles/globals.css

@@ -12,8 +12,7 @@ body {
 }
 
 body * {
-  font-family: Arial, Helvetica, sans-serif;
-  font-family: 'Gotham';
+  font-family:  'Gotham', Arial, Helvetica, sans-serif;
   color: white;
 }