move ApiConfig to shared library code

packages/components/src/api/ApiConfig.ts

@@ -338,6 +338,10 @@ class ApiConfig {
     return `${this.getScheme()}://${this.getNewApiHost()}/moderation/categories/${categoryToken}/delete`;
   }
 
+  obsEventsWebsocket(twitchUsername: string) : string {
+    return `ws://localhost:54321/obs/${twitchUsername}`;
+  }
+
   private getScheme() : string {
     return this.useSsl ? "https" : "http";
   }

packages/components/src/index.tsx

@@ -1,7 +1,10 @@
 import Box from "./components/Box";
 import Common from "./components/Common";
+//import { ApiConfig } from "./api/ApiConfig";
 
 export { 
   Box,
   Common,
-};
+};
+
+export * from './api/ApiConfig';

packages/fakeyou/package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@storyteller/components": "0.1.0",
     "@colormap/core": "0.1.0-3",
     "@colormap/presets": "0.1.0-4",
     "@craco/craco": "^6.4.3",
-    "@storyteller/components": "0.1.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",

packages/fakeyou/src/App.tsx

@@ -2,7 +2,7 @@ import 'bulma/css/bulma.css'
 import './App.scss';
 
 import React from 'react';
-import { ApiConfig } from './common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import { NewVocodesContainer } from './v2/view/NewVocodesContainer';
 import { OldVocodesContainer } from './v1/OldVocodesContainer';

packages/fakeyou/src/migration/MigrationTopNav_Session.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SessionWrapper } from '../session/SessionWrapper';
 import { Link, useHistory } from 'react-router-dom';
-import { ApiConfig } from '../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 
 interface Props {
   sessionWrapper: SessionWrapper,

packages/fakeyou/src/v1/OldVocodesContainer.tsx

@@ -15,7 +15,7 @@ import { VideoJob, VideoJobStatus } from './modes/video/VideoJob';
 import { VideoJobPoller } from './modes/video/VideoJobPoller';
 import { VideoQueuePoller } from './modes/video/VideoQueuePoller';
 import { VideoQueueStats } from './modes/video/VideoQueueStats';
-import { ApiConfig } from '../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionStateResponse } from './api/SessionState';
 import { Link } from 'react-router-dom';
 import { FrontendUrlConfig } from '../common/FrontendUrlConfig';

packages/fakeyou/src/v2/api/category/AssignTtsCategory.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface AssignTtsCategoryRequest {
   category_token: string,

packages/fakeyou/src/v2/api/category/CreateCategory.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface CreateCategoryRequest {
   name: string,

packages/fakeyou/src/v2/api/category/GetCategory.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface GetCategorySuccessResponse {
   success: boolean,

packages/fakeyou/src/v2/api/category/ListTtsCategories.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface ListTtsCategoriesSuccessResponse {
   success: boolean,

packages/fakeyou/src/v2/api/category/ListTtsCategoriesForModel.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface ListTtsCategoriesForModelSuccessResponse {
   success: boolean,

packages/fakeyou/src/v2/api/misc/GetLeaderboard.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface Leaderboard {
   success: boolean,

packages/fakeyou/src/v2/api/moderation/GetPendingW2lTemplates.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface PendingW2lTemplates {
   success: boolean,

packages/fakeyou/src/v2/api/moderation/GetTtsInferenceStats.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface TtsInferenceStats {
   success: boolean,

packages/fakeyou/src/v2/api/moderation/GetUserList.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface GetUserListSuccessResponse {
   success: boolean,

packages/fakeyou/src/v2/api/moderation/GetVoiceInventoryStats.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface VoiceInventoryStats {
   success: boolean,

packages/fakeyou/src/v2/api/moderation/GetW2lInferenceStats.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface W2lInferenceStats {
   success: boolean,

packages/fakeyou/src/v2/api/moderation/category/EditCategory.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface EditCategoryRequest {
   name: string,

packages/fakeyou/src/v2/api/moderation/category/ListTtsCategoriesForModeration.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export enum ListTtsCategoriesTriState {
   Include,

packages/fakeyou/src/v2/api/moderation/category/SetCategoryDeletionState.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface SetCategoryDeletionStateSuccessResponse {
   success: boolean,

packages/fakeyou/src/v2/api/tts/GetTtsModel.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface TtsModel {
   model_token: string,

packages/fakeyou/src/v2/api/tts/GetTtsModelUseCount.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 interface TtsModelUseCountResponsePayload {
   success: boolean,

packages/fakeyou/src/v2/api/tts/GetTtsResult.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface TtsResult {
   tts_result_token: string,

packages/fakeyou/src/v2/api/tts/ListTtsModels.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 interface TtsModelListResponsePayload {
   success: boolean,

packages/fakeyou/src/v2/api/user/CreateAccount.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface CreateAccountRequest {
   username: string,

packages/fakeyou/src/v2/api/user/CreateSession.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface CreateSessionRequest {
   username_or_email: string,

packages/fakeyou/src/v2/api/user/GetUserByUsername.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface User {
   user_token: string,

packages/fakeyou/src/v2/api/w2l/GetW2lResult.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface W2lResult {
   w2l_result_token: string,

packages/fakeyou/src/v2/api/w2l/GetW2lTemplate.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 export interface W2lTemplate {
   template_token: string,

packages/fakeyou/src/v2/api/w2l/GetW2lTemplateUseCount.ts

@@ -1,4 +1,4 @@
-import { ApiConfig } from "../../../common/ApiConfig";
+import { ApiConfig } from "@storyteller/components";
 
 interface W2lTemplateUseCountResponsePayload {
   success: boolean,

packages/fakeyou/src/v2/view/firehose/FirehoseEventListFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { ApiConfig } from '../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionWrapper } from '../../../session/SessionWrapper';
 import { Link } from "react-router-dom";
 import { GravatarFc } from '../_common/GravatarFc';

packages/fakeyou/src/v2/view/moderation/moderation_ip_ban_list/ModerationIpBanListFc.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { formatDistance } from 'date-fns';
 import { BackLink } from '../../_common/BackLink';

packages/fakeyou/src/v2/view/moderation/moderation_view_ip_ban/ModerationViewIpBanFc.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { Link, useHistory, useParams } from 'react-router-dom';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { formatDistance } from 'date-fns';

packages/fakeyou/src/v2/view/profile/profile_ban/ProfileBanFc.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState }  from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { useHistory } from 'react-router-dom';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { useParams } from 'react-router-dom';

packages/fakeyou/src/v2/view/profile/profile_edit/ProfileEditFc.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState }  from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { useHistory } from 'react-router-dom';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { useParams } from 'react-router-dom';

packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsInferenceResultListFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { ApiConfig, ListTtsInferenceResultsForUserArgs } from '../../../../common/ApiConfig';
+import { ApiConfig, ListTtsInferenceResultsForUserArgs } from '@storyteller/components';
 import { Link } from 'react-router-dom';
 import { formatDistance } from 'date-fns';
 import { VisibleIconFc } from '../../_icons/VisibleIcon';

packages/fakeyou/src/v2/view/profile/profile_view/Profile_TtsModelListFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { Link } from 'react-router-dom';
 import { formatDistance } from 'date-fns';
 

packages/fakeyou/src/v2/view/profile/profile_view/Profile_W2lInferenceResultListFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { ApiConfig, ListW2lInferenceResultsForUserArgs } from '../../../../common/ApiConfig';
+import { ApiConfig, ListW2lInferenceResultsForUserArgs } from '@storyteller/components';
 import { Link } from 'react-router-dom';
 import { formatDistance } from 'date-fns'
 import { VisibleIconFc } from '../../_icons/VisibleIcon';

packages/fakeyou/src/v2/view/profile/profile_view/Profile_W2lTemplateListFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { Link } from "react-router-dom";
 //import { getRandomInt } from '../../../../v1/api/Utils';
 import { BucketConfig } from '../../../../common/BucketConfig';

packages/fakeyou/src/v2/view/tts/tts_model_delete/TtsModelDeleteFc.tsx

@@ -1,6 +1,5 @@
-
 import React, { useState, useEffect, useCallback } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { useParams, Link, useHistory } from 'react-router-dom';

packages/fakeyou/src/v2/view/tts/tts_model_edit/TtsModelEditFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { TtsInferenceJob } from '../../../../jobs/TtsInferenceJobs';
 import { useParams, useHistory } from 'react-router-dom';

packages/fakeyou/src/v2/view/tts/tts_model_list/TtsModelListFc.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { Link } from 'react-router-dom';
 import { SessionTtsInferenceResultListFc } from '../../_common/SessionTtsInferenceResultsListFc';
 import { SessionTtsModelUploadResultListFc } from '../../_common/SessionTtsModelUploadResultsListFc';

packages/fakeyou/src/v2/view/tts/tts_model_view/TtsModelViewFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { EnqueueJobResponsePayload } from '../tts_model_list/TtsModelListFc';
 import { SessionTtsInferenceResultListFc } from '../../_common/SessionTtsInferenceResultsListFc';
 import { SessionWrapper } from '../../../../session/SessionWrapper';

packages/fakeyou/src/v2/view/tts/tts_result_delete/TtsResultDeleteFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { useParams, Link, useHistory } from 'react-router-dom';
 import { GravatarFc } from '../../_common/GravatarFc';

packages/fakeyou/src/v2/view/tts/tts_result_edit/TtsResultEditFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { useParams, Link, useHistory } from 'react-router-dom';
 import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig';

packages/fakeyou/src/v2/view/upload/UploadComponent.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ApiConfig } from '../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionWrapper } from '../../../session/SessionWrapper';
 import { TtsModelUploadJob } from '../../../jobs/TtsModelUploadJobs';
 import { W2lTemplateUploadJob } from '../../../jobs/W2lTemplateUploadJobs';

packages/fakeyou/src/v2/view/upload/UploadTtsModelFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ApiConfig } from '../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionTtsModelUploadResultListFc } from '../_common/SessionTtsModelUploadResultsListFc';
 import { SessionWrapper } from '../../../session/SessionWrapper';
 import { TtsModelUploadJob } from '../../../jobs/TtsModelUploadJobs';

packages/fakeyou/src/v2/view/upload/UploadW2lPhotoFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ApiConfig } from '../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionWrapper } from '../../../session/SessionWrapper';
 import { W2lTemplateUploadJob } from '../../../jobs/W2lTemplateUploadJobs';
 import { useHistory } from "react-router-dom";

packages/fakeyou/src/v2/view/upload/UploadW2lVideoFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { ApiConfig } from '../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionW2lTemplateUploadResultListFc } from '../_common/SessionW2lTemplateUploadResultsListFc';
 import { SessionWrapper } from '../../../session/SessionWrapper';
 import { W2lTemplateUploadJob } from '../../../jobs/W2lTemplateUploadJobs';

packages/fakeyou/src/v2/view/w2l/w2l_result_delete/W2lResultDeleteFc.tsx

@@ -1,6 +1,6 @@
 
 import React, { useState, useEffect, useCallback } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { useParams, Link, useHistory } from 'react-router-dom';

packages/fakeyou/src/v2/view/w2l/w2l_result_edit/W2lResultEditFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { useParams, Link, useHistory } from 'react-router-dom';
 import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig';

packages/fakeyou/src/v2/view/w2l/w2l_template_approve/W2lTemplateApproveFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { useParams, Link, useHistory } from 'react-router-dom';

packages/fakeyou/src/v2/view/w2l/w2l_template_delete/W2lTemplateDeleteFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { useParams, Link, useHistory } from 'react-router-dom';

packages/fakeyou/src/v2/view/w2l/w2l_template_edit/W2lTemplateEditFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { useParams, useHistory } from 'react-router-dom';
 import { FrontendUrlConfig } from '../../../../common/FrontendUrlConfig';

packages/fakeyou/src/v2/view/w2l/w2l_template_list/W2lTemplateListFc.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { Link } from "react-router-dom";
 //import { getRandomInt } from '../../../../v1/api/Utils';

packages/fakeyou/src/v2/view/w2l/w2l_template_view/W2lTemplateViewFc.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import axios from 'axios';
-import { ApiConfig } from '../../../../common/ApiConfig';
+import { ApiConfig } from '@storyteller/components';
 import { SessionWrapper } from '../../../../session/SessionWrapper';
 import { W2lInferenceJob } from '../../../../App';
 import { useParams, Link } from 'react-router-dom';

packages/storyteller/package.json

@@ -3,12 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@storyteller/components": "0.1.0",
     "@craco/craco": "^6.4.3",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.15",
-    "@storyteller/components": "0.1.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^13.5.0",

packages/storyteller/src/pages/obs-layer/ObsLayerPage.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
+import { ApiConfig } from '@storyteller/components';
 
 function ObsLayerPage() {
   const { username } : { username : string } = useParams();
@@ -22,7 +23,7 @@ function ObsLayerPage() {
 }
 
 function openWebsocket(twitchUsername: string) {
-  const url = `ws://localhost:54321/obs/${twitchUsername}`;
+  const url = new ApiConfig().obsEventsWebsocket(twitchUsername);
   const sock = new WebSocket(url);
 
   sock.onopen = function (event: Event) {