added self-hosting instructions #58

Author: nico-martin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "youtube-player",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "An audio player for YouTube videos",
   "repository": {
     "type": "git",

readme.md

@@ -5,3 +5,23 @@ An audio player for YouTube videos: https://ytaud.io/
 YTAudio is a progressive web app that allows you to listen to YouTube videos in the background. It runs in the browser and uses modern browser-interfaces (like the [MediaSession API](https://dev.to/nicomartin/media-session-api-c1j), the Web Share API and the Share Target API) in combination with a ServiceWorker and a Web App Manifest to deliver an App-Like User Experience.
 
 [more on dev.to](https://dev.to/nicomartin/how-to-create-a-progressive-audio-player-with-react-hooks-31l1)
+
+## Development
+YTAudio is a React SPA. You can clone the repository, install the dependencies and then run a production build that creates the production ready bundles or start the development server
+  
+  ```bash
+  git clone https://github.com/nico-martin/yt-audio.git
+  npm install
+  # production bundle
+  npm run prod
+  # development server
+  npm run dev
+```
+## Self-Hosting
+YTAudio is a static SPA and can be hosted on any server that supports static file hosting.  
+Just make sure that while you bundle the application, you defined the correct `SOURCE_URL` in you env variables.
+
+The "YTAudio Source" is a separate nodeJS application that can be found here:  
+[https://github.com/nico-martin/yt-audio-source](https://github.com/nico-martin/yt-audio-source)
+
+Please make sure the Source-App is running and define the correct `SOURCE_URL` in your env variables before you compile the application.

src/app/Audio.tsx

@@ -32,6 +32,11 @@ const Audio = ({ className = '' }: { className?: string }) => {
     <div className={`${className} audio audio--error`}>
       <Icon icon="warning" className="audio__icon" />
       <p className="audio__error-text">{audio.info}</p>
+      <p style={{ margin: '0.5rem 0' }}>
+        Recently, some video information cannot be retrieved. I assume that this
+        is due to usage restrictions with the Youtube API. Unfortunately, there
+        is nothing I can do about it.
+      </p>
       <p className="audio__error-reload">
         <button
           className="audio__error-reload-button"

src/app/Player/Player.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Audio } from '@common/types';
+import { getSourceUrl } from '@common/url';
 import './Player.css';
 import useAudio from '../hooks/useAudio';
 import useMediaSession from '../hooks/useMediaSession';
@@ -26,7 +27,7 @@ const Player = ({ source, className = '' }: Props) => {
 
   const audio = useAudio({
     src: useProxy
-      ? `https://yt-source.nico.dev/play/${encodeURIComponent(source.url)}`
+      ? `${getSourceUrl()}play/${encodeURIComponent(source.url)}`
       : source.url,
     setError: (error) => {
       if (useProxy) {
@@ -39,7 +40,7 @@ const Player = ({ source, className = '' }: Props) => {
       return {
         mimeType,
         src: useProxy
-          ? `https://yt-source.nico.dev/play/${encodeURIComponent(
+          ? `${getSourceUrl()}play/${encodeURIComponent(
               source.formats[mimeType]
             )}`
           : source.formats[mimeType],

src/app/common/api.ts

@@ -1,5 +1,6 @@
 import ApiFetch from '@common/apiFetch';
 import { Audio } from '@common/types';
+import { getSourceUrl } from '@common/url';
 
 const apiFetch = new ApiFetch();
 
@@ -9,8 +10,18 @@ interface ServerRestart {
   doRestart: boolean;
 }
 
-export const getServerRestart = () =>
-  apiFetch.get<ServerRestart>('https://restart-source.ytaud.io/restart.php');
-
+export const getServerRestart = () => {
+  const restartUrl = process.env.RESTART_URL;
+  if (!restartUrl) {
+    return Promise.resolve({
+      data: {
+        serverIsRunning: true,
+        restartInProgress: true,
+        doRestart: false,
+      },
+    });
+  }
+  return apiFetch.get<ServerRestart>(restartUrl);
+};
 export const getAudioSource = (videoID: string) =>
-  apiFetch.get<Audio>(`https://source-2.ytaud.io/${videoID}/`);
+  apiFetch.get<Audio>(`${getSourceUrl()}${videoID}/`);

src/app/common/url.ts

@@ -0,0 +1,5 @@
+const trailingSlash = (string: string) => {
+  return string.endsWith('/') ? string : string + '/';
+};
+
+export const getSourceUrl = () => trailingSlash(process.env.SOURCE_URL);

webpack.config.js

@@ -112,6 +112,14 @@ module.exports = (env) => {
           },
         ],
       }),
+      new webpack.DefinePlugin({
+        'process.env.SOURCE_URL': JSON.stringify(
+          process.env.SOURCE_URL || 'https://yt-source.nico.dev'
+        ),
+        'process.env.RESTART_URL': JSON.stringify(
+          process.env.RESTART_URL || ''
+        ),
+      }),
       ...(dev ? [new webpack.SourceMapDevToolPlugin({})] : []),
       new CleanWebpackPlugin(),
       ...(!dev