Merge pull request #3642 from dragos-efy/efy

Fix: Share Button

package.json

@@ -12,7 +12,7 @@
     },
     "dependencies": {
         "dompurify": "3.1.3",
-        "efy": "24.5.19",
+        "efy": "24.5.23",
         "fast-xml-parser": "4.3.6",
         "hotkeys-js": "3.13.7",
         "javascript-time-ago": "2.5.10",
@@ -38,7 +38,7 @@
         "@vitejs/plugin-legacy": "5.4.0",
         "@vitejs/plugin-vue": "5.0.4",
         "@vue/compiler-sfc": "3.4.25",
-        "efy": "24.5.19",
+        "efy": "24.5.23",
         "eslint": "8.57.0",
         "eslint-config-prettier": "9.1.0",
         "eslint-plugin-prettier": "5.1.3",

src/components/ShareModal.vue

@@ -23,7 +23,7 @@
             <h6 class="mb-2 mt-2" v-text="generatedLink" />
         </a>
         <QrCode v-if="showQrCode" :text="generatedLink" class="mb-[10rem]" />
-        <div class="flex flex-wrap justify-end" style="gap: var(--efy_gap0)">
+        <div class="flex flex-wrap" style="gap: var(--efy_gap0)">
             <button v-t="'actions.generate_qrcode'" class="btn" @click="showQrCode = !showQrCode" />
             <button v-t="'actions.follow_link'" class="btn ml-3" @click="followLink()" />
             <button v-t="'actions.copy_link'" class="btn ml-3" @click="copyLink()" />

src/components/VideoPlayer.vue

@@ -484,7 +484,7 @@ export default {
                     seekBarColors: {
                         base: "rgba(255, 255, 255, 0.3)",
                         buffered: "rgba(255, 255, 255, 0.54)",
-                        played: "var(--efy_piped_color1)",
+                        played: "var(--efy_piped_color)",
                     },
                 };
 

src/components/WatchVideo.vue

@@ -712,31 +712,21 @@ video::-webkit-media-text-track-display {
 video::cue {
     background: transparent;
 }
-.player-container.pp-trans video::-webkit-media-text-track-display {
-    background: transparent !important;
-    backdrop-filter: none;
-    margin-bottom: unset;
-    line-height: 1.2;
-    text-shadow: 0 0 5rem #000;
-}
-
-.player-container.pp-solid video::-webkit-media-text-track-display {
-    background: var(--efy_bg) !important;
-    color: var(--efy_text);
-    backdrop-filter: none;
-}
-
-@media (width <= 768px) {
-    .share-btn {
-        aspect-ratio: 1;
+.player-container {
+    &.pp-trans video::-webkit-media-text-track-display {
+        background: transparent !important;
+        backdrop-filter: none;
+        margin-bottom: unset;
+        line-height: 1.2;
+        text-shadow: 0 0 5rem #000;
     }
-    .share-btn strong {
-        display: none;
-    }
-    .share-btn svg {
-        margin: 0;
+    &.pp-solid video::-webkit-media-text-track-display {
+        background: var(--efy_bg) !important;
+        color: var(--efy_text);
+        backdrop-filter: none;
     }
 }
+
 @media (max-width: 639px) {
     video::-webkit-media-text-track-display {
         font-size: 16rem !important;

src/piped.js

@@ -48,11 +48,14 @@ $ready('#efy_sidebar', ()=>{
     }
 
     // Get EFY Color Gradient in Piped
-    let efy_colors = efy.colors;
-    efy_colors.forEach((a,i)=>{
-        let b = a.split(' '); b.shift(); b[3] = '/ ' + b[3];
-        efy_colors[i] = `oklch(${b.join(' ')})`;
-    });
-    $css_prop('--efy_piped_color1', String(efy_colors));
+    const efy_piped_color =()=>{ let efy_colors = [];
+        efy.colors.forEach((a,i)=>{
+            a = a.split(' ').slice(1); a[3] = `/ ${a[3]}`;
+            efy_colors[i] = `oklch(${a.join(' ')})`;
+        });
+        $css_prop('--efy_piped_color', String(efy_colors));
+    }; efy_piped_color();
+
+    $event($('#efy_gradient'), 'change', efy_piped_color);
 
 }, 1);