FEAT-24: Make the number of utterances to record configurable

.circleci/config.yml

@@ -29,7 +29,8 @@ steps: &default-steps
               --env BUCKET_NAME="${BUCKET_NAME}" \
               --env BUCKET_SENTENCES_NAME="${BUCKET_SENTENCES_NAME}" \
               --env AWS_ACCESS_KEY_ID="${AWS_ACCESS_KEY_ID}" \
-              --env AWS_SECRET_ACCESS_KEY="${AWS_SECRET_ACCESS_KEY}"
+              --env AWS_SECRET_ACCESS_KEY="${AWS_SECRET_ACCESS_KEY}" \
+              --env NUMBER_SENTENCES="${NUMBER_SENTENCES}"
         fi
 version: 2.0
 jobs:

server/src/config-helper.ts

@@ -30,6 +30,7 @@ export type CommonVoiceConfig = {
   IMPORT_SENTENCES: boolean;
   REDIS_URL: string;
   BUCKET_SENTENCES_NAME: string;
+  NUMBER_SENTENCES: number;
 };
 
 const DEFAULTS: CommonVoiceConfig = {
@@ -63,6 +64,7 @@ const DEFAULTS: CommonVoiceConfig = {
   IMPORT_SENTENCES: true,
   REDIS_URL: null,
   BUCKET_SENTENCES_NAME: process.env.BUCKET_SENTENCES_NAME || '',
+  NUMBER_SENTENCES: parseInt(process.env.NUMBER_SENTENCES, 10) || 5,
 };
 
 let injectedConfig: CommonVoiceConfig;

server/src/lib/api.ts

@@ -167,6 +167,7 @@ export default class API {
 
   getRandomSentences = async (request: Request, response: Response) => {
     const { client_id, params, query } = request;
+    const { NUMBER_SENTENCES } = getConfig();
     if (!query.contractor) {
       response
         .status(500)
@@ -175,7 +176,7 @@ export default class API {
     const sentences = await this.model.findEligibleSentences(
       client_id,
       params.locale,
-      parseInt(request.query.count, 10) || 1,
+      NUMBER_SENTENCES,
       query.contractor
     );
 

server/src/lib/bucket.ts

@@ -36,14 +36,12 @@ export default class Bucket {
   async getRandomClips(
     client_id: string,
     locale: string,
-    count: number,
     contractor: string,
     assignmentId: string
   ): Promise<{ id: number; glob: string; text: string; sound: string }[]> {
     const clips = await this.model.findEligibleClips(
       client_id,
       locale,
-      count,
       contractor,
       assignmentId
     );

server/src/lib/clip.ts

@@ -207,16 +207,13 @@ export default class Clip {
     response: Response
   ): Promise<void> => {
     if (!query.contractor || !query.assignmentId) {
-      response
-        .status(500)
-        .json({
-          error: 'the contractor and assignmentId parameters are required',
-        });
+      response.status(500).json({
+        error: 'the contractor and assignmentId parameters are required',
+      });
     }
     const clips = await this.bucket.getRandomClips(
       client_id,
       params.locale,
-      parseInt(query.count, 10) || 1,
       query.contractor,
       query.assignmentId
     );

server/src/lib/model.ts

@@ -59,14 +59,12 @@ export default class Model {
   async findEligibleClips(
     client_id: string,
     locale: string,
-    count: number,
     contractor: string,
     assignmentId: string
   ): Promise<DBClipWithVoters[]> {
     return this.db.findClipsWithFewVotes(
       client_id,
       locale,
-      Math.min(count, 50),
       contractor,
       assignmentId
     );
@@ -81,7 +79,7 @@ export default class Model {
     return this.db.findSentencesWithFewClips(
       client_id,
       locale,
-      Math.min(count, 50),
+      count,
       contractor
     );
   }

server/src/lib/model/db.ts

@@ -163,7 +163,6 @@ export default class DB {
   async findClipsWithFewVotes(
     client_id: string,
     locale: string,
-    count: number,
     contractor: string,
     assignmentId: string
   ): Promise<DBClipWithVoters[]> {
@@ -185,19 +184,14 @@ export default class DB {
                 WHERE votes.clip_id = clips.id AND client_id = ?
               )
         ORDER BY sentences.clips_count ASC, clips.created_at ASC
-        LIMIT ?
       ) t
-      ORDER BY RAND()
-      LIMIT ?
     `,
       [
         await getLocaleId(locale),
         client_id,
         contractor,
         assignmentId,
         client_id,
-        SHUFFLE_SIZE,
-        count,
       ]
     );
     for (const clip of clips) {

web/src/components/pages/contribution/contribution.tsx

@@ -32,8 +32,6 @@ import * as cx from 'classnames';
 
 import './contribution.css';
 
-export const SET_COUNT = 5;
-
 export interface ContributionPillProps {
   isOpen: boolean;
   key: any;
@@ -311,10 +309,9 @@ class ContributionPage extends React.Component<Props, State> {
   }
 
   renderClipCount() {
-    const { activeIndex, isSubmitted } = this.props;
-    return (
-      (isSubmitted ? SET_COUNT : activeIndex + 1 || SET_COUNT) + '/' + SET_COUNT
-    );
+    const { activeIndex, isSubmitted, sentences } = this.props;
+    const count = sentences.length;
+    return (isSubmitted ? count : activeIndex + 1 || count) + '/' + count;
   }
 
   renderContent() {
@@ -339,7 +336,7 @@ class ContributionPage extends React.Component<Props, State> {
 
     return isSubmitted ? (
       showSection ? (
-        <Success onReset={onReset} type={type} />
+        <Success onReset={onReset} type={type} setCount={sentences.length} />
       ) : (
         <MturkSuccess />
       )
@@ -359,7 +356,7 @@ class ContributionPage extends React.Component<Props, State> {
                 <div className="cards">
                   {sentences.map((sentence, i) => {
                     const activeSentenceIndex = this.isDone
-                      ? SET_COUNT - 1
+                      ? sentences.length - 1
                       : activeIndex;
                     const isActive = i === activeSentenceIndex;
                     return (

web/src/components/pages/contribution/listen/listen.tsx

@@ -16,10 +16,7 @@ import {
   VolumeIcon,
 } from '../../../ui/icons';
 import { LinkButton } from '../../../ui/ui';
-import ContributionPage, {
-  ContributionPillProps,
-  SET_COUNT,
-} from '../contribution';
+import ContributionPage, { ContributionPillProps } from '../contribution';
 import { PlayButton } from '../../../primary-buttons/primary-buttons';
 import Pill from '../pill';
 
@@ -80,9 +77,7 @@ class ListenPage extends React.Component<Props, State> {
 
     if (props.clips.length > 0) {
       return {
-        clips: props.clips
-          .slice(0, SET_COUNT)
-          .map(clip => ({ ...clip, isValid: null })),
+        clips: props.clips.map(clip => ({ ...clip, isValid: null })),
       };
     }
 
@@ -136,7 +131,7 @@ class ListenPage extends React.Component<Props, State> {
       hasPlayed: false,
       hasPlayedSome: false,
       isPlaying: false,
-      isSubmitted: clipIndex === SET_COUNT - 1,
+      isSubmitted: clipIndex === clips.length - 1,
       clips: clips.map((clip, i) =>
         i === clipIndex ? { ...clip, isValid } : clip
       ),
@@ -168,7 +163,7 @@ class ListenPage extends React.Component<Props, State> {
     this.setState({
       clips: clips.map((clip, i) =>
         this.getClipIndex() === i
-          ? { ...this.props.clips.slice(SET_COUNT)[0], isValid: null }
+          ? { ...this.props.clips[0], isValid: null }
           : clip
       ),
       hasPlayed: false,
@@ -226,7 +221,7 @@ class ListenPage extends React.Component<Props, State> {
             !hasPlayed && (
               <Localized
                 id={
-                  clipIndex === SET_COUNT - 1
+                  clipIndex === clips.length - 1
                     ? 'listen-last-time-instruction'
                     : [
                         'listen-instruction',

web/src/components/pages/contribution/speak/speak.tsx

@@ -28,10 +28,7 @@ import TermsModal from '../../../terms-modal';
 import { CheckIcon, FontIcon, MicIcon, StopIcon } from '../../../ui/icons';
 import { Button, TextButton } from '../../../ui/ui';
 import { getItunesURL, isFirefoxFocus, isNativeIOS } from '../../../../utility';
-import ContributionPage, {
-  ContributionPillProps,
-  SET_COUNT,
-} from '../contribution';
+import ContributionPage, { ContributionPillProps } from '../contribution';
 import {
   RecordButton,
   RecordingStatus,
@@ -155,9 +152,7 @@ class SpeakPage extends React.Component<Props, State> {
 
     if (props.sentences.length > 0) {
       return {
-        clips: props.sentences
-          .slice(0, SET_COUNT)
-          .map(sentence => ({ recording: null, sentence })),
+        clips: props.sentences.map(sentence => ({ recording: null, sentence })),
       };
     }
 
@@ -476,7 +471,7 @@ class SpeakPage extends React.Component<Props, State> {
   };
 
   render() {
-    const { getString, user, mturkDetails } = this.props;
+    const { getString, user, mturkDetails, sentences } = this.props;
     const {
       clips,
       isSubmitted,
@@ -572,7 +567,7 @@ class SpeakPage extends React.Component<Props, State> {
                 id={
                   this.isRecording
                     ? 'record-stop-instruction'
-                    : recordingIndex === SET_COUNT - 1
+                    : recordingIndex === sentences.length - 1
                     ? 'record-last-instruction'
                     : ['record-instruction', 'record-again-instruction'][
                         recordingIndex

web/src/components/pages/contribution/success.tsx

@@ -13,7 +13,6 @@ import URLS from '../../../urls';
 import { LocaleLink, useLocale } from '../../locale-helpers';
 import { CheckIcon, MicIcon, PlayOutlineIcon } from '../../ui/icons';
 import { Button, LinkButton, TextButton } from '../../ui/ui';
-import { SET_COUNT } from './contribution';
 import Modal, { ModalProps } from '../../modal/modal';
 
 import './success.css';
@@ -70,9 +69,11 @@ function Success({
   getString,
   onReset,
   type,
+  setCount,
 }: {
   type: 'speak' | 'listen';
   onReset: () => any;
+  setCount: number;
 } & LocalizationProps) {
   const api = useAPI();
   const account = useAccount();
@@ -117,7 +118,7 @@ function Success({
       ? api.fetchDailyClipsCount()
       : api.fetchDailyVotesCount()
     ).then(value => {
-      setContributionCount(value + SET_COUNT);
+      setContributionCount(value + setCount);
     });
     return () => {
       killAnimation.current = true;
@@ -170,7 +171,7 @@ function Success({
         <Localized
           id="clips-with-count"
           bold={<b />}
-          $count={SET_COUNT + '/' + SET_COUNT}>
+          $count={setCount + '/' + setCount}>
           <span className="text" />
         </Localized>
       </div>
@@ -218,7 +219,7 @@ function Success({
 
       <ContributeMoreButton>
         {type === 'speak' ? <MicIcon /> : <PlayOutlineIcon />}
-        <Localized id="contribute-more" $count={SET_COUNT}>
+        <Localized id="contribute-more" $count={setCount}>
           <span />
         </Localized>
       </ContributeMoreButton>

web/src/services/api.ts

@@ -89,20 +89,16 @@ export default class API {
     return this.getLocalePath() + '/clips';
   }
 
-  fetchRandomSentences(
-    count: number = 1,
-    contractor: string = ''
-  ): Promise<Sentences.Sentence[]> {
-    const query = queryString.stringify({ count, contractor });
+  fetchRandomSentences(contractor: string = ''): Promise<Sentences.Sentence[]> {
+    const query = queryString.stringify({ contractor });
     return this.fetch(`${this.getLocalePath()}/sentences?${query}`);
   }
 
   fetchRandomClips(
-    count: number = 1,
     contractor: string = '',
     assignmentId: string = ''
   ): Promise<Clip[]> {
-    const query = queryString.stringify({ count, contractor, assignmentId });
+    const query = queryString.stringify({ contractor, assignmentId });
     return this.fetch(`${this.getClipPath()}?${query}`);
   }
 

web/src/stores/clips.ts

@@ -4,8 +4,6 @@ const contributableLocales = require('../../../locales/contributable.json') as s
 import StateTree from './tree';
 import { User } from './user';
 
-const MIN_CACHE_SIZE = 10;
-
 export namespace Clips {
   export interface Clip {
     id: string;
@@ -54,9 +52,6 @@ export namespace Clips {
       getState: () => StateTree
     ) => {
       const state = getState();
-      if (localeClips(state).clips.length > MIN_CACHE_SIZE) {
-        return;
-      }
 
       try {
         dispatch({ type: ActionType.LOAD });
@@ -66,7 +61,6 @@ export namespace Clips {
           'mturkDetails.assignmentId'
         );
         const clips = await state.api.fetchRandomClips(
-          MIN_CACHE_SIZE,
           contractor,
           assignmentId
         );
@@ -156,7 +150,7 @@ export namespace Clips {
         const clips = action.clips
           ? localeState.clips.concat(action.clips)
           : localeState.clips;
-        const next = localeState.next || clips.shift();
+        const next = localeState.next;
         return {
           ...state,
           [locale]: {

web/src/stores/sentences.ts

@@ -2,8 +2,6 @@ import { Action as ReduxAction, Dispatch } from 'redux';
 const contributableLocales = require('../../../locales/contributable.json') as string[];
 import StateTree from './tree';
 
-const CACHE_SET_COUNT = 10;
-
 export namespace Sentences {
   export interface Sentence {
     id: string;
@@ -41,14 +39,9 @@ export namespace Sentences {
     ) => {
       try {
         const state = getState();
-        if (Object.keys(localeSentences(state)).length >= CACHE_SET_COUNT) {
-          return;
-        }
+
         const contractor = state.bespokenDetails.contractor;
-        const newSentences = await state.api.fetchRandomSentences(
-          CACHE_SET_COUNT,
-          contractor
-        );
+        const newSentences = await state.api.fetchRandomSentences(contractor);
         dispatch({
           type: ActionType.REFILL,
           sentences: newSentences,