Skip to content

Commit be716dc

Browse files
committed
added self-hosting instructions #58
1 parent fb6f8ad commit be716dc

File tree

7 files changed

+57
-7
lines changed

7 files changed

+57
-7
lines changed

package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "youtube-player",
3-
"version": "1.0.9",
3+
"version": "1.0.10",
44
"description": "An audio player for YouTube videos",
55
"repository": {
66
"type": "git",

readme.md

+20
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,23 @@ An audio player for YouTube videos: https://ytaud.io/
55
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.
66

77
[more on dev.to](https://dev.to/nicomartin/how-to-create-a-progressive-audio-player-with-react-hooks-31l1)
8+
9+
## Development
10+
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
11+
12+
```bash
13+
git clone https://github.com/nico-martin/yt-audio.git
14+
npm install
15+
# production bundle
16+
npm run prod
17+
# development server
18+
npm run dev
19+
```
20+
## Self-Hosting
21+
YTAudio is a static SPA and can be hosted on any server that supports static file hosting.
22+
Just make sure that while you bundle the application, you defined the correct `SOURCE_URL` in you env variables.
23+
24+
The "YTAudio Source" is a separate nodeJS application that can be found here:
25+
[https://github.com/nico-martin/yt-audio-source](https://github.com/nico-martin/yt-audio-source)
26+
27+
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

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

src/app/Player/Player.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import { Audio } from '@common/types';
3+
import { getSourceUrl } from '@common/url';
34
import './Player.css';
45
import useAudio from '../hooks/useAudio';
56
import useMediaSession from '../hooks/useMediaSession';
@@ -26,7 +27,7 @@ const Player = ({ source, className = '' }: Props) => {
2627

2728
const audio = useAudio({
2829
src: useProxy
29-
? `https://yt-source.nico.dev/play/${encodeURIComponent(source.url)}`
30+
? `${getSourceUrl()}play/${encodeURIComponent(source.url)}`
3031
: source.url,
3132
setError: (error) => {
3233
if (useProxy) {
@@ -39,7 +40,7 @@ const Player = ({ source, className = '' }: Props) => {
3940
return {
4041
mimeType,
4142
src: useProxy
42-
? `https://yt-source.nico.dev/play/${encodeURIComponent(
43+
? `${getSourceUrl()}play/${encodeURIComponent(
4344
source.formats[mimeType]
4445
)}`
4546
: source.formats[mimeType],

src/app/common/api.ts

+15-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import ApiFetch from '@common/apiFetch';
22
import { Audio } from '@common/types';
3+
import { getSourceUrl } from '@common/url';
34

45
const apiFetch = new ApiFetch();
56

@@ -9,8 +10,18 @@ interface ServerRestart {
910
doRestart: boolean;
1011
}
1112

12-
export const getServerRestart = () =>
13-
apiFetch.get<ServerRestart>('https://restart-source.ytaud.io/restart.php');
14-
13+
export const getServerRestart = () => {
14+
const restartUrl = process.env.RESTART_URL;
15+
if (!restartUrl) {
16+
return Promise.resolve({
17+
data: {
18+
serverIsRunning: true,
19+
restartInProgress: true,
20+
doRestart: false,
21+
},
22+
});
23+
}
24+
return apiFetch.get<ServerRestart>(restartUrl);
25+
};
1526
export const getAudioSource = (videoID: string) =>
16-
apiFetch.get<Audio>(`https://source-2.ytaud.io/${videoID}/`);
27+
apiFetch.get<Audio>(`${getSourceUrl()}${videoID}/`);

src/app/common/url.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
const trailingSlash = (string: string) => {
2+
return string.endsWith('/') ? string : string + '/';
3+
};
4+
5+
export const getSourceUrl = () => trailingSlash(process.env.SOURCE_URL);

webpack.config.js

+8
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,14 @@ module.exports = (env) => {
112112
},
113113
],
114114
}),
115+
new webpack.DefinePlugin({
116+
'process.env.SOURCE_URL': JSON.stringify(
117+
process.env.SOURCE_URL || 'https://yt-source.nico.dev'
118+
),
119+
'process.env.RESTART_URL': JSON.stringify(
120+
process.env.RESTART_URL || ''
121+
),
122+
}),
115123
...(dev ? [new webpack.SourceMapDevToolPlugin({})] : []),
116124
new CleanWebpackPlugin(),
117125
...(!dev

0 commit comments

Comments
 (0)