fix it

src/components/ChaptersBar.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- desktop view -->
-    <div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 <lg:hidden">
+    <div v-if="!mobileLayout" class="flex-col overflow-y-scroll max-h-75vh min-h-64 lt-lg:hidden">
         <h2 class="mb-2 bg-gray-500/50 p-2" aria-label="chapters" title="chapters">
             {{ $t("video.chapters") }} ({{ chapters.length }})
         </h2>
@@ -45,16 +45,17 @@
 }
 .chapter {
     @apply cursor-pointer self-center p-2.5;
-    img {
-        @apply w-full h-full;
-    }
+}
+.chapter img {
+    @apply w-full h-full;
 }
 .chapter-vertical {
     @apply cursor-pointer self-center p-2.5;
-    img {
-        @apply w-3/10 h-3/10;
-    }
 }
+.chapter-vertical img {
+    @apply w-3/10 h-3/10;
+}
+
 .chapter-vertical:hover {
     @apply bg-gray-500;
 }

src/components/CommentItem.vue

@@ -24,8 +24,8 @@
                 <div class="comment-meta text-sm mb-1.5" v-text="comment.commentedTime" />
             </div>
             <div class="whitespace-pre-wrap" v-text="comment.commentText" />
-            <div class="comment-footer mt-1">
-                <font-awesome-icon icon="thumbs-up" />
+            <div class="comment-footer mt-1 flex">
+                <div class="i-fa-solid:thumbs-up" />
                 <span class="ml-1" v-text="numberFormat(comment.likeCount)" />
                 <font-awesome-icon class="ml-1" v-if="comment.hearted" icon="heart" />
             </div>

src/components/ModalComponent.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="modal">
+        <div>
+            <div class="modal-container">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    mounted() {
+        window.addEventListener("keydown", this.handleKeyDown);
+    },
+    unmounted() {
+        window.removeEventListener("keydown", this.handleKeyDown);
+    },
+    methods: {
+        handleKeyDown(event) {
+            if (event.code === "Escape") {
+                this.$emit("close");
+            } else return;
+            event.preventDefault();
+        },
+    },
+};
+</script>
+
+<style scoped>
+.modal {
+    @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
+}
+
+.modal > div {
+    @apply table-cell align-middle;
+}
+
+.modal-container {
+    @apply w-min m-auto px-8 bg-dark-700 p-6 rounded-xl min-w-[20vw];
+}
+</style>

src/components/NavBar.vue

@@ -1,7 +1,7 @@
 <template>
     <nav class="flex flex-wrap items-center justify-center px-2 sm:px-4 py-2.5 w-full relative">
         <div class="flex-1 flex justify-start">
-            <router-link class="flex font-bold text-3xl items-center font-sans font-bold" to="/"
+            <router-link class="flex font-bold text-3xl items-center font-sans" to="/"
                 ><img
                     alt="logo"
                     src="/img/icons/logo.svg"
@@ -11,10 +11,10 @@
                 />iped</router-link
             >
         </div>
-        <div class="<md:hidden">
+        <div class="lt-md:hidden">
             <input
                 v-model="searchText"
-                class="input !w-72 !h-10"
+                class="input w-72 h-10"
                 type="text"
                 role="search"
                 ref="videoSearch"
@@ -89,7 +89,7 @@
     <div class="w-{full - 4} md:hidden mx-2">
         <input
             v-model="searchText"
-            class="input !h-10 !w-full"
+            class="input h-10 w-full"
             type="text"
             role="search"
             :title="$t('actions.search')"
@@ -174,9 +174,3 @@ export default {
     },
 };
 </script>
-<style>
-.input:focus {
-    @apply border-2 border-red-500;
-    box-shadow: 0 0 15px rgba(239, 68, 68, var(--tw-border-opacity));
-}
-</style>

src/components/PlaylistAddModal.vue

@@ -1,46 +1,30 @@
 <template>
-    <div class="modal">
-        <div>
-            <div class="modal-container">
-                <div class="flex">
-                    <span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
-                    <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
-                </div>
-                <select class="select w-full" v-model="selectedPlaylist">
-                    <option
-                        v-for="playlist in playlists"
-                        :value="playlist.id"
-                        :key="playlist.id"
-                        v-text="playlist.name"
-                    />
-                </select>
-                <button
-                    class="btn mt-2"
-                    @click="handleClick(selectedPlaylist)"
-                    ref="addButton"
-                    v-t="'actions.add_to_playlist'"
-                />
-            </div>
+    <ModalComponent>
+        <div class="flex">
+            <span class="text-2xl w-max inline-block" v-t="'actions.select_playlist'" />
+            <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
         </div>
-    </div>
+        <select class="select w-full mt-3" v-model="selectedPlaylist">
+            <option v-for="playlist in playlists" :value="playlist.id" :key="playlist.id" v-text="playlist.name" />
+        </select>
+        <div class="flex justify-end mt-3">
+            <button
+                class="btn"
+                @click="handleClick(selectedPlaylist)"
+                ref="addButton"
+                v-t="'actions.add_to_playlist'"
+            />
+        </div>
+    </ModalComponent>
 </template>
 
-<style scoped>
-.modal {
-    @apply fixed z-50 top-0 left-0 w-full h-full bg-dark-900 bg-opacity-80 transition-opacity table;
-}
-
-.modal > div {
-    @apply table-cell align-middle;
-}
-
-.modal-container {
-    @apply w-min m-auto px-8 bg-dark-700 p-6;
-}
-</style>
-
 <script>
+import ModalComponent from "./ModalComponent.vue";
+
 export default {
+    components: {
+        ModalComponent,
+    },
     props: {
         videoId: {
             type: String,
@@ -65,12 +49,10 @@ export default {
     },
     methods: {
         handleKeyDown(event) {
-            if (event.code === "Escape") {
-                this.$emit("close");
-            } else if (event.code === "Enter") {
+            if (event.code === "Enter") {
                 this.handleClick(this.selectedPlaylist);
-            } else return;
-            event.preventDefault();
+                event.preventDefault();
+            }
         },
         handleClick(playlistId) {
             if (!playlistId) {

src/components/PlaylistsPage.vue

@@ -53,7 +53,7 @@ export default {
             this.fetchJson(this.authApiUrl() + "/user/playlists/rename", null, {
                 method: "POST",
                 body: JSON.stringify({
-                    playlist: id,
+                    playlistId: id,
                     newName: newName,
                 }),
                 headers: {

src/components/PreferencesPage.vue

@@ -294,7 +294,7 @@
                 <th v-t="'preferences.instance_locations'" />
                 <th v-t="'preferences.has_cdn'" />
                 <th v-t="'preferences.registered_users'" />
-                <th class="<md:(hidden)" v-t="'preferences.version'" />
+                <th class="lt-md:hidden" v-t="'preferences.version'" />
                 <th v-t="'preferences.up_to_date'" />
                 <th v-t="'preferences.ssl_score'" />
             </tr>
@@ -305,7 +305,7 @@
                 <td v-text="instance.locations" />
                 <td v-text="`${instance.cdn ? '&#9989;' : '&#10060;'}`" />
                 <td v-text="instance.registered" />
-                <td class="<md:(hidden)" v-text="instance.version" />
+                <td class="lt-md:hidden" v-text="instance.version" />
                 <td v-text="`${instance.up_to_date ? '&#9989;' : '&#10060;'}`" />
                 <td>
                     <a :href="sslScore(instance.api_url)" target="_blank" v-t="'actions.view_ssl_score'" />
@@ -616,6 +616,6 @@ export default {
 
 <style>
 .pref {
-    @apply flex justify-between items-center my-2 mx-[15vw] <md:(mx-[2vw]);
+    @apply flex justify-between items-center my-2 mx-[15vw] lt-md:mx-[2vw];
 }
 </style>

src/components/SearchSuggestions.vue

@@ -77,7 +77,7 @@ export default {
 
 <style>
 .suggestions-container {
-    @apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 <md:max-w-[calc(100%-0.5rem)] bg-gray-300;
+    @apply left-1/2 translate-x-[-50%] transform-gpu max-w-3xl w-full box-border p-y-1.25 z-10 lt-md:max-w-[calc(100%-0.5rem)] bg-gray-300;
 }
 
 .dark .suggestions-container {
@@ -85,7 +85,7 @@ export default {
 }
 
 .auto .suggestions-container {
-    @apply dark:bg-dark-400;
+    @apply @dark:bg-dark-400;
 }
 
 .suggestion-selected {
@@ -97,7 +97,7 @@ export default {
 }
 
 .auto .suggestion-selected {
-    @apply dark:bg-dark-100;
+    @apply @dark:bg-dark-100;
 }
 
 .suggestion {

src/components/ShareModal.vue

@@ -0,0 +1,81 @@
+<template>
+    <ModalComponent>
+        <div class="flex">
+            <h2 v-t="'actions.share'" />
+            <button class="ml-3" @click="$emit('close')"><font-awesome-icon icon="xmark" /></button>
+        </div>
+        <div class="flex justify-between mt-4">
+            <label v-t="'actions.with_timecode'" for="withTimeCode" />
+            <input id="withTimeCode" type="checkbox" v-model="withTimeCode" />
+        </div>
+        <div class="flex justify-between">
+            <label v-t="'actions.piped_link'" />
+            <input type="checkbox" v-model="pipedLink" />
+        </div>
+        <div class="flex justify-between mt-2">
+            <label v-t="'actions.time_code'" />
+            <input class="input w-12" type="text" v-model="timeStamp" />
+        </div>
+        <h3 class="mt-4" v-text="generatedLink" />
+        <div class="flex justify-end mt-4">
+            <button class="btn" v-t="'actions.follow_link'" @click="followLink()" />
+            <button class="btn ml-3" v-t="'actions.copy_link'" @click="copyLink()" />
+        </div>
+    </ModalComponent>
+</template>
+
+<script>
+import ModalComponent from "./ModalComponent.vue";
+
+export default {
+    props: {
+        videoId: {
+            type: String,
+            required: true,
+        },
+        currentTime: {
+            type: Number,
+            required: true,
+        },
+    },
+    components: {
+        ModalComponent,
+    },
+    data() {
+        return {
+            withTimeCode: true,
+            pipedLink: true,
+            timeStamp: null,
+        };
+    },
+    mounted() {
+        this.timeStamp = parseInt(this.currentTime);
+    },
+    methods: {
+        followLink() {
+            window.open(this.generatedLink, "_blank").focus();
+        },
+        async copyLink() {
+            await this.copyURL(this.generatedLink);
+        },
+        async copyURL(mytext) {
+            try {
+                await navigator.clipboard.writeText(mytext);
+                alert(this.$t("info.copied"));
+            } catch ($e) {
+                alert(this.$t("info.cannot_copy"));
+            }
+        },
+    },
+    computed: {
+        generatedLink() {
+            var baseUrl = this.pipedLink
+                ? window.location.origin + "/watch?v=" + this.videoId
+                : "https://youtu.be/" + this.videoId;
+            var url = new URL(baseUrl);
+            if (this.withTimeCode && this.timeStamp > 0) url.searchParams.append("t", this.timeStamp);
+            return url.href;
+        },
+    },
+};
+</script>

src/components/SubscriptionsPage.vue

@@ -21,7 +21,7 @@
                         <span class="mx-2" v-text="subscription.name" />
                     </router-link>
                     <button
-                        class="btn !w-min"
+                        class="btn w-min"
                         @click="handleButton(subscription)"
                         v-t="`actions.${subscription.subscribed ? 'unsubscribe' : 'subscribe'}`"
                     />

src/components/VideoItem.vue

@@ -31,7 +31,7 @@
                     v-text="timeFormat(video.duration)"
                 />
                 <i18n-t v-else keypath="video.live" class="thumbnail-overlay thumbnail-right !bg-red-600" tag="div">
-                    <font-awesome-icon class="!w-3" :icon="['fas', 'broadcast-tower']" />
+                    <font-awesome-icon class="w-3" :icon="['fas', 'broadcast-tower']" />
                 </i18n-t>
                 <span v-if="video.watched" class="thumbnail-overlay bottom-5px left-5px" v-t="'video.watched'" />
             </div>

src/components/VideoRedirect.vue

@@ -9,7 +9,7 @@ export default {
         if (videoId)
             this.$router.replace({
                 path: "/watch",
-                query: { v: videoId },
+                query: { v: videoId, t: this.$route.query.t },
             });
     },
 };

src/components/WatchVideo.vue

@@ -47,13 +47,13 @@
                 <!-- Likes/dilikes -->
                 <div class="flex children:mr-2">
                     <template v-if="video.likes >= 0">
-                        <div>
-                            <font-awesome-icon icon="thumbs-up" />
-                            <strong class="ml-2" v-text="addCommas(video.likes)" />
+                        <div class="flex">
+                            <div class="i-fa-solid:thumbs-up" />
+                            <strong class="ml-1" v-text="addCommas(video.likes)" />
                         </div>
-                        <div>
-                            <font-awesome-icon icon="thumbs-down" />
-                            <strong class="ml-2" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
+                        <div class="flex">
+                            <div class="i-fa-solid:thumbs-down" />
+                            <strong class="ml-1" v-text="video.dislikes >= 0 ? addCommas(video.dislikes) : '?'" />
                         </div>
                     </template>
                     <template v-if="video.likes < 0">
@@ -88,6 +88,12 @@
                     />
                 </div>
                 <PlaylistAddModal v-if="showModal" :video-id="getVideoId()" @close="showModal = !showModal" />
+                <ShareModal
+                    v-if="showShareModal"
+                    :video-id="getVideoId()"
+                    :current-time="currentTime"
+                    @close="showShareModal = !showShareModal"
+                />
                 <div class="flex">
                     <div class="self-center children:mr-1 my-1">
                         <!-- RSS Feed button -->
@@ -105,15 +111,10 @@
                             <font-awesome-icon icon="rss" />
                         </a>
                         <!-- watch on youtube button -->
-                        <a :href="`https://youtu.be/${getVideoId()}`" class="btn <lg:hidden">
-                            <i18n-t keypath="player.watch_on" tag="strong">
-                                <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-                            </i18n-t>
-                        </a>
-                        <!-- only visible on small screens -->
-                        <a :href="`https://youtu.be/${getVideoId()}`" class="btn lg:hidden">
-                            <font-awesome-icon class="mx-1.5" :icon="['fab', 'youtube']" />
-                        </a>
+                        <button class="btn" @click="showShareModal = !showShareModal">
+                            <i18n-t class="lt-lg:hidden" keypath="actions.share" tag="strong"></i18n-t>
+                            <font-awesome-icon class="mx-1.5" icon="fa-share" />
+                        </button>
                         <!-- LBRY -->
                         <a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
                             <i18n-t keypath="player.watch_on" tag="strong">LBRY</i18n-t>
@@ -211,6 +212,7 @@ import ErrorHandler from "./ErrorHandler.vue";
 import CommentItem from "./CommentItem.vue";
 import ChaptersBar from "./ChaptersBar.vue";
 import PlaylistAddModal from "./PlaylistAddModal.vue";
+import ShareModal from "./ShareModal.vue";
 import PlaylistVideos from "./PlaylistVideos.vue";
 
 export default {
@@ -222,6 +224,7 @@ export default {
         CommentItem,
         ChaptersBar,
         PlaylistAddModal,
+        ShareModal,
         PlaylistVideos,
     },
     data() {
@@ -245,6 +248,7 @@ export default {
             smallViewQuery: smallViewQuery,
             smallView: smallViewQuery.matches,
             showModal: false,
+            showShareModal: false,
             isMobile: true,
             currentTime: 0,
         };
@@ -376,7 +380,10 @@ export default {
 
                         const parser = new DOMParser();
                         const xmlDoc = parser.parseFromString(this.video.description, "text/html");
-                        xmlDoc.querySelectorAll("a").forEach(elem => (elem.outerHTML = elem.getAttribute("href")));
+                        xmlDoc.querySelectorAll("a").forEach(elem => {
+                            if (!elem.innerText.match(/(?:[\d]{1,2}:)?(?:[\d]{1,2}):(?:[\d]{1,2})/))
+                                elem.outerHTML = elem.getAttribute("href");
+                        });
                         xmlDoc.querySelectorAll("br").forEach(elem => (elem.outerHTML = "\n"));
                         this.video.description = this.urlify(xmlDoc.querySelector("body").innerHTML)
                             .replaceAll(/(?:http(?:s)?:\/\/)?(?:www\.)?youtube\.com(\/[/a-zA-Z0-9_?=&-]*)/gm, "$1")