fix selector for upload date and add back shorts' view

closes #173

README.md

@@ -45,7 +45,7 @@ Extra features:
 - Auto open comment section on each short
 - Hide overlay on shorts (title, channel, etc.)
 - Go to the next frame or previous frame with . and , while paused
-- Upload date above video title
+- View counter and upload date above video title
 
 ### Screenshots
 

_locales/en/messages.json

@@ -166,6 +166,9 @@
   "volumeSlider": {
     "message": "Volume Slider"
   },
+  "viewCounter": {
+    "message": "View Counter"
+  },
   "uploadDate": {
     "message": "Upload Date"
   },

manifest.json

@@ -3,7 +3,7 @@
   "name": "__MSG_extName__",
   "default_locale": "en",
   "description": "__MSG_extDescription__",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "action": { "default_popup": "index.html" },
   "permissions": ["storage"],
 

src/lib/Info.ts

@@ -1,12 +1,21 @@
 import { isVideoPlaying } from "./VideoState";
 import { BooleanDictionary } from "./definitions";
-import { getCurrentId, getOverlayElement, getUploadDate } from "./getters";
+import {
+  getCurrentId,
+  getOverlayElement,
+  getUploadDate,
+  getViews,
+} from "./getters";
 
 export function setInfo(features: BooleanDictionary) {
   if (!isVideoPlaying()) throw new Error("Video not playing");
 
   const addInfo = () => {
     const info = [];
+    if (features["viewCounter"]) {
+      const views = getViews().replace(/(\r\n|\n|\r)/gm, "");
+      if (views) info.push(views);
+    }
     if (features["uploadDate"]) {
       const uploadDate = getUploadDate().replace(/(\r\n|\n|\r)/gm, "");
       if (uploadDate) info.push(uploadDate);
@@ -16,9 +25,7 @@ export function setInfo(features: BooleanDictionary) {
     const h5 = document.createElement("h5");
     h5.id = `ytViews${getCurrentId()}`;
     h5.innerText = info.join(" | ");
-    overlayElement
-      .querySelector("ytd-reel-player-header-renderer h2")
-      ?.prepend(h5);
+    overlayElement.querySelector("reel-player-header-renderer h2")?.prepend(h5);
     clearInterval(views_interval);
   };
 

src/lib/declarations.ts

@@ -173,6 +173,7 @@ export const DEFAULT_FEATURES: BooleanDictionary = {
   playbackRate: true,
   volumeSlider: true,
   keybinds: true,
+  viewCounter: true,
   uploadDate: true,
 };
 
@@ -183,6 +184,7 @@ export const FEATURES_ORDER: string[] = [
   "playbackRate",
   "volumeSlider",
   "keybinds",
+  "viewCounter",
   "uploadDate",
 ];
 

src/lib/getters.ts

@@ -132,10 +132,20 @@ export function getOverlay() {
   ) as HTMLElement;
 }
 
+export function getViews() {
+  return (
+    document
+      .querySelector(
+        "#factoids > view-count-factoid-renderer > factoid-renderer > div",
+      )
+      ?.getAttribute("aria-label") ?? ""
+  );
+}
+
 export function getUploadDate() {
   return (
     document
-      .querySelector("#factoids ytd-factoid-renderer:nth-child(2) div")
+      .querySelector("#factoids > factoid-renderer:nth-child(3) > div")
       ?.getAttribute("aria-label") ?? ""
   );
 }