Fix styling bugs, fix player not switching source after error, fix allowed state in extension, add ip locked sourced for extension

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>

src/backend/extension/messaging.ts

@@ -37,7 +37,7 @@ export async function sendExtensionRequest<T>(
   ops: Omit<MessagesMetadata["makeRequest"]["req"], "requestDomain">,
 ): Promise<ExtensionMakeRequestResponse<T> | null> {
   return sendMessage("makeRequest", {
-    requestDomain: window.location.origin,
+    requestDomain: window.location.origin, // TODO unsafe
     ...ops,
   });
 }
@@ -54,13 +54,16 @@ export async function setDomainRule(
 export async function extensionInfo(): Promise<
   MessagesMetadata["hello"]["res"] | null
 > {
-  return sendMessage(
+  const message = await sendMessage(
     "hello",
     {
       requestDomain: window.location.origin,
     },
     300,
   );
+  if (!message?.success) return null;
+  if (!message.allowed) return null;
+  return message;
 }
 
 export function isExtensionActiveCached(): boolean {

src/backend/extension/plasmo.ts

@@ -13,6 +13,7 @@ export type ExtensionBaseResponse<T = object> =
 
 export type ExtensionHelloResponse = ExtensionBaseResponse<{
   version: string;
+  allowed: boolean;
 }>;
 
 export interface ExtensionMakeRequest extends ExtensionBaseRequest {
@@ -38,10 +39,6 @@ export interface ExtensionPrepareStreamRequest extends ExtensionBaseRequest {
   responseHeaders?: Record<string, string>;
 }
 
-export interface ExtensionHelloReply {
-  version: string;
-}
-
 export interface MmMetadata {
   hello: {
     req: ExtensionBaseRequest;

src/backend/providers/providers.ts

@@ -15,6 +15,7 @@ export function getProviders() {
     return makeProviders({
       fetcher: makeExtensionFetcher(),
       target: targets.BROWSER_EXTENSION,
+      consistentIpForRequests: true,
     });
   }
 

src/components/player/atoms/settings/SourceSelectingView.tsx

@@ -147,7 +147,7 @@ export function SourceSelectionView({
       <Menu.BackLink onClick={() => router.navigate("/")}>
         {t("player.menus.sources.title")}
       </Menu.BackLink>
-      <Menu.Section>
+      <Menu.Section className="pb-4">
         {sources.map((v) => (
           <SelectableLink
             key={v.id}

src/stores/player/slices/source.ts

@@ -116,6 +116,7 @@ export const createSourceSlice: MakeSlice<SourceSlice> = (set, get) => ({
   },
   setSourceId(id) {
     set((s) => {
+      s.status = playerStatus.PLAYING;
       s.sourceId = id;
     });
   },
@@ -153,6 +154,8 @@ export const createSourceSlice: MakeSlice<SourceSlice> = (set, get) => ({
       s.qualities = qualities as SourceQuality[];
       s.currentQuality = loadableStream.quality;
       s.captionList = captions;
+      s.interface.error = undefined;
+      s.status = playerStatus.PLAYING;
     });
     const store = get();
     store.redisplaySource(startAt);
@@ -166,7 +169,10 @@ export const createSourceSlice: MakeSlice<SourceSlice> = (set, get) => ({
       automaticQuality: qualityPreferences.quality.automaticQuality,
       lastChosenQuality: quality,
     });
-
+    set((s) => {
+      s.interface.error = undefined;
+      s.status = playerStatus.PLAYING;
+    });
     store.display?.load({
       source: loadableStream.stream,
       startAt,
@@ -182,6 +188,8 @@ export const createSourceSlice: MakeSlice<SourceSlice> = (set, get) => ({
       if (!selectedQuality) return;
       set((s) => {
         s.currentQuality = quality;
+        s.status = playerStatus.PLAYING;
+        s.interface.error = undefined;
       });
       store.display?.load({
         source: selectedQuality,

src/utils/language.ts

@@ -86,7 +86,7 @@ function populateLanguageCode(language: string): string {
  * @returns pretty format for language, null if it no info can be found for language
  */
 export function getPrettyLanguageNameFromLocale(locale: string): string | null {
-  const tag = getTag(populateLanguageCode(locale), true);
+  const tag = getTag(locale, true);
   const lang = tag?.language?.Description?.[0] ?? null;
   if (!lang) return null;