feat: add notice for init guide

apps/app/src/lib/remote-player/provider.ts

@@ -294,14 +294,22 @@ function notifyLogin() {
   if (notified) return;
   new Notice(
     createFragment((e) => {
-      e.appendText("You're using a webpage media player");
-      e.createEl("p", { text: "To login to a website, use:" });
-      e.createEl("ul", {}, (ul) => {
-        ul.createEl("li", { text: 'the "Login" command' });
-        ul.createEl("li", { text: "the Settings tab" });
-      });
+      e.appendText("You're using a webpage media player.");
+      e.createEl(
+        "p",
+        {
+          text: "If you are requested to login, you can open a browser to login from:",
+        },
+        (p) => {
+          p.createEl("br");
+          p.appendText('- the "Login" command');
+          p.createEl("br");
+          p.appendText("- the entry in settings tab");
+        },
+      );
+      e.appendText("Click to dismiss this notice.");
     }),
-    10e3,
+    0,
   );
   localStorage.setItem("mx:webview-login-notified", "1");
 }

apps/app/src/media-view/base.tsx

@@ -1,4 +1,10 @@
-import type { Component, Menu, View, ItemView } from "obsidian";
+import {
+  type Component,
+  type Menu,
+  type View,
+  type ItemView,
+  Notice,
+} from "obsidian";
 import type ReactDOM from "react-dom/client";
 import type { MediaViewStoreApi } from "@/components/context";
 import { toURL } from "@/lib/url";
@@ -42,9 +48,30 @@ export function titleFromUrl(src: string): string {
 }
 
 export function addAction(player: PlayerComponent & ItemView) {
+  function noticeBehavior(action: string) {
+    const notified = localStorage.getItem("mx:media-notetaking-notice");
+    if (notified) return;
+    new Notice(
+      createFragment((e) => {
+        e.appendText(
+          `You are taking ${action} from media player. By default, they will only be saved in the media note. `,
+        );
+        e.createEl("p", {
+          text: `To take ${action} or control playback from abritrary note, use command when focused on the note`,
+        });
+        e.createEl("p", {
+          text: "PS: you can assign a hotkey to each command in the settings",
+        });
+        e.appendText("Click to dismiss this notice.");
+      }),
+      0,
+    );
+    localStorage.setItem("mx:media-noting-notice", "1");
+  }
   player.addAction("star", "Timestamp", () => {
     const info = player.getMediaInfo();
     if (!info) return;
+    noticeBehavior("timestamp");
     openOrCreateMediaNote(info, player).then((ctx) => {
       takeTimestamp(player, ctx);
     });
@@ -53,6 +80,7 @@ export function addAction(player: PlayerComponent & ItemView) {
     player.addAction("camera", "Screenshot", () => {
       const info = player.getMediaInfo();
       if (!info) return;
+      noticeBehavior("screenshot");
       openOrCreateMediaNote(info, player).then((ctx) =>
         saveScreenshot(player, ctx),
       );