Skip to content

Commit

Permalink
simple setup instructions on tips page
Browse files Browse the repository at this point in the history
  • Loading branch information
@MrBrax
MrBrax committed Apr 17, 2024
1 parent 31323c7 commit 583cf66
Showing 1 changed file with 101 additions and 13 deletions.
114 changes: 101 additions & 13 deletions client-vue/src/views/Settings/SettingsTips.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,50 @@
<h1>Tips and other stuff</h1>
<p>This page contains some tips and other stuff that might be useful to you.</p>
</article>
<article>
<h2>How to set up</h2>
<p>
<ol class="steps">
<li :class="{ 'done': store.cfg('bin_dir') }">
<router-link to="./config?showsetting=bin_dir">Set the binary directory in the config
page.</router-link>
</li>
<li :class="{ 'done': store.cfg('ffmpeg_path') }">
<router-link to="./config?showsetting=ffmpeg_path">Set the ffmpeg path in the config
page.</router-link>
</li>
<li :class="{ 'done': store.cfg('mediainfo_path') }">
<router-link to="./config?showsetting=mediainfo_path">Set the mediainfo path in the config
page.</router-link>
</li>
<li :class="{ 'done': store.cfg('app_url') }">
<router-link to="./config?showsetting=app_url">Set the app URL in the config page</router-link>
and set up a reverse proxy with HTTPS.
It must be accessible from the internet and have a domain name.<br>
Also validate the external URL on the config page.
</li>
<li :class="{ 'done': store.streamerList.length > 0 }">
<router-link to="./channels">Add a channel</router-link>
</li>
</ol>
</p>
</article>
<article>
<h2>How to access subscription-only streams / apply turbo to streams</h2>
<p>
If you want to access subscription-only streams or disable ads via turbo, you need supply your session token.<br />
If you want to access subscription-only streams or disable ads via turbo, you need supply your session
token.<br />
You can follow this guide to get the ascii string:
<a href="https://streamlink.github.io/cli/plugins/twitch.html" target="_blank">https://streamlink.github.io/cli/plugins/twitch.html</a>
<a
href="https://streamlink.github.io/cli/plugins/twitch.html"
target="_blank">https://streamlink.github.io/cli/plugins/twitch.html</a>
<br /><br />
Store the string <em>without</em> "OAuth" or any other prepending text in the <code class="code-small">/config/twitch_oauth.txt</code> file and let the recording begin. There is no need to restart
Store the string <em>without</em> "OAuth" or any other prepending text in the <code
class="code-small">/config/twitch_oauth.txt</code> file and let the recording begin. There is no
need to restart
the application to update the token.<br />
I have never tested this myself, so I don't know if it works or not. It will probably fail after a while when the token expires.
I have never tested this myself, so I don't know if it works or not. It will probably fail after a while
when the token expires.
</p>
</article>
<article>
Expand All @@ -28,11 +62,14 @@
<article>
<h2>How authentication and single-page apps work</h2>
<p>
This application is a single-page app, which means that it only loads the index.html file once and then uses JavaScript to navigate between
This application is a single-page app, which means that it only loads the index.html file once and then
uses JavaScript to navigate between
pages. This is done to make the application feel more like a native application.<br />
This also means that the application doesn't reload the index.html file when you navigate to a different page.<br />The server doesn't know what
This also means that the application doesn't reload the index.html file when you navigate to a different
page.<br />The server doesn't know what
page you are on because of this, and therefore it doesn't know if you are authenticated or not.<br />
This is why you need to use the built in authentication system which will only require authentication on required endpoints.
This is why you need to use the built in authentication system which will only require authentication on
required endpoints.
<br /><br />
By default, any visitor can access the application and view all your content and change settings.
</p>
Expand All @@ -41,17 +78,22 @@
<h2>Why do I need a public facing web server?</h2>
<p>
To get stream notifications, the remote server needs to be able to access your local server.<br />
This is done by using a public facing reverse proxy (because the need for HTTPS) and a port forward.<br />
The current implementation of remote websockets by the provider is very limited, so this is the only way to get it to work.
This is done by using a public facing reverse proxy (because the need for HTTPS) and a port
forward.<br />
The current implementation of remote websockets by the provider is very limited, so this is the only way
to get it to work.
</p>
</article>
<article>
<h2>Can I modify/move the files inside storage?</h2>
<p>
<em>In most cases, this is a bad idea.</em><br />
Do not remove the main JSON files while the application is running unless you know that the file watcher is working. It will remove the VOD from
the memory database and nothing bad will happen. However, if it doesn't work then the memory will be out of sync with the database/disk, causing
the cleanup function and other functions to misbehave. The best way of moving files is to copy the files via the filesystem and then deleting
Do not remove the main JSON files while the application is running unless you know that the file watcher
is working. It will remove the VOD from
the memory database and nothing bad will happen. However, if it doesn't work then the memory will be out
of sync with the database/disk, causing
the cleanup function and other functions to misbehave. The best way of moving files is to copy the files
via the filesystem and then deleting
the VOD via the dashboard.
</p>
</article>
Expand All @@ -63,6 +105,18 @@
</div>
</template>

<script lang="ts" setup>
import { useStore } from "@/store";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
// setup
const store = useStore();
const { t, te } = useI18n();
const route = useRoute();
</script>

<style lang="scss" scoped>
.tips {
padding: 2em;
Expand All @@ -76,6 +130,7 @@
border-radius: 1em;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.03);
}
article:not(:last-child) {
margin-bottom: 2em;
}
Expand Down Expand Up @@ -106,4 +161,37 @@ footer {
font-size: 2em;
color: #3684f1;
}
</style>
ol.steps {
list-style-type: none;
padding-left: 0;
counter-reset: step;
li {
counter-increment: step;
margin-bottom: 0.5em;
position: relative;
padding-left: 2.5em;
&::before {
content: counter(step);
color: #cc1919;
background-color: #f0f0f0;
border-radius: 50%;
width: 1.5em;
height: 1.5em;
display: inline-block;
text-align: center;
line-height: 1.5em;
position: absolute;
left: 0em;
top: 0;
}
&.done::before {
background-color: #2eb613;
color: white;
}
}
}
</style>

0 comments on commit 583cf66

Please sign in to comment.