From 4891c57bbd3c83b2d331883b7435d97c7fe3412f Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Tue, 17 Nov 2020 10:45:35 +0530
Subject: [PATCH] Preferences + Format code.

---
 .gitignore                      |   1 -
 README.md                       |   5 +
 src/App.vue                     |  54 +++++---
 src/Constants.js                |   4 +-
 src/components/Channel.vue      |  70 ++++++----
 src/components/Preferences.vue  |  79 +++++++++++
 src/components/TrendingPage.vue | 103 ++++++++------
 src/components/WatchVideo.vue   | 237 ++++++++++++++++++--------------
 src/main.js                     |  36 ++---
 src/registerServiceWorker.js    |   2 +-
 src/router/router.js            |   7 +-
 11 files changed, 379 insertions(+), 219 deletions(-)
 create mode 100644 src/components/Preferences.vue

diff --git a/.gitignore b/.gitignore
index 403adbc1..11f5d714 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,7 +2,6 @@
 node_modules
 /dist
 
-
 # local env files
 .env.local
 .env.*.local
diff --git a/README.md b/README.md
index 49bb026a..6f998d8a 100644
--- a/README.md
+++ b/README.md
@@ -1,24 +1,29 @@
 # piped
 
 ## Project setup
+
 ```
 npm install
 ```
 
 ### Compiles and hot-reloads for development
+
 ```
 npm run serve
 ```
 
 ### Compiles and minifies for production
+
 ```
 npm run build
 ```
 
 ### Lints and fixes files
+
 ```
 npm run lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/src/App.vue b/src/App.vue
index 90b5f638..ede0213b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,33 +1,43 @@
 <template>
-<div class="uk-container uk-container-expand uk-light uk-height-viewport" style="background:#0b0e0f">
-    <nav class="uk-navbar-container uk-container-expand uk-light" style="background:#0b0e0f" uk-navbar>
-        <div class="uk-navbar-left">
-            <router-link class="uk-navbar-item uk-logo uk-text-bold" to="/">Piped</router-link>
-        </div>
-        <div class="uk-navbar-right">
-            <ul class="uk-navbar-nav">
-                <li>
-                    <router-link to="/login">Login</router-link>
-                </li>
-                <li>
-                    <router-link to="/feed">Feed</router-link>
-                </li>
-            </ul>
-        </div>
-    </nav>
+    <div
+        class="uk-container uk-container-expand uk-light uk-height-viewport"
+        style="background: #0b0e0f"
+    >
+        <nav
+            class="uk-navbar-container uk-container-expand uk-light"
+            style="background: #0b0e0f"
+            uk-navbar
+        >
+            <div class="uk-navbar-left">
+                <router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
+                    >Piped</router-link
+                >
+            </div>
+            <div class="uk-navbar-right">
+                <ul class="uk-navbar-nav">
+                    <li>
+                        <router-link to="/preferences">Preferences</router-link>
+                    </li>
+                    <li>
+                        <router-link to="/login">Login</router-link>
+                    </li>
+                    <li>
+                        <router-link to="/feed">Feed</router-link>
+                    </li>
+                </ul>
+            </div>
+        </nav>
 
-    <router-view />
-</div>
+        <router-view />
+    </div>
 </template>
 
 <script>
 export default {
     data() {
-        return {
-
-        }
+        return {};
     }
-}
+};
 </script>
 
 <style>
diff --git a/src/Constants.js b/src/Constants.js
index 11031946..1a48be24 100644
--- a/src/Constants.js
+++ b/src/Constants.js
@@ -1,3 +1,3 @@
 export default {
-    BASE_URL: 'https://pipedapi.kavin.rocks',
-}
\ No newline at end of file
+    BASE_URL: localStorage.getItem("instance") || 'https://pipedapi.kavin.rocks',
+}
diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 9e894541..2ba933ae 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -1,22 +1,32 @@
 <template>
-<div v-if="channel">
-    <h1 class="uk-text-center"><img v-bind:src="channel.avatarUrl">{{ channel.name }}</h1>
-    <img v-bind:src="channel.bannerUrl" style="width: 100%">
-    <p v-html="this.channel.description.replaceAll('\n', '<br>')"></p>
+    <div v-if="channel">
+        <h1 class="uk-text-center">
+            <img v-bind:src="channel.avatarUrl" />{{ channel.name }}
+        </h1>
+        <img v-bind:src="channel.bannerUrl" style="width: 100%" />
+        <p v-html="this.channel.description.replaceAll('\n', '<br>')"></p>
 
-    <hr>
+        <hr />
 
-    <div class="uk-grid-small" style="width: 100%" uk-grid="parallax: 0">
-        <div style="width: 288px" v-bind:key="item.url" v-for="item in this.channel.relatedStreams">
-            <router-link class="uk-link-muted" style="height: 100px" v-bind:to="item.url || '/'">
-                <img style="width: 100%" v-bind:src="item.thumbnail">
-                <a>{{ item.title }}</a>
-            </router-link>
-            <br>
-            <a>{{ timeFormat(item.duration) }}</a>
+        <div class="uk-grid-small" style="width: 100%" uk-grid="parallax: 0">
+            <div
+                style="width: 288px"
+                v-bind:key="item.url"
+                v-for="item in this.channel.relatedStreams"
+            >
+                <router-link
+                    class="uk-link-muted"
+                    style="height: 100px"
+                    v-bind:to="item.url || '/'"
+                >
+                    <img style="width: 100%" v-bind:src="item.thumbnail" />
+                    <a>{{ item.title }}</a>
+                </router-link>
+                <br />
+                <a>{{ timeFormat(item.duration) }}</a>
+            </div>
         </div>
     </div>
-</div>
 </template>
 
 <script>
@@ -25,27 +35,31 @@ import Constants from "@/Constants.js";
 export default {
     data() {
         return {
-            channel: null,
-        }
+            channel: null
+        };
     },
     mounted() {
-        this.getChannelData()
+        this.getChannelData();
     },
     methods: {
         async fetchChannel() {
             return await (
-                await fetch(Constants.BASE_URL + "/channels/" + this.$route.params.channelId)
+                await fetch(
+                    Constants.BASE_URL +
+                        "/channels/" +
+                        this.$route.params.channelId
+                )
             ).json();
         },
         async getChannelData() {
-            this.fetchChannel().then(data => this.channel = data)
-                .then(() => document.title = this.channel.name + " - Piped")
+            this.fetchChannel()
+                .then(data => (this.channel = data))
+                .then(() => (document.title = this.channel.name + " - Piped"));
         },
         timeFormat(duration) {
-
-            var pad = function (num, size) {
-                return ('000' + num).slice(size * -1);
-            }
+            var pad = function(num, size) {
+                return ("000" + num).slice(size * -1);
+            };
 
             var time = parseFloat(duration).toFixed(3),
                 hours = Math.floor(time / 60 / 60),
@@ -54,14 +68,12 @@ export default {
 
             var str = "";
 
-            if (hours > 0)
-                str += pad(hours, 2) + ":"
+            if (hours > 0) str += pad(hours, 2) + ":";
 
-            str += pad(minutes, 2) + ':' + pad(seconds, 2)
+            str += pad(minutes, 2) + ":" + pad(seconds, 2);
 
             return str;
-
         }
     }
-}
+};
 </script>
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
new file mode 100644
index 00000000..492e33cb
--- /dev/null
+++ b/src/components/Preferences.vue
@@ -0,0 +1,79 @@
+<template>
+    <table class="uk-table">
+        <thead>
+            <tr>
+                <th>Instance Name</th>
+                <th>Instance Locations</th>
+                <th>Has CDN?</th>
+            </tr>
+        </thead>
+        <tbody v-bind:key="instance.name" v-for="instance in instances">
+            <tr>
+                <td>{{ instance.name }}</td>
+                <td>{{ instance.locations }}</td>
+                <td>{{ instance.cdn }}</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <select
+        class="uk-select"
+        v-model="selectedInstance"
+        @change="onChange($event)"
+    >
+        <option
+            v-bind:key="instance.name"
+            v-for="instance in instances"
+            v-bind:value="instance.apiurl"
+        >
+            {{ instance.name }}
+        </option>
+    </select>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            selectedInstance: null,
+            instances: []
+        };
+    },
+    mounted() {
+        fetch(
+            "https://raw.githubusercontent.com/wiki/TeamPiped/Piped-Frontend/Instances.md"
+        )
+            .then(resp => resp.text())
+            .then(body => {
+                var skipped = 0;
+                const lines = body.split("\n");
+                lines.map(line => {
+                    const split = line.split("|");
+                    if (split.length == 4) {
+                        if (skipped < 2) {
+                            skipped++;
+                            return;
+                        }
+                        this.instances.push({
+                            name: split[0].trim(),
+                            apiurl: split[1].trim(),
+                            locations: split[2].trim(),
+                            cdn: split[3].trim()
+                        });
+                    }
+                });
+            });
+
+        if (localStorage)
+            this.selectedInstance =
+                localStorage.getItem("instance") ||
+                "https://pipedapi.kavin.rocks";
+    },
+    methods: {
+        onChange() {
+            if (localStorage)
+                localStorage.setItem("instance", this.selectedInstance);
+        }
+    }
+};
+</script>
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 37cf4ff0..277035a0 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -1,45 +1,58 @@
-<template>
-<h1 class="uk-text-bold uk-text-center">Trending</h1>
-
-<hr>
-
-<div class="uk-grid-collapse" style="width: 100%" uk-grid="parallax: 0">
-    <div class="uk-tile-default" style="width: 300px; background: #0b0e0f" v-bind:key="video.url" v-for="video in videos">
-        <div class="uk-card uk-card-default uk-card-body uk-grid-match uk-text-secondary" style="background: #0b0e0f">
-            <router-link class="uk-text-emphasis" v-bind:to="video.url || '/'">
-                <p>{{ video.title }}</p>
-                <img style="width: 100%" v-bind:src="video.thumbnail" />
-            </router-link>
-            <router-link class="uk-link-muted" v-bind:to="video.uploaderUrl || '/'">
-                <p>{{ video.uploaderName }}</p>
-            </router-link>
-            <font-awesome-icon icon="eye"></font-awesome-icon> {{ video.views }} views
-        </div>
-    </div>
-</div>
-</template>
-
-<script>
-import Constants from '@/Constants.js'
-
-export default {
-    data() {
-        return {
-            videos: [],
-        };
-    },
-    mounted() {
-
-        document.title = "Trending - Piped";
-
-        this.fetchTrending().then(videos => this.videos = videos)
-    },
-    methods: {
-        async fetchTrending() {
-            return await (
-                await fetch(Constants.BASE_URL + "/trending")
-            ).json();
-        }
-    }
-}
-</script>
+<template>
+    <h1 class="uk-text-bold uk-text-center">Trending</h1>
+
+    <hr />
+
+    <div class="uk-grid-collapse" style="width: 100%" uk-grid="parallax: 0">
+        <div
+            class="uk-tile-default"
+            style="width: 300px; background: #0b0e0f"
+            v-bind:key="video.url"
+            v-for="video in videos"
+        >
+            <div
+                class="uk-card uk-card-default uk-card-body uk-grid-match uk-text-secondary"
+                style="background: #0b0e0f"
+            >
+                <router-link
+                    class="uk-text-emphasis"
+                    v-bind:to="video.url || '/'"
+                >
+                    <p>{{ video.title }}</p>
+                    <img style="width: 100%" v-bind:src="video.thumbnail" />
+                </router-link>
+                <router-link
+                    class="uk-link-muted"
+                    v-bind:to="video.uploaderUrl || '/'"
+                >
+                    <p>{{ video.uploaderName }}</p>
+                </router-link>
+                <font-awesome-icon icon="eye"></font-awesome-icon>
+                {{ video.views }} views
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Constants from "@/Constants.js";
+
+export default {
+    data() {
+        return {
+            videos: []
+        };
+    },
+    mounted() {
+        document.title = "Trending - Piped";
+        console.log(Constants.BASE_URL);
+
+        this.fetchTrending().then(videos => (this.videos = videos));
+    },
+    methods: {
+        async fetchTrending() {
+            return await (await fetch(Constants.BASE_URL + "/trending")).json();
+        }
+    }
+};
+</script>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 83db3bc8..1c551cb1 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -1,42 +1,56 @@
 <template>
-<div class="uk-container uk-container-xlarge">
-    <h1 class="uk-text-bold">{{ video.title }}</h1>
-    <video controls ref="player" class="video-js preview-player-dimensions "></video>
+    <div class="uk-container uk-container-xlarge">
+        <h1 class="uk-text-bold">{{ video.title }}</h1>
+        <video
+            controls
+            ref="player"
+            class="video-js preview-player-dimensions"
+        ></video>
 
-    <img :src="video.uploaderAvatar" />
-    <router-link class="uk-text-bold" v-bind:to="video.uploaderUrl || '/'">
-        <a>{{ video.uploader }}</a>
-    </router-link>
-
-    <p class="uk-dark">
-        <font-awesome-icon icon="thumbs-down"></font-awesome-icon>
-        {{ video.likes }}
-        <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
-        {{ video.dislikes }}
-    </p>
-    <p>
-        <font-awesome-icon icon="eye"></font-awesome-icon> {{ video.views }} views
-    </p>
-    <p class="uk-light" v-html="video.description"></p>
-    <a v-if="sponsors && sponsors.segments">Sponsors Segments: {{ sponsors.segments.length }}</a>
-
-    <hr>
-
-    <div class="uk-tile-default uk-text-secondary" style="background: #0b0e0f; width: 300px" v-bind:key="related.url" v-for="related in video.relatedStreams">
-        <router-link class="uk-link-muted" v-bind:to="related.url">
-            <p class="uk-text-emphasis">{{ related.title }}</p>
-            <img style="width: 100%" v-bind:src="related.thumbnail" />
+        <img :src="video.uploaderAvatar" />
+        <router-link class="uk-text-bold" v-bind:to="video.uploaderUrl || '/'">
+            <a>{{ video.uploader }}</a>
         </router-link>
-        <p>
-            <router-link class="uk-link-muted" v-bind:to="related.uploaderUrl || '/'">
-                <p>{{ related.uploaderName }}</p>
-            </router-link>
-            <font-awesome-icon icon="eye"></font-awesome-icon>
-            {{ related.views }} views
-        </p>
-    </div>
 
-</div>
+        <p class="uk-dark">
+            <font-awesome-icon icon="thumbs-down"></font-awesome-icon>
+            {{ video.likes }}
+            <font-awesome-icon icon="thumbs-up"></font-awesome-icon>
+            {{ video.dislikes }}
+        </p>
+        <p>
+            <font-awesome-icon icon="eye"></font-awesome-icon>
+            {{ video.views }} views
+        </p>
+        <p class="uk-light" v-html="video.description"></p>
+        <a v-if="sponsors && sponsors.segments"
+            >Sponsors Segments: {{ sponsors.segments.length }}</a
+        >
+
+        <hr />
+
+        <div
+            class="uk-tile-default uk-text-secondary"
+            style="background: #0b0e0f; width: 300px"
+            v-bind:key="related.url"
+            v-for="related in video.relatedStreams"
+        >
+            <router-link class="uk-link-muted" v-bind:to="related.url">
+                <p class="uk-text-emphasis">{{ related.title }}</p>
+                <img style="width: 100%" v-bind:src="related.thumbnail" />
+            </router-link>
+            <p>
+                <router-link
+                    class="uk-link-muted"
+                    v-bind:to="related.uploaderUrl || '/'"
+                >
+                    <p>{{ related.uploaderName }}</p>
+                </router-link>
+                <font-awesome-icon icon="eye"></font-awesome-icon>
+                {{ related.views }} views
+            </p>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -52,11 +66,11 @@ export default {
     data() {
         return {
             video: {
-                title: "Loading...",
+                title: "Loading..."
             },
             player: null,
             audioplayer: null,
-            sponsors: null,
+            sponsors: null
         };
     },
     mounted() {
@@ -68,37 +82,45 @@ export default {
             this.player.dispose();
         }
         if (this.audioplayer) {
-            this.audioplayer.pause()
+            this.audioplayer.pause();
         }
     },
     watch: {
-        "$route.query.v": function (v) {
+        "$route.query.v": function(v) {
             if (v) {
-                if (this.audioplayer)
-                    this.audioplayer.pause()
+                if (this.audioplayer) this.audioplayer.pause();
                 this.getVideoData();
                 this.getSponsors();
             }
-        },
+        }
     },
     methods: {
         async fetchVideo() {
             return await (
-                await fetch(Constants.BASE_URL + "/streams/" + this.$route.query.v)
+                await fetch(
+                    Constants.BASE_URL + "/streams/" + this.$route.query.v
+                )
             ).json();
         },
         async fetchSponsors() {
             return await (
-                await fetch(Constants.BASE_URL + "/sponsors/" + this.$route.query.v + "?category=[\"sponsor\",\"interaction\",\"selfpromo\",\"music_offtopic\"]")
+                await fetch(
+                    Constants.BASE_URL +
+                        "/sponsors/" +
+                        this.$route.query.v +
+                        '?category=["sponsor","interaction","selfpromo","music_offtopic"]'
+                )
             ).json();
         },
         async getVideoData() {
             this.fetchVideo()
-                .then((data) => (this.video = data))
+                .then(data => (this.video = data))
                 .then(() => {
                     document.title = this.video.title + " - Piped";
 
-                    this.video.description = this.video.description.replaceAll("http://www.youtube.com", "").replaceAll("https://www.youtube.com", "")
+                    this.video.description = this.video.description
+                        .replaceAll("http://www.youtube.com", "")
+                        .replaceAll("https://www.youtube.com", "");
 
                     const options = {
                         autoplay: false,
@@ -110,22 +132,23 @@ export default {
                                 "volumePanel",
                                 "qualitySelector",
                                 "captionsButton",
-                                "fullscreenToggle",
-                            ],
+                                "fullscreenToggle"
+                            ]
                         },
                         responsive: false,
-                        aspectRatio: '16:9'
+                        aspectRatio: "16:9"
                     };
 
-                    const noPrevPlayer = !this.player
+                    const noPrevPlayer = !this.player;
 
-                    if (noPrevPlayer) this.player = videojs(this.$refs.player, options);
+                    if (noPrevPlayer)
+                        this.player = videojs(this.$refs.player, options);
 
                     this.player.hotkeys({
                         volumeStep: 0.1,
                         seekStep: 5,
                         enableModifiersForNumbers: false,
-                        enableHoverScroll: true,
+                        enableHoverScroll: true
                     });
 
                     this.player.poster(this.video.thumbnailUrl);
@@ -133,96 +156,110 @@ export default {
                     var src = [];
 
                     if (this.video.livestream) {
-
                         src.push({
                             src: this.video.hls,
-                            type: 'application/x-mpegURL'
-                        })
-
+                            type: "application/x-mpegURL"
+                        });
                     } else {
-                        this.video.videoStreams.map((stream) =>
+                        this.video.videoStreams.map(stream =>
                             src.push({
                                 src: stream.url,
-                            type: stream.mimeType,
-                            label: stream.quality,
-                        })
-                    );
+                                type: stream.mimeType,
+                                label: stream.quality
+                            })
+                        );
 
-                    this.video.audioStreams.map((stream) =>
-                        src.push({
-                            src: stream.url,
-                            type: stream.mimeType,
-                                label: stream.quality,
+                        this.video.audioStreams.map(stream =>
+                            src.push({
+                                src: stream.url,
+                                type: stream.mimeType,
+                                label: stream.quality
                             })
                         );
                     }
 
-                    this.audioplayer = new Audio((this.video.audioStreams.slice(-1)[0].url));
+                    this.audioplayer = new Audio(
+                        this.video.audioStreams.slice(-1)[0].url
+                    );
 
                     this.player.src(src);
 
                     if (noPrevPlayer) {
-                        this.player.on('timeupdate', () => {
+                        this.player.on("timeupdate", () => {
                             if (this.sponsors && this.sponsors.segments) {
-                                const time = this.player.currentTime()
+                                const time = this.player.currentTime();
                                 this.sponsors.segments.map(segment => {
                                     if (!segment.skipped) {
-                                        const end = segment.segment[1]
-                                        if (time >= segment.segment[0] && time < end) {
-                                            this.player.currentTime(end)
-                                            this.audioplayer.currentTime = end
-                                            segment.skipped = true
-                                            return
+                                        const end = segment.segment[1];
+                                        if (
+                                            time >= segment.segment[0] &&
+                                            time < end
+                                        ) {
+                                            this.player.currentTime(end);
+                                            this.audioplayer.currentTime = end;
+                                            segment.skipped = true;
+                                            return;
                                         }
                                     }
-                                })
+                                });
                             }
 
                             if (this.audioplayer) {
-
-                                const delay = this.audioplayer.currentTime - this.player.currentTime()
+                                const delay =
+                                    this.audioplayer.currentTime -
+                                    this.player.currentTime();
 
                                 if (Math.abs(delay) > 0.1) {
-                                    this.audioplayer.currentTime = this.player.currentTime() - delay
+                                    this.audioplayer.currentTime =
+                                        this.player.currentTime() - delay;
                                 }
                             }
                         });
 
-                        this.player.on('play', () => {
-                            this.audioplayer.play()
+                        this.player.on("play", () => {
+                            this.audioplayer.play();
                         });
 
-                        this.player.on('pause', () => {
-                            this.audioplayer.currentTime = this.player.currentTime()
-                            this.audioplayer.pause()
+                        this.player.on("pause", () => {
+                            this.audioplayer.currentTime = this.player.currentTime();
+                            this.audioplayer.pause();
                         });
 
-                        this.player.on('volumechange', () => {
-                            this.audioplayer.volume = this.player.volume()
-                        })
-
+                        this.player.on("volumechange", () => {
+                            this.audioplayer.volume = this.player.volume();
+                        });
                     }
 
                     if (!noPrevPlayer)
-                        this.player.remoteTextTracks().map(track => this.player.removeRemoteTextTrack(track));
+                        this.player
+                            .remoteTextTracks()
+                            .map(track =>
+                                this.player.removeRemoteTextTrack(track)
+                            );
 
                     this.video.subtitles.map(subtitle => {
-                        this.player.addRemoteTextTrack({
-                            kind: "captions",
-                            src: subtitle.url.replace("fmt=ttml", "fmt=vtt"),
-                            label: "Track",
-                            type: "captions/captions.vtt"
-                        }, false).mode = "showing"
-                    })
+                        this.player.addRemoteTextTrack(
+                            {
+                                kind: "captions",
+                                src: subtitle.url.replace(
+                                    "fmt=ttml",
+                                    "fmt=vtt"
+                                ),
+                                label: "Track",
+                                type: "captions/captions.vtt"
+                            },
+                            false
+                        ).mode = "showing";
+                    });
 
+                    //const parent = this.player.el().querySelector(".vjs-progress-holder")
                     //TODO: Add sponsors on seekbar: https://github.com/ajayyy/SponsorBlock/blob/e39de9fd852adb9196e0358ed827ad38d9933e29/src/js-components/previewBar.ts#L12
-
                 });
         },
         async getSponsors() {
-            this.fetchSponsors().then((data) => (this.sponsors = data));
-        },
-    },
+            this.fetchSponsors().then(data => (this.sponsors = data));
+        }
+    }
 };
 </script>
 
diff --git a/src/main.js b/src/main.js
index fdaa8d10..50d894f9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,18 +1,18 @@
-import { createApp } from 'vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { faThumbsUp, faThumbsDown, faEye } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-library.add(faThumbsUp, faThumbsDown, faEye)
-
-require("uikit/src/less/uikit.less")
-require("uikit/dist/js/uikit.min.js")
-
-import router from '@/router/router'
-import App from './App.vue'
-
-import './registerServiceWorker'
-
-const app = createApp(App)
-app.use(router)
-app.component('font-awesome-icon', FontAwesomeIcon)
-app.mount('#app')
+import { createApp } from 'vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faThumbsUp, faThumbsDown, faEye } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+library.add(faThumbsUp, faThumbsDown, faEye)
+
+require("uikit/src/less/uikit.less")
+require("uikit/dist/js/uikit.min.js")
+
+import router from '@/router/router'
+import App from './App.vue'
+
+import './registerServiceWorker'
+
+const app = createApp(App)
+app.use(router)
+app.component('font-awesome-icon', FontAwesomeIcon)
+app.mount('#app')
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
index cdbbd0d9..14d2e14f 100644
--- a/src/registerServiceWorker.js
+++ b/src/registerServiceWorker.js
@@ -21,7 +21,7 @@ if (process.env.NODE_ENV === 'production') {
         },
         updated() {
             console.log('New content is available; please refresh.')
-            caches.keys().then(function(names) {
+            caches.keys().then(function (names) {
                 for (let name of names) caches.delete(name);
             })
         },
diff --git a/src/router/router.js b/src/router/router.js
index 14b7e42f..2697140d 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Watch from '../components/WatchVideo.vue'
 import Trending from '../components/TrendingPage.vue'
 import Channel from '../components/Channel.vue'
+import Preferences from '../components/Preferences.vue'
 
 const routes = [{
     path: '/watch',
@@ -15,6 +16,10 @@ const routes = [{
     path: '/channel/:channelId',
     name: 'Channel',
     component: Channel
+}, {
+    path: '/preferences',
+    name: 'Preferences',
+    component: Preferences
 }]
 
 const router = createRouter({
@@ -22,4 +27,4 @@ const router = createRouter({
     routes
 })
 
-export default router
\ No newline at end of file
+export default router