Skip to content

Commit

Permalink
Add published demo flag
Browse files Browse the repository at this point in the history
  • Loading branch information
@miku448
miku448 committed Feb 27, 2025
1 parent a783071 commit d775735
Show file tree
Hide file tree
Showing 9 changed files with 182 additions and 164 deletions.
5 changes: 5 additions & 0 deletions apps/interactor/root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ export function getCongurationFromParams(): {
servicesEndpoint: string;
persona: PersonaResult;
settings: object;
isPublishedDemo: boolean;
} {
const queryParams = queryString.parse(window.location.search);
const cardId = (queryParams.cardId || '') as string;
Expand All @@ -69,6 +70,7 @@ export function getCongurationFromParams(): {
const disabled = queryParams.disabled === 'true';
const configuration = queryParams.configuration as string;
const isMobileApp = queryParams.isMobileApp === 'true';
const isPublishedDemo = queryParams.isPublishedDemo === 'true';

try {
const configurationJson = JSON.parse(decodeText(configuration)) as {
Expand Down Expand Up @@ -105,6 +107,7 @@ export function getCongurationFromParams(): {
servicesEndpoint: configurationJson.servicesEndpoint || SERVICES_ENDPOINT,
persona: configurationJson.persona,
settings: configurationJson.settings || {},
isPublishedDemo,
};
} catch (e) {
return {
Expand Down Expand Up @@ -138,6 +141,7 @@ export function getCongurationFromParams(): {
},
},
settings: mergeWith({}, initialSettingsState),
isPublishedDemo,
};
}
}
Expand Down Expand Up @@ -264,6 +268,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
botId={params.botId}
isProduction={params.production}
isInteractionDisabled={params.disabled}
isPublishedDemo={params.isPublishedDemo}
servicesEndpoint={params.servicesEndpoint}
apiEndpoint={params.apiEndpoint}
cardEndpoint={params.cardEndpoint}
Expand Down
2 changes: 2 additions & 0 deletions apps/interactor/src/App.context.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export interface AppProps {
botId: string;
isProduction: boolean;
isInteractionDisabled: boolean;
isPublishedDemo: boolean;
apiEndpoint: string;
isMobileApp: boolean;
cardEndpoint: string;
Expand All @@ -31,6 +32,7 @@ const AppContext = createContext<AppProps>({
botId: '',
isProduction: false,
isInteractionDisabled: false,
isPublishedDemo: false,
apiEndpoint: '',
cardEndpoint: '',
isMobileApp: false,
Expand Down
1 change: 1 addition & 0 deletions apps/interactor/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ function App(props: AppProps) {
assetUploader: props.assetUploader,
assetLinkLoader: props.assetLinkLoader,
novelLoader: props.novelLoader,
isPublishedDemo: props.isPublishedDemo,
};

useEffect(() => {
Expand Down
4 changes: 2 additions & 2 deletions apps/interactor/src/components/chat-box/ResponseBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import { AssetDisplayPrefix } from '@mikugg/bot-utils';

const ResponseBox = (): JSX.Element | null => {
const dispatch = useAppDispatch();
const { servicesEndpoint, apiEndpoint, isInteractionDisabled, assetLinkLoader } = useAppContext();
const { servicesEndpoint, apiEndpoint, isInteractionDisabled, assetLinkLoader, isPublishedDemo } = useAppContext();
const responseDiv = useRef<HTMLDivElement>(null);
const lastReponse = useAppSelector(selectLastLoadedResponse);
const isLastResponseFetching = useAppSelector(
Expand Down Expand Up @@ -227,7 +227,7 @@ const ResponseBox = (): JSX.Element | null => {
</div>
) : null}
<div className="ResponseBox__actions">
{!disabled ? <TTSPlayer /> : null}
{!disabled || isPublishedDemo ? <TTSPlayer /> : null}
{!disabled && lastReponse?.parentInteractionId && (swipes?.length || 0) < 8 ? (
<button className="ResponseBox__regenerate" onClick={handleRegenerateClick}>
<FaDice />
Expand Down
108 changes: 55 additions & 53 deletions apps/interactor/src/components/interactor/Inventory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default function Inventory() {
const { isPremium } = useAppSelector((state) => state.settings.user);
const { showInventory, selectedItem, items } = useAppSelector((state) => state.inventory);
const currentScene = useAppSelector(selectCurrentScene);
const { servicesEndpoint, isInteractionDisabled, apiEndpoint, assetLinkLoader } = useAppContext();
const { servicesEndpoint, isInteractionDisabled, apiEndpoint, assetLinkLoader, isProduction } = useAppContext();
const scene = useAppSelector(selectCurrentScene);
const lastResponse = useAppSelector(selectLastLoadedResponse);
const { i18n } = useI18n();
Expand All @@ -40,61 +40,63 @@ export default function Inventory() {
</div>
<div className="Inventory__content">
<div className="Inventory__items scrollbar">
{items.map((item) => {
const speed = 5;
const position = Math.max(item.name.length + 10, 20);
const animationDuration = Math.max(item.name.length / speed, 3);
const isSelectedItem = item.id === selectedItem?.id;
const isLocked = item.locked?.config.sceneIds.includes(currentScene?.id || '');
const disabled = (!isPremium && item.isPremium) || (item.locked && !isLocked);
const isHidden = item.hidden;
return (
<div
key={item.id}
className={classNames({
Inventory__item: true,
selected: isSelectedItem,
disabled: disabled,
hidden: isHidden,
highlighted: item.isNovelOnly && !disabled,
})}
onClick={() => {
if (disabled) return;
if (!isSelectedItem) {
dispatch(setItemModalVisibility('open'));
dispatch(setSelectedItem(item));
} else {
dispatch(setItemModalVisibility('closed'));

setTimeout(() => {
dispatch(setSelectedItem(null));
}, 150);
}
}}
data-tooltip-id={disabled ? 'premium-item-inventory' : undefined}
data-tooltip-varaint="light"
data-tooltip-content={disabled && item.isPremium ? i18n('this_is_a_premium_only_item') : undefined}
>
<img
className="Inventory__item-image"
src={assetLinkLoader(item.icon || 'default_item.jpg', AssetDisplayPrefix.ITEM_IMAGE)}
alt={item.name}
/>
{items
.filter((item) => isProduction || !item.isPremium)
.map((item) => {
const speed = 5;
const position = Math.max(item.name.length + 10, 20);
const animationDuration = Math.max(item.name.length / speed, 3);
const isSelectedItem = item.id === selectedItem?.id;
const isLocked = item.locked?.config.sceneIds.includes(currentScene?.id || '');
const disabled = (!isPremium && item.isPremium) || (item.locked && !isLocked);
const isHidden = item.hidden;
return (
<div
className={`Inventory__item-name ${7 < item.name.length ? 'animated-item-name' : ''}`}
style={
{
'--initial-text-position': `100%`,
'--ending-text-position': `${-position}ch`,
'--animation-duration': `${animationDuration}s`,
} as React.CSSProperties
}
key={item.id}
className={classNames({
Inventory__item: true,
selected: isSelectedItem,
disabled: disabled,
hidden: isHidden,
highlighted: item.isNovelOnly && !disabled,
})}
onClick={() => {
if (disabled) return;
if (!isSelectedItem) {
dispatch(setItemModalVisibility('open'));
dispatch(setSelectedItem(item));
} else {
dispatch(setItemModalVisibility('closed'));

setTimeout(() => {
dispatch(setSelectedItem(null));
}, 150);
}
}}
data-tooltip-id={disabled ? 'premium-item-inventory' : undefined}
data-tooltip-varaint="light"
data-tooltip-content={disabled && item.isPremium ? i18n('this_is_a_premium_only_item') : undefined}
>
{item.name}
<img
className="Inventory__item-image"
src={assetLinkLoader(item.icon || 'default_item.jpg', AssetDisplayPrefix.ITEM_IMAGE)}
alt={item.name}
/>
<div
className={`Inventory__item-name ${7 < item.name.length ? 'animated-item-name' : ''}`}
style={
{
'--initial-text-position': `100%`,
'--ending-text-position': `${-position}ch`,
'--animation-duration': `${animationDuration}s`,
} as React.CSSProperties
}
>
{item.name}
</div>
</div>
</div>
);
})}
);
})}
</div>
<Tooltip id="premium-item-inventory" place="right" />
<Tooltip id="item-name" place="top" />
Expand Down
4 changes: 2 additions & 2 deletions apps/interactor/src/components/interactor/SceneSuggestion.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import { useI18n } from '../../libs/i18n';

export default function SceneSuggestion() {
const [buttonOpened, setButtonOpened] = useState<boolean>(false);
const { servicesEndpoint, apiEndpoint } = useAppContext();
const { servicesEndpoint, apiEndpoint, isPublishedDemo } = useAppContext();
const nsfw = useAppSelector((state) => state.settings.user.nsfw);
const dispatch = useAppDispatch();
const { suggestedScenes, fetchingSuggestions, shouldSuggestScenes } = useAppSelector(
Expand Down Expand Up @@ -85,7 +85,7 @@ export default function SceneSuggestion() {
</div>
<TbPlayerTrackNextFilled />
</button>
) : !disabled && shouldSuggestScenes ? (
) : !disabled && shouldSuggestScenes && !isPublishedDemo ? (
<button
{...swipeHandlers}
className="SceneSuggestion__button"
Expand Down
90 changes: 47 additions & 43 deletions apps/interactor/src/components/interactor/Settings.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,12 @@ import { trackEvent } from '../../libs/analytics';
import { useI18n } from '../../libs/i18n';
import { useEffect } from 'react';
import { CustomEventType, postMessage } from '../../libs/stateEvents';
import { useAppContext } from '../../App.context';
const audio = new Audio();

const Settings = (): JSX.Element => {
const dispatch = useAppDispatch();
const { isPublishedDemo } = useAppContext();
const language = useAppSelector((state) => state.novel.language);
const settings = useAppSelector((state) => state.settings);
const settingsTab = useAppSelector((state) => state.settings.modals.settingsTab);
Expand Down Expand Up @@ -128,54 +130,56 @@ const Settings = (): JSX.Element => {
]}
/>
</div>
<div className="SettingsModal__voice">
<div className="SettingsModal__voice-header">
<div className="SettingsModal__voice-header-title">
<div className="SettingsModal__voice-title">{i18n('narration_voice')}</div>
<div className="SettingsModal__voice-description">{i18n('narration_voice_description')}</div>
</div>
<div className="SettingsModal__voice-enabled">
<CheckBox
label={i18n('autoplay')}
value={settings.voice.autoplay}
onChange={(event) => dispatch(setVoiceAutoplay(event.target.checked))}
/>
{!isPublishedDemo ? (
<div className="SettingsModal__voice">
<div className="SettingsModal__voice-header">
<div className="SettingsModal__voice-header-title">
<div className="SettingsModal__voice-title">{i18n('narration_voice')}</div>
<div className="SettingsModal__voice-description">{i18n('narration_voice_description')}</div>
</div>
<div className="SettingsModal__voice-enabled">
<CheckBox
label={i18n('autoplay')}
value={settings.voice.autoplay}
onChange={(event) => dispatch(setVoiceAutoplay(event.target.checked))}
/>
</div>
</div>
</div>
<div className="SettingsModal__voice-id">
<p>{i18n('voice_id')}</p>
<div className="SettingsModal__voice-id-input">
<div
className="SettingsModal__voice-id-listen"
onClick={() => {
audio.src = `https://assets.miku.gg/${voiceSelected.value}.mp3`;
audio.play();
}}
tabIndex={0}
>
<MdRecordVoiceOver />
<div className="SettingsModal__voice-id">
<p>{i18n('voice_id')}</p>
<div className="SettingsModal__voice-id-input">
<div
className="SettingsModal__voice-id-listen"
onClick={() => {
audio.src = `https://assets.miku.gg/${voiceSelected.value}.mp3`;
audio.play();
}}
tabIndex={0}
>
<MdRecordVoiceOver />
</div>
<Dropdown
selectedIndex={voiceItems.findIndex((item) => item.value === voiceSelected.value)}
onChange={(index) => dispatch(setVoiceId(voiceItems[index].value))}
items={voiceItems}
/>
</div>
<Dropdown
selectedIndex={voiceItems.findIndex((item) => item.value === voiceSelected.value)}
onChange={(index) => dispatch(setVoiceId(voiceItems[index].value))}
items={voiceItems}
</div>
<div className="SettingsModal__voice-speed">
<p>{i18n('reading_speed')}</p>
<Slider
value={settings.voice.speed}
onChange={(value) => dispatch(setVoiceSpeed(value as Speed))}
steps={[
{ label: i18n('slow'), value: Speed.Slow },
{ label: i18n('normal'), value: Speed.Normal },
{ label: i18n('fast'), value: Speed.Fast },
{ label: i18n('presto'), value: Speed.Presto },
]}
/>
</div>
</div>
<div className="SettingsModal__voice-speed">
<p>{i18n('reading_speed')}</p>
<Slider
value={settings.voice.speed}
onChange={(value) => dispatch(setVoiceSpeed(value as Speed))}
steps={[
{ label: i18n('slow'), value: Speed.Slow },
{ label: i18n('normal'), value: Speed.Normal },
{ label: i18n('fast'), value: Speed.Fast },
{ label: i18n('presto'), value: Speed.Presto },
]}
/>
</div>
</div>
) : null}
<div className="SettingsModal__response-format">
<p>{i18n('response_format')}</p>
<div className="SettingsModal__response-format-buttons">
Expand Down
Loading

0 comments on commit d775735

Please sign in to comment.