[call-me] - add attribution

2024-11-28 23:45:04 +01:00
parent fbaab2fd95
commit 94c8b3c3bd
4 changed files with 22 additions and 1 deletions
@@ -1,6 +1,6 @@
 {
    "name": "call-me",
-    "version": "1.0.20",
+    "version": "1.0.21",
    "description": "Your Go-To for Instant Video Calls",
    "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com",
    "license": "AGPLv3",
@@ -10,6 +10,7 @@ const socket = io();
 const config = { iceServers: [{ urls: 'stun:stun.l.google.com:19302' }] };

 // DOM elements
+const attribution = document.querySelector('#attribution');
 const randomImage = document.querySelector('#randomImage');
 const sessionTime = document.querySelector('#sessionTime');
 const githubDiv = document.querySelector('#githubDiv');
@@ -59,6 +60,12 @@ async function fetchRandomImage() {
        // Update the image source
        randomImage.src = sessionStorage.cachedImage;
        console.log('Fetched and cached image');
+
+        // Create and display attribution
+        const attributionText = `Photo by <a href="${data.user.links.html}?utm_source=call-me&utm_medium=referral" target="_blank">${data.user.name}</a> on <a href="https://unsplash.com/?utm_source=call-me&utm_medium=referral target="_blank"">Unsplash</a>`;
+
+        // Assuming you have an element with id 'attribution' for the attribution text
+        attribution.innerHTML = attributionText;
    } catch (error) {
        console.error('Error fetching image', error.message);
    }
@@ -39,6 +39,9 @@
    </head>

    <body>
+        <!-- The attribution text will be injected here -->
+        <p id="attribution"></p>
+
        <!-- Optional Random BG Images -->
        <img id="randomImage" />

@@ -37,6 +37,17 @@ body {
    }
 }

+/* Unsplash and Author attribution */
+#attribution {
+    position: absolute;
+    padding: 10px;
+    bottom: 0;
+    right: 10px;
+    color: white;
+    background: rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius);
+}
+
 /* Random image */
 img {
    width: 100%;