import * as React from "react" ; import { SubscriptionListState } from "../../Subscription/SubscriptionList/SubscriptionListStore" ; import { SubscriptionContentsState } from "../../Subscription/SubscriptionContents/SubscriptionContentsStore" ; import { SubscriptionContentSerializer } from "../../../../../domain/Subscriptions/SubscriptionContent/SubscriptionContent" ; import { SubscriptionSerializer } from "../../../../../domain/Subscriptions/Subscription" ; import { ShortcutKeyContainer } from "../ShortcutKeyContainer/ShortcutKeyContainer" ; import { UserScriptEvent } from "./UserScriptEvent" ; export interface UserScriptActiveContent { id : string ; author : string ; publishedDate : Date ; updatedDate : Date ; title : string ; body : string ; url : string ; } export interface UserScriptActiveSubscription { title : string ; url : string ; iconUrl : string ; htmlUrl : string ; } export type UserScriptWindow = typeof globalThis & Window & { userScript : { getActiveContent ( ) : UserScriptActiveContent | undefined ; getActiveSubscription ( ) : UserScriptActiveSubscription | undefined ; triggerKey ( keys , action ? ) : void ; registerKey ( keys , handler ) : void ; getDefaultActions : ( ) => any ; event : UserScriptEvent ; } ; } ; export interface UserScriptContainerProps { shortcutKey : ShortcutKeyContainer | null ; subscriptionContents : SubscriptionContentsState ; subscriptionList : SubscriptionListState ; } export class UserScriptContainer extends React . Component < UserScriptContainerProps , { } > { getActiveContent = ( ) => { const activeContentId = this . props . subscriptionContents . focusContentId ; if ( ! activeContentId ) { return ; } const activeContent = this . props . subscriptionContents . getContent ( activeContentId ) ; if ( ! activeContent ) { return ; } const subscriptionContentJSON = SubscriptionContentSerializer . toJSON ( activeContent ) ; return { id : subscriptionContentJSON . id , author : subscriptionContentJSON . author , publishedDate : new Date ( subscriptionContentJSON . publishedDate ) , updatedDate : new Date ( subscriptionContentJSON . updatedDate ) , title : subscriptionContentJSON . title , body : subscriptionContentJSON . body , url : subscriptionContentJSON . url } ; } ; getActiveSubscription = ( ) => { const currentSubscriptionId = this . props . subscriptionList . currentSubscriptionId ; if ( ! currentSubscriptionId ) { return ; } const currentSubscription = this . props . subscriptionList . getItem ( currentSubscriptionId ) ; if ( ! currentSubscription ) { return ; } const subscriptionJSON = SubscriptionSerializer . toJSON ( currentSubscription ) ; return { title : subscriptionJSON . title , url : subscriptionJSON . url , iconUrl : subscriptionJSON . iconUrl , htmlUrl : subscriptionJSON . htmlUrl } ; } ; triggerKey = ( key , action ? ) => { const shortcutKey = this . props . shortcutKey ; if ( shortcutKey ) { shortcutKey . triggerKey ( key , action ) ; } } ; registerKey = ( key , handler ) => { const shortcutKey = this . props . shortcutKey ; if ( shortcutKey ) { shortcutKey . registerKey ( key , handler ) ; } } ; componentDidMount ( ) { const userScriptEvent = new UserScriptEvent ( ) ; ( window as UserScriptWindow ) . userScript = { getActiveContent : this . getActiveContent , getActiveSubscription : this . getActiveSubscription , triggerKey : this . triggerKey , registerKey : this . registerKey , getDefaultActions : ( ) => { return this . props . shortcutKey ! . defaultActions ; } , event : userScriptEvent } ; const UserScriptInit = new CustomEvent ( "userscript-init" , { detail : { userScript : ( window as UserScriptWindow ) . userScript } } ) ; window . dispatchEvent ( UserScriptInit ) ; } componentWillUnmount ( ) { delete ( window as UserScriptWindow ) . userScript ; const UserScriptInit = new CustomEvent ( "userscript-uninit" ) ; window . dispatchEvent ( UserScriptInit ) ; } render ( ) { return null ; } }