Skip to content

Commit

Permalink
feat: add ai translations component to transcript settings (openedx#722)
Browse files Browse the repository at this point in the history
  • Loading branch information
@hajorg
hajorg authored Dec 5, 2023
1 parent 1636226 commit bebbc15
Show file tree
Hide file tree
Showing 7 changed files with 172 additions and 51 deletions.
1 change: 1 addition & 0 deletions .env
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,4 @@ HOTJAR_APP_ID=''
HOTJAR_VERSION=6
HOTJAR_DEBUG=false
INVITE_STUDENTS_EMAIL_TO=''
AI_TRANSLATIONS_BASE_URL=''
1 change: 1 addition & 0 deletions .env.development
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,3 +43,4 @@ HOTJAR_APP_ID=''
HOTJAR_VERSION=6
HOTJAR_DEBUG=true
INVITE_STUDENTS_EMAIL_TO="[email protected]"
AI_TRANSLATIONS_BASE_URL='http://localhost:18760'
37 changes: 37 additions & 0 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@
},
"dependencies": {
"@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
"@edx/frontend-component-ai-translations-edx": "^1.3.0",
"@edx/frontend-component-footer": "^12.3.0",
"@edx/frontend-component-header": "^4.7.0",
"@edx/frontend-enterprise-hotjar": "^2.0.0",
Expand Down
119 changes: 68 additions & 51 deletions src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
TransitionReplace,
} from '@edx/paragon';
import { ChevronLeft, ChevronRight, Close } from '@edx/paragon/icons';
import AITranslationsComponent from '@edx/frontend-component-ai-translations-edx';
import OrderTranscriptForm from './OrderTranscriptForm';
import messages from './messages';
import {
Expand All @@ -31,9 +32,11 @@ const TranscriptSettings = ({
activeTranscriptPreferences,
transcriptCredentials,
videoTranscriptSettings,
isAiTranslationsEnabled,
} = pageSettings;
const { transcriptionPlans } = videoTranscriptSettings || {};
const [transcriptType, setTranscriptType] = useState(activeTranscriptPreferences?.provider);
const [isAiTranslations, setIsAiTranslations] = useState(false);

const handleOrderTranscripts = (data, provider) => {
const noCredentials = isEmpty(transcriptCredentials) || data.apiKey;
Expand All @@ -54,59 +57,73 @@ const TranscriptSettings = ({
show={isTranscriptSettingsOpen}
onClose={closeTranscriptSettings}
>
<div style={{ width: '225px' }}>
<ActionRow>
<div>
{!isAiTranslations && (
<>
<ActionRow>
<TransitionReplace>
{transcriptType ? (
<IconButton
key="back-button"
size="sm"
iconAs={Icon}
src={ChevronLeft}
onClick={() => setTranscriptType(null)}
alt="back button to main transcript settings view"
/>
) : (
<div key="title" className="h3">
<FormattedMessage {...messages.transcriptSettingsTitle} />
</div>
)}
</TransitionReplace>
<ActionRow.Spacer />
<IconButton size="sm" iconAs={Icon} src={Close} onClick={closeTranscriptSettings} alt="close settings" />
</ActionRow>
<TransitionReplace>
{transcriptType ? (
<div key="transcript-settings">
<OrderTranscriptForm
{...{
setTranscriptType,
transcriptType,
activeTranscriptPreferences,
transcriptCredentials,
closeTranscriptSettings,
handleOrderTranscripts,
transcriptionPlans,
errorMessages,
transcriptStatus,
}}
/>
</div>
) : (
<div key="transcript-type-selection" className="mt-3">
<Collapsible.Advanced
onOpen={() => setTranscriptType('order')}
>
<Collapsible.Trigger
className="row m-0 justify-content-between align-items-center"
>
<FormattedMessage {...messages.orderTranscriptsTitle} />
<Icon src={ChevronRight} />
</Collapsible.Trigger>
</Collapsible.Advanced>
</div>
)}
</TransitionReplace>
</>
)}
{(!transcriptType && isAiTranslationsEnabled) && (
<TransitionReplace>
{transcriptType ? (
<IconButton
key="back-button"
size="sm"
iconAs={Icon}
src={ChevronLeft}
onClick={() => setTranscriptType(null)}
alt="back button to main transcript settings view"
/>
) : (
<div key="title" className="h3">
<FormattedMessage {...messages.transcriptSettingsTitle} />
</div>
)}
<AITranslationsComponent
setIsAiTranslations={setIsAiTranslations}
closeTranscriptSettings={closeTranscriptSettings}
courseId={courseId}
key="ai-component"
/>
</TransitionReplace>
<ActionRow.Spacer />
<IconButton size="sm" iconAs={Icon} src={Close} onClick={closeTranscriptSettings} alt="close settings" />
</ActionRow>
<TransitionReplace>
{transcriptType ? (
<div key="transcript-settings">
<OrderTranscriptForm
{...{
setTranscriptType,
transcriptType,
activeTranscriptPreferences,
transcriptCredentials,
closeTranscriptSettings,
handleOrderTranscripts,
transcriptionPlans,
errorMessages,
transcriptStatus,
}}
/>
</div>
) : (
<div key="transcript-type-selection" className="mt-3">
<Collapsible.Advanced
onOpen={() => setTranscriptType('order')}
>
<Collapsible.Trigger
className="row m-0 justify-content-between align-items-center"
>
<FormattedMessage {...messages.orderTranscriptsTitle} />
<Icon src={ChevronRight} />
</Collapsible.Trigger>
</Collapsible.Advanced>
</div>
)}
</TransitionReplace>
)}
</div>
</Sheet>
);
Expand Down
4 changes: 4 additions & 0 deletions src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,7 @@
.pgn__selectable_box[disabled] {
opacity: .5;
}

.pgn__sheet-component.right {
min-width: 352px;
}
60 changes: 60 additions & 0 deletions src/files-and-videos/videos-page/transcript-settings/TranscriptSettings.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -657,4 +657,64 @@ describe('TranscriptSettings', () => {
});
});
});

describe('Ai translations component fails', () => {
beforeEach(async () => {
initializeMockApp({
authenticatedUser: {
userId: 3,
username: 'abc123',
administrator: false,
roles: [],
},
});
store = initializeStore({
...initialState,
videos: {
...initialState.videos,
pageSettings: {
...initialState.videos.pageSettings,
},
},
});
axiosMock = new MockAdapter(getAuthenticatedHttpClient());

renderComponent(defaultProps);
});

it('doesn\'t display AI translations component if not enabled', () => {
expect(screen.queryByText('/Get free translations/')).not.toBeInTheDocument();
});
});

describe('Ai translations component success', () => {
beforeEach(async () => {
initializeMockApp({
authenticatedUser: {
userId: 3,
username: 'abc123',
administrator: false,
roles: [],
},
});
store = initializeStore({
...initialState,
videos: {
...initialState.videos,
pageSettings: {
...initialState.videos.pageSettings,
isAiTranslationsEnabled: true,
},
},
});
axiosMock = new MockAdapter(getAuthenticatedHttpClient());

renderComponent(defaultProps);
});

it('displays AI translations component if enabled', () => {
const component = screen.getByText(/Get free translations/);
expect(component).toBeVisible();
});
});
});

0 comments on commit bebbc15

Please sign in to comment.