beta testing vibeTag feature

ghobs91 · Apr 18, 2024 · ee32c01 · ee32c01
1 parent 92ad91d
commit ee32c01
Show file tree

Hide file tree

Showing 4 changed files with 190 additions and 29 deletions.
diff --git a/src/components/icon.jsx b/src/components/icon.jsx
@@ -76,6 +76,8 @@ export const ICONS = {
   mute: () => import('@iconify-icons/mingcute/volume-mute-line'),
   unmute: () => import('@iconify-icons/mingcute/volume-line'),
   block: () => import('@iconify-icons/mingcute/forbid-circle-line'),
+  bait: () => import('@iconify-icons/mingcute/fish-line'),
+  positive: () => import('@iconify-icons/mingcute/finger-rock-line'),
   unblock: [
     () => import('@iconify-icons/mingcute/forbid-circle-line'),
     '180deg',

diff --git a/src/components/status.css b/src/components/status.css
@@ -1398,6 +1398,16 @@ a.card:is(:hover, :focus):visited {
 
 /* ACTIONS */
 
+li.timeline-item-container > .status-link {
+  margin-bottom: 10px !important;
+}
+.timeline-item-container {
+  background-color: #18191a !important;
+  -moz-border-radius: 15px 15px 0px 0px;
+  -webkit-border-radius: 15px 15px 0px 0px;
+  border-radius: 15px 15px 0px 0px;
+}
+
 .status .actions {
   display: flex;
   gap: 15px;
@@ -1436,19 +1446,27 @@ a.card:is(:hover, :focus):visited {
 .status .action > button.plain.reblog-button:not(:disabled):is(:hover, :focus) {
   color: var(--reblog-color);
 }
-li.timeline-item-container > .status-link {
-  margin-bottom: 10px !important;
+.status .action > button.plain.clickbait-button {
+  color: #e95252;
+  border-color: #e95252;
 }
-.timeline-item-container {
-  background-color: #18191a !important;
-  -moz-border-radius: 15px 15px 0px 0px;
-  -webkit-border-radius: 15px 15px 0px 0px;
-  border-radius: 15px 15px 0px 0px;
+.status .action > button.plain.positive-button {
+  color: #93e952;
+  border-color: #93e952;
 }
+
 .status .action > button.plain.reblog-button.checked {
   color: var(--reblog-color);
   border-color: var(--reblog-color);
 }
+.status .action > button.plain.clickbait-button.checked {
+  color: rgb(242, 164, 164);
+  background-color: #f00;
+}
+.status .action > button.plain.positive-button.checked {
+  background-color: #326a2e;;
+  color: green;
+}
 @keyframes reblogged {
   5% {
     transform: translate(-2px, -2px);

diff --git a/src/components/status.jsx b/src/components/status.jsx
@@ -60,7 +60,7 @@ import MenuLink from './menu-link';
 import RelativeTime from './relative-time';
 import TranslationBlock from './translation-block';
 import { useLocation } from 'react-router-dom';
-import { createNostrUser, sendVibeEvent } from '../utils/vibe-tag';
+import { createNostrUser, sendVibeEvent, getVibeTagCount, setVibeTagCount, vibeCountDict } from '../utils/vibe-tag';
 
 const INLINE_TRANSLATE_LIMIT = 140;
 const throttle = pThrottle({
@@ -80,6 +80,8 @@ const visibilityText = {
   direct: 'Private mention',
 };
 
+let vibeTagCountSet = false;
+
 function Status({
   statusID,
   status,
@@ -125,6 +127,12 @@ function Status({
   if (!status) {
     status = snapStates.statuses[sKey] || snapStates.statuses[statusID];
     sKey = statusKey(status?.id, instance);
+    if (!vibeTagCountSet){
+      setVibeTagCount(status.id, 'clickbait');
+      setVibeTagCount(status.id, 'positive');
+      vibeTagCountSet = true;
+    }
+
   }
   if (!status) {
     return null;
@@ -147,6 +155,10 @@ function Status({
     repliesCount,
     reblogged,
     reblogsCount,
+    labeledClickbait,
+    labeledClickbaitCount,
+    labeledPositiveVibe,
+    labeledPositiveVibeCount,
     favourited,
     favouritesCount,
     bookmarked,
@@ -175,7 +187,7 @@ function Status({
     _filtered,
   } = status;
 
-  console.debug('RENDER Status', id, status?.account.displayName, quoted);
+  // console.debug('RENDER Status', id, status?.account.displayName, quoted);
 
   const debugHover = (e) => {
     if (e.shiftKey) {
@@ -375,11 +387,39 @@ function Status({
     );
   }, [mediaAttachments]);
 
+  const vibeLabelClickbait = async () => {
+    try {
+      states.statuses[sKey] = {
+        ...status,
+        labeledClickbait: !labeledClickbait,
+        labeledClickbaitCount: vibeCountDict['clickbait'].length,
+      };
+      sendVibeEvent(status.id, 'mastodon', 'clickbait');
+    } catch (e) {
+      console.error(e);
+      // Revert optimistism
+      states.statuses[sKey] = status;
+      return false;
+    }
+  };
+
+  const vibeLabelPositive = async () => {
+    try {
+      states.statuses[sKey] = {
+        ...status,
+        labeledPositiveVibe: !labeledPositiveVibe,
+        labeledPositiveVibeCount: vibeCountDict['positive'].length,
+      };
+      sendVibeEvent(status.id, 'mastodon', 'positive');
+    } catch (e) {
+      console.error(e);
+      // Revert optimistism
+      states.statuses[sKey] = status;
+      return false;
+    }
+  };
+
   const boostStatus = async () => {
-    // if (!authenticated) {
-    //   alert(unauthInteractionErrorMessage);
-    //   return false;
-    // }
     try {
       if (!sameInstance) {
         (async () => {
@@ -470,7 +510,7 @@ function Status({
 
   const favouriteStatus = async (e) => {
     createNostrUser();
-    sendVibeEvent(status.id, 'positive');
+    sendVibeEvent(status.id, 'mastodonPost', 'positive');
     if (!sameInstance) {
       (async () => {
         try {
@@ -1547,6 +1587,38 @@ function Status({
                 </>
               )}
             </div>
+
+            <div class={`actions ${_deleted ? 'disabled' : ''}`}>
+              <div class="action has-count">
+                <VibeTagButton
+                  checked={labeledClickbait}
+                  title={['Clickbait']}
+                  alt={['Clickbait']}
+                  class="clickbait-button vibetag-button"
+                  icon="bait"
+                  text="Clickbait"
+                  count={labeledClickbaitCount}
+                  onClick={vibeLabelClickbait}
+                  style="color: #e95252"
+                />
+              </div>
+              <div class="action has-count">
+                <VibeTagButton
+                  checked={labeledPositiveVibe}
+                  title={['Positive']}
+                  alt={['Positive']}
+                  class="positive-button vibetag-button"
+                  icon="positive"
+                  text="Positive Vibes"
+                  count={labeledPositiveVibeCount}
+                  onClick={vibeLabelPositive}
+                  style="color: #93e952"
+                />
+
+              </div>
+            </div>
+
+
             <div class={`actions ${_deleted ? 'disabled' : ''}`}>
               <div class="action has-count">
                 <StatusButton
@@ -2163,6 +2235,61 @@ function StatusButton({
   );
 }
 
+function VibeTagButton({
+  checked,
+  count,
+  class: className,
+  title,
+  alt,
+  icon,
+  text,
+  onClick,
+  ...props
+}) {
+  if (typeof title === 'string') {
+    title = [title, title];
+  }
+  if (typeof alt === 'string') {
+    alt = [alt, alt];
+  }
+
+  const [buttonTitle, setButtonTitle] = useState(title[0] || '');
+  const [iconAlt, setIconAlt] = useState(alt[0] || '');
+
+  useEffect(() => {
+    if (checked) {
+      setButtonTitle(title[1] || '');
+      setIconAlt(alt[1] || '');
+    } else {
+      setButtonTitle(title[0] || '');
+      setIconAlt(alt[0] || '');
+    }
+  }, [checked, title, alt]);
+
+  return (
+    <button
+      type="button"
+      title={buttonTitle}
+      class={`plain ${className} ${checked ? 'checked' : ''}`}
+      onClick={(e) => {
+        if (!onClick) return;
+        e.preventDefault();
+        e.stopPropagation();
+        onClick(e);
+      }}
+      {...props}
+    >{text}
+      <Icon icon={icon} size="l" alt={iconAlt} />
+      {!!count && count > 0 && (
+        <>
+          {' '}
+          <small title={count}>{shortenNumber(count)}</small>
+        </>
+      )}
+    </button>
+  );
+}
+
 export function formatDuration(time) {
   if (!time) return;
   let hours = Math.floor(time / 3600);

diff --git a/src/utils/vibe-tag.js b/src/utils/vibe-tag.js
@@ -2,32 +2,26 @@ import { generateSecretKey, getPublicKey, finalizeEvent, verifyEvent } from 'nos
 import { bytesToHex } from '@noble/hashes/utils';
 import { Relay } from 'nostr-tools/relay';
 
+
+export let vibeCountDict = {
+  "clickbait": [],
+  "positive": []
+};
+
 export function createNostrUser() {
     let sk = generateSecretKey() // `sk` is a Uint8Array
     let skHex = bytesToHex(sk) 
     localStorage.setItem('nostrUserSecret', skHex);
 }
 
-export async function sendVibeEvent(vibeSubject, vibeTag) {
+export async function sendVibeEvent(vibeSubject, vibeSubjectType, vibeTag) {
     let sk = localStorage.getItem('nostrUserSecret');
-
     const relay = await Relay.connect('wss://relay.damus.io');
-
-    relay.subscribe([
-        {
-          kinds: [5183]
-        },
-      ], {
-        onevent(event) {
-          console.log('got event:', event)
-        }
-      })
-
     let eventTemplate = {
         kind: 5183,
         created_at: Math.floor(Date.now() / 1000),
         tags: [
-            ["subject", vibeSubject],
+            ["subject", vibeSubject, vibeSubjectType],
             ["tag", vibeTag]
         ],
         content: 'vibe tag',
@@ -36,7 +30,27 @@ export async function sendVibeEvent(vibeSubject, vibeTag) {
     // this assigns the pubkey, calculates the event id and signs the event in a single step
     const signedEvent = finalizeEvent(eventTemplate, sk)
     await relay.publish(signedEvent)
-
+    setVibeTagCount(vibeSubject, vibeTag)
     relay.close()
 
+}
+
+export async function getVibeTagCount(vibeTag) {
+  return vibeCountDict[vibeTag];
+}
+
+export async function setVibeTagCount(vibeSubject, vibeTag) {
+  const relay = await Relay.connect('wss://relay.damus.io');
+
+  relay.subscribe([
+    {
+      kinds: [5183]
+    },
+    ], {
+      onevent(event) {
+        if (event.tags[0][1] === vibeSubject && event.tags[1][1] === vibeTag && vibeCountDict[vibeTag].indexOf(event.id) === -1) {
+          vibeCountDict[vibeTag].push(event.id);
+        }
+      }
+    });
 }