feat(webpage): basic coursera support

apps/app/src/icons.ts

@@ -5,8 +5,9 @@ const icons: Record<
   Exclude<SupportedMediaHost, SupportedMediaHost.Generic>,
   string | null
 > = {
-  [SupportedMediaHost.Bilibili]: `<g transform="scale(5.556)"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.73252 2.67094C3.33229 2.28484 3.33229 1.64373 3.73252 1.25764C4.11291 0.890684 4.71552 0.890684 5.09591 1.25764L7.21723 3.30403C7.27749 3.36218 7.32869 3.4261 7.37081 3.49407H10.5789C10.6211 3.4261 10.6723 3.36218 10.7325 3.30403L12.8538 1.25764C13.2342 0.890684 13.8368 0.890684 14.2172 1.25764C14.6175 1.64373 14.6175 2.28484 14.2172 2.67094L13.364 3.49407H14C16.2091 3.49407 18 5.28493 18 7.49407V12.9996C18 15.2087 16.2091 16.9996 14 16.9996H4C1.79086 16.9996 0 15.2087 0 12.9996V7.49406C0 5.28492 1.79086 3.49407 4 3.49407H4.58579L3.73252 2.67094ZM4 5.42343C2.89543 5.42343 2 6.31886 2 7.42343V13.0702C2 14.1748 2.89543 15.0702 4 15.0702H14C15.1046 15.0702 16 14.1748 16 13.0702V7.42343C16 6.31886 15.1046 5.42343 14 5.42343H4ZM5 9.31747C5 8.76519 5.44772 8.31747 6 8.31747C6.55228 8.31747 7 8.76519 7 9.31747V10.2115C7 10.7638 6.55228 11.2115 6 11.2115C5.44772 11.2115 5 10.7638 5 10.2115V9.31747ZM12 8.31747C11.4477 8.31747 11 8.76519 11 9.31747V10.2115C11 10.7638 11.4477 11.2115 12 11.2115C12.5523 11.2115 13 10.7638 13 10.2115V9.31747C13 8.76519 12.5523 8.31747 12 8.31747Z" fill="currentColor"></path></g>`,
-  [SupportedMediaHost.Vimeo]: `<path transform="scale(6.431) translate(0,-5)" d="m 15.72,9.431 c -0.069,1.514 -1.127,3.588 -3.172,6.22 -2.114,2.749 -3.903,4.124 -5.367,4.124 -0.906,0 -1.673,-0.837 -2.3,-2.512 C 4.463,15.728 4.044,14.194 3.626,12.659 3.161,10.985 2.662,10.147 2.128,10.147 c -0.116,0 -0.524,0.245 -1.221,0.733 L 0.176,9.937 C 0.943,9.263 1.7,8.588 2.445,7.912 3.469,7.028 4.237,6.562 4.75,6.515 5.96,6.399 6.705,7.227 6.985,8.998 c 0.302,1.912 0.511,3.101 0.628,3.566 0.349,1.586 0.733,2.378 1.152,2.378 0.326,0 0.815,-0.515 1.467,-1.543 0.651,-1.029 1,-1.812 1.047,-2.349 0.093,-0.888 -0.256,-1.333 -1.047,-1.333 -0.373,0 -0.757,0.085 -1.151,0.255 0.764,-2.504 2.224,-3.721 4.38,-3.652 1.598,0.047 2.351,1.084 2.259,3.111" fill="currentColor"></path>`,
+  [SupportedMediaHost.Bilibili]: `<path fill-rule="evenodd" clip-rule="evenodd" d="M 20.736 14.88 C 18.513 12.735 18.513 9.173 20.736 7.028 C 22.849 4.99 26.197 4.99 28.311 7.028 L 40.096 18.397 C 40.43 18.72 40.715 19.075 40.949 19.453 L 58.772 19.453 C 59.006 19.075 59.291 18.72 59.625 18.397 L 71.41 7.028 C 73.523 4.99 76.871 4.99 78.984 7.028 C 81.208 9.173 81.208 12.735 78.984 14.88 L 74.244 19.453 L 77.778 19.453 C 90.051 19.453 100 29.402 100 41.675 L 100 72.262 C 100 84.534 90.051 94.484 77.778 94.484 L 22.222 94.484 C 9.949 94.484 0 84.534 0 72.262 L 0 41.675 C 0 29.402 9.949 19.453 22.222 19.453 L 25.477 19.453 L 20.736 14.88 Z M 22.222 30.172 C 16.086 30.172 11.111 35.146 11.111 41.283 L 11.111 72.654 C 11.111 78.79 16.086 83.765 22.222 83.765 L 77.778 83.765 C 83.914 83.765 88.889 78.79 88.889 72.654 L 88.889 41.283 C 88.889 35.146 83.914 30.172 77.778 30.172 L 22.222 30.172 Z M 27.778 51.805 C 27.778 48.737 30.265 46.25 33.333 46.25 C 36.402 46.25 38.889 48.737 38.889 51.805 L 38.889 56.772 C 38.889 59.84 36.402 62.328 33.333 62.328 C 30.265 62.328 27.778 59.84 27.778 56.772 L 27.778 51.805 Z M 66.667 46.25 C 63.598 46.25 61.111 48.737 61.111 51.805 L 61.111 56.772 C 61.111 59.84 63.598 62.328 66.667 62.328 C 69.735 62.328 72.222 59.84 72.222 56.772 L 72.222 51.805 C 72.222 48.737 69.735 46.25 66.667 46.25 Z" fill="currentColor"/>`,
+  [SupportedMediaHost.Vimeo]: `<path d="M 99.952 26.773 C 99.508 36.508 92.705 49.844 79.555 66.768 C 65.962 84.445 54.458 93.287 45.044 93.287 C 39.218 93.287 34.286 87.905 30.254 77.134 C 27.566 67.263 24.872 57.4 22.185 47.53 C 19.194 36.765 15.986 31.377 12.552 31.377 C 11.806 31.377 9.182 32.952 4.701 36.09 L 0 30.027 C 4.932 25.692 9.799 21.352 14.59 17.005 C 21.175 11.321 26.113 8.324 29.412 8.022 C 37.193 7.276 41.983 12.6 43.783 23.988 C 45.725 36.283 47.069 43.929 47.822 46.919 C 50.066 57.117 52.535 62.21 55.229 62.21 C 57.325 62.21 60.47 58.898 64.663 52.287 C 68.849 45.671 71.093 40.636 71.395 37.183 C 71.993 31.473 69.749 28.612 64.663 28.612 C 62.264 28.612 59.795 29.158 57.261 30.252 C 62.174 14.15 71.562 6.324 85.426 6.768 C 95.701 7.07 100.544 13.739 99.952 26.773" fill="currentColor"/>`,
+  [SupportedMediaHost.Coursera]: `<path d="M 2.8 50.013 C 2.8 22.278 25.472 0.001 53.82 0.001 C 71.135 -0.12 87.347 8.489 96.943 22.903 L 75.688 35.232 C 70.696 28.099 62.527 23.863 53.82 23.893 C 39.244 23.893 27.298 36.043 27.298 50.013 C 27.298 63.983 39.244 76.133 53.82 76.133 C 62.954 76.192 71.463 71.505 76.294 63.754 L 97.339 76.306 C 87.854 91.149 71.422 100.093 53.808 99.999 C 25.472 100.024 2.8 77.321 2.8 50.013 Z" fill="currentColor" />`,
   [SupportedMediaHost.YouTube]: null,
 };
 

apps/app/src/web/plugin.ts

@@ -7,5 +7,6 @@ export const plugins = {
   bilibili: BilibiliPlugin,
   youtube: YouTubePlugin,
   vimeo: VimeoPlugin,
+  coursera: undefined,
   generic: undefined,
 } satisfies Record<SupportedMediaHost, string | undefined>;

apps/app/src/web/title.ts

@@ -8,4 +8,5 @@ export const titleParser: Record<
   bilibili: (title) => title.replace(/_哔哩哔哩_bilibili$/, ""),
   youtube: (title) => title.replace(/ - YouTube$/, ""),
   vimeo: (title) => title.replace(/ on Vimeo$/, ""),
+  coursera: (title) => title.replace(/ \| Coursera$/, ""),
 };

apps/app/src/web/url-match/coursera.ts

@@ -0,0 +1,19 @@
+import { noHashUrl } from "@/lib/url";
+import type { URLResolver } from "./base";
+import { SupportedMediaHost } from "./supported";
+
+export const courseraResolver: URLResolver = (url) => {
+  if (url.hostname !== "www.coursera.org") return null;
+  const cleaned = noHashUrl(url);
+  cleaned.search = "";
+
+  const source = new URL(url);
+  // const tempFrag = parseTempFrag(source.hash);
+  // addTempFrag(source, tempFrag);
+
+  return {
+    type: SupportedMediaHost.Coursera,
+    cleaned,
+    source,
+  };
+};

apps/app/src/web/url-match/index.ts

@@ -5,6 +5,7 @@ import { checkMediaType, type MediaType } from "@/patch/media-type";
 import type { MxSettings } from "@/settings/def";
 import type { URLResolveResult } from "./base";
 import { bilibiliResolver } from "./bilibili";
+import { courseraResolver } from "./coursera";
 import { genericResolver } from "./generic";
 import type { SupportedMediaHost } from "./supported";
 import { viemoResolver } from "./viemo";
@@ -57,7 +58,12 @@ export function resolveUrl(url: URL): URLResolveResult {
   if (url.protocol !== "http:" && url.protocol !== "https:") {
     return genericResolver(url);
   }
-  for (const resolve of [bilibiliResolver, youtubeResolver, viemoResolver]) {
+  for (const resolve of [
+    bilibiliResolver,
+    youtubeResolver,
+    viemoResolver,
+    courseraResolver,
+  ]) {
     const result = resolve(url);
     if (result) return result;
   }

apps/app/src/web/url-match/supported.ts

@@ -6,6 +6,7 @@ export const enum SupportedMediaHost {
   Bilibili = "bilibili",
   YouTube = "youtube",
   Vimeo = "vimeo",
+  Coursera = "coursera",
   Generic = "generic",
 }
 
@@ -18,13 +19,15 @@ export const mediaHostUrl: Record<SupportedHostNoGeneric, string> = {
   [SupportedMediaHost.Bilibili]: "https://www.bilibili.com",
   [SupportedMediaHost.YouTube]: "https://www.youtube.com",
   [SupportedMediaHost.Vimeo]: "https://www.viemo.com",
+  [SupportedMediaHost.Coursera]: "https://www.coursera.org",
 };
 
 export const mediaHostDisplayName: Record<SupportedMediaHost, string> = {
   [SupportedMediaHost.Bilibili]: "bilibili",
   [SupportedMediaHost.YouTube]: "YouTube",
   [SupportedMediaHost.Generic]: "Website",
   [SupportedMediaHost.Vimeo]: "Viemo",
+  [SupportedMediaHost.Coursera]: "Coursera",
 };
 
 export const noGeneric = (labels: Record<SupportedMediaHost, string>) =>

apps/app/src/web/url-match/view-type.ts

@@ -39,6 +39,7 @@ export function getSupportedViewType(url: MediaInfo): MediaViewType[] {
     case SupportedMediaHost.Vimeo:
       return [MEDIA_WEBPAGE_VIEW_TYPE, MEDIA_EMBED_VIEW_TYPE];
     case SupportedMediaHost.Bilibili:
+    case SupportedMediaHost.Coursera:
       return [MEDIA_WEBPAGE_VIEW_TYPE];
     default:
       assertNever(url.type);