aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorPinapelz <yukais@pinapelz.com>2024-08-15 23:59:19 -0700
committerPinapelz <yukais@pinapelz.com>2024-08-15 23:59:19 -0700
commit84a68f514c3f8665c57740e7d94d3adab7927a5d (patch)
treea745018085b43b0c43735ea121516db5c1417bd2
parentffeac632c34ac8ef15e11aa867ed6924e8936a3a (diff)
properly escape quote characters
-rw-r--r--src/app/about/page.tsx32
1 files changed, 16 insertions, 16 deletions
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 1744960..dd5f35b 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -86,21 +86,21 @@ const AboutPage: React.FC = () => {
</Paragraph>
<Subtitle>How to use this player?</Subtitle>
<Paragraph>
- You'll need to prepare a few files for the media you want to play back first.
- <br />Theoretically you can mix/match any of the files below since the main video/audio is all that's mandatory for playback.
- <br />In this guide I'll assume that you're after a karaoke experience, and want the works.
+ You&apos;ll need to prepare a few files for the media you want to play back first.
+ <br />Theoretically you can mix/match any of the files below since the main video/audio is all that&apos;s mandatory for playback.
+ <br />In this guide I&apos;ll assume that you&apos;re after a karaoke experience, and want the works.
<br /><br />To add any files to the player simply drag it onto the right part of the player page.
<br />EVERYTHING IS RAN LOCALLY, NO FILES ARE EVER UPLOADED TO ANY SERVERS.
</Paragraph>
<Subtitle>1. Main video/audio file</Subtitle>
<Paragraph>
- Note: I've renamed the second button seen in the demos from Video to Media to avoid confusion since it can support audio/video files
+ Note: I&apos;ve renamed the second button seen in the demos from Video to Media to avoid confusion since it can support audio/video files
</Paragraph>
<Paragraph>
This is the file that you want to play back. It can be a video or an audio file.
<br />Supported formats: mp4, webm, ogg, mp3, wav, flac, and more.
<br />If you choose to use an audio file here, the right part of the player will not show a video preview.
- <br /> <br />A good way would be to download some video from YouTube. You may need to make adjustments to the offset later depending on how well the LRC files syncs with the video.
+ <br /> <br />A good way would be to download some video from YouTube. You may need to make adjustments to the offset later depending on how well the LRC file syncs with the video.
<br /> How you do that will be up to you, but I recommend using <a href="https://github.com/yt-dlp/yt-dlp">yt-dlp</a> to download the video.
</Paragraph>
<Subtitle>2. Lyric File (LRC)</Subtitle>
@@ -118,21 +118,21 @@ const AboutPage: React.FC = () => {
<br/>
<Paragraph>
At this point you should already be able to play back the main media and have the lyrics highlighted as the media progresses.
- <br />Depending on how well the LRC file syncs with the main media, you may need to adjust the main offset lablled as "Offset (±ms)"
+ <br />Depending on how well the LRC file syncs with the main media, you may need to adjust the main offset labelled as &quot;Offset (±ms)&quot;
</Paragraph>
<Video controls>
<source src="https://files.catbox.moe/mfaei6.mp4" type="video/mp4" />
</Video>
- <Subtitle>3. Insturmental/Vocals (Audio 2)</Subtitle>
+ <Subtitle>3. Instrumental/Vocals (Audio 2)</Subtitle>
<Paragraph>
- If you only wanted one or the other, simply add that as the main media then you're done
- <br />There are a ton of tools online to remove this but you'll want to make sure you get the insturmental track in an audio format (mp3, wav, etc.)
- <br />Then hover over the right side of the player, click the "Audio #2" button, and find your insturmental track.
+ If you only wanted one or the other, simply add that as the main media then you&apos;re done
+ <br />There are a ton of tools online to remove this but you&apos;ll want to make sure you get the instrumental track in an audio format (mp3, wav, etc.)
+ <br />Then hover over the right side of the player, click the &quot;Audio #2&quot; button, and find your instrumental track.
<br /><br />(TIP!) I suggest going back and setting the main media in step 1 (Media button) in the previous step to a vocal only video/audio.
<br /> This will make it significantly easier to offset the 2 tracks. You can always mux a video file on top of that if you want visuals too!
- <br/>Ultimately it doesn't matter which "slot" the insturmental or "vocals" go into, its just better to have them seperated!
- <br/><br/>Now adjust the offset using the numerical inputs, the "Sync" button will adjust Audio 2 relative to the main media.
- <br/>I positioning the playhead at 00:00 and then adding the secondary audio, this will make adjustments much easier.
+ <br/>Ultimately it doesn&apos;t matter which &quot;slot&quot; the instrumental or &quot;vocals&quot; go into, it&apos;s just better to have them separated!
+ <br/><br/>Now adjust the offset using the numerical inputs, the &quot;Sync&quot; button will adjust Audio 2 relative to the main media.
+ <br/>I suggest positioning the playhead at 00:00 and then adding the secondary audio; this will make adjustments much easier.
<br/><br/>
Now you should be able to control the balance between both of these files (which one is louder) by using the slider!
</Paragraph>
@@ -140,10 +140,10 @@ const AboutPage: React.FC = () => {
<Paragraph>
If the YouTube video you downloaded has subtitles (sometimes they look really cool and fancy), you can download that using yt-dlp
for use in the player as well.
- <br/><br/>Unfortunatly there is no way to adjust the offset for this, it'll play according to the main media.
+ <br/><br/>Unfortunately there is no way to adjust the offset for this, it&apos;ll play according to the main media.
</Paragraph>
<Video controls>
- <source src="https://private-user-images.githubusercontent.com/21994085/285583271-5106bb53-d962-45e9-9a6b-6368dd1c6437.mp4?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjM3OTA3MTAsIm5iZiI6MTcyMzc5MDQxMCwicGF0aCI6Ii8yMTk5NDA4NS8yODU1ODMyNzEtNTEwNmJiNTMtZDk2Mi00NWU5LTlhNmItNjM2OGRkMWM2NDM3Lm1wND9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MTYlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODE2VDA2NDAxMFomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWNjNDQ2ZDdhZjEzYTNkYTFhNTdhYzBiZTU0NjUxZGZjZjJjMmViMzc0ZjVmNGZjOTAwNTc0OGNmZTY1MDhmODkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.yJWR0mVVKOqNZcCIU8yWYR4Q22kwT8VfhlbllJu3nLI"/>
+ <source src="https://files.catbox.moe/ir6bs3.mp4"/>
</Video>
<BackLink href="/">Back to player</BackLink>
</Container>
@@ -151,4 +151,4 @@ const AboutPage: React.FC = () => {
);
};
-export default AboutPage; \ No newline at end of file
+export default AboutPage;
send patches to the email below
yukais@pinapelz.com
include the subject [PATCH repo_name]
pinapelz.com
homepage