add view count

Author: Jon Dahl

components/player-page.tsx

@@ -36,6 +36,8 @@ const PlayerPage: React.FC<PageProps> = ({ playbackId, videoExists, shareUrl, po
   const [metadataLoading, setMetadataLoading] = useState(false);
   const [metadata, setMetadata] = useState<any>(null);
   const [isMetadataCopied, setIsMetadataCopied] = useState(false);
+  const [viewCount, setViewCount] = useState<number | null>(null);
+  const [viewCountLoading, setViewCountLoading] = useState(false);
   const copyTimeoutRef = useRef<number | null>(null);
   const metadataCopyTimeoutRef = useRef<number | null>(null);
   const router = useRouter();
@@ -65,6 +67,30 @@ const PlayerPage: React.FC<PageProps> = ({ playbackId, videoExists, shareUrl, po
     }
   }, [playerType]);
 
+  useEffect(() => {
+    if (showAdvanced) {
+      fetchViewCount();
+    }
+  }, [showAdvanced, playbackId]);
+
+  const fetchViewCount = async () => {
+    if (!playbackId) return;
+    
+    console.log('Fetching view count for playback ID:', playbackId);
+    setViewCountLoading(true);
+    try {
+      const response = await fetch(`/api/views/${playbackId}`);
+      const data = await response.json();
+      console.log('View count API response:', data);
+      setViewCount(typeof data.views === 'number' ? data.views : null);
+    } catch (error) {
+      console.error('Error fetching view count:', error);
+      setViewCount(null);
+    } finally {
+      setViewCountLoading(false);
+    }
+  };
+
   const color = useMemo(() => {
     if (router.query?.color) {
       const val = (router.query?.color as string);
@@ -330,6 +356,16 @@ const PlayerPage: React.FC<PageProps> = ({ playbackId, videoExists, shareUrl, po
                       </span>
                     ))}
                   </div>
+                  <div className="view-count">
+                    <span className="label">Views (7d): </span>
+                    {viewCountLoading ? (
+                      <span className="loading">Loading...</span>
+                    ) : typeof viewCount === 'number' ? (
+                      <span className="count">{viewCount.toLocaleString()}</span>
+                    ) : (
+                      <span className="error">No data</span>
+                    )}
+                  </div>
                   <div className="metadata-toggle">
                     <a
                       onClick={toggleMetadata}
@@ -556,6 +592,25 @@ const PlayerPage: React.FC<PageProps> = ({ playbackId, videoExists, shareUrl, po
               flex: 0 0 300px;
               margin-top: 40px;
             }
+            .view-count {
+              margin-top: 15px;
+              padding-top: 15px;
+              border-top: 1px solid rgba(255, 255, 255, 0.1);
+              display: flex;
+              align-items: center;
+              gap: 8px;
+            }
+            .view-count .loading {
+              color: #ccc;
+              font-style: italic;
+            }
+            .view-count .count {
+              color: #fff;
+              font-weight: bold;
+            }
+            .view-count .error {
+              color: #ff6b6b;
+            }
             @media (max-width: 900px) {
               .content-container {
                 flex-direction: column;

pages/api/views/[playbackId].ts

@@ -0,0 +1,63 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import Mux from '@mux/mux-node';
+
+const mux = new Mux();
+
+interface ViewsResponse {
+  data: {
+    value: number;
+  };
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse): Promise<void> {
+  const { method } = req;
+  const { playbackId } = req.query;
+
+  if (method !== 'GET') {
+    res.setHeader('Allow', ['GET']);
+    res.status(405).end(`Method ${method} Not Allowed`);
+    return;
+  }
+
+  try {
+    console.log('Getting view count for playback ID:', playbackId);
+    
+    // Use the raw API endpoint for metrics/views/overall
+    const response = await mux.request({
+      method: 'get',
+      path: '/data/v1/metrics/views/overall',
+      query: {
+        timeframe: ['7:days'],
+        filters: [`video_id:${playbackId}`]
+      }
+    });
+
+    console.log('Mux Data API response:', JSON.stringify(response, null, 2));
+
+    // Get the total view count from the response
+    const totalViews = (response as unknown as ViewsResponse).data.value || 0;
+    console.log('Total views:', totalViews);
+
+    res.json({
+      views: totalViews,
+      timeframe: '7d'
+    });
+  } catch (e: any) {
+    console.error('Error fetching view count:', e);
+    if (e instanceof Error) {
+      console.error('Error details:', e.message);
+      console.error('Error stack:', e.stack);
+    }
+    
+    // Check if it's a Mux API error
+    if (e.status === 403) {
+      console.error('Mux Data API access denied. Make sure MUX_TOKEN_ID and MUX_TOKEN_SECRET are set correctly.');
+      res.status(403).json({ error: 'Mux Data API access denied' });
+    } else if (e.status === 404) {
+      console.error('No data found for this playback ID');
+      res.status(404).json({ error: 'No view data found for this video' });
+    } else {
+      res.status(500).json({ error: 'Error fetching view count' });
+    }
+  }
+}