Add blind mode.

README.md

@@ -95,3 +95,15 @@ The analyzer uses a JavaScript decoder to decode video frames and extract inform
 Note that the `build_inspector.sh` shell script doesn't look at the current build configuration, so you'll need to edit it to add your own configure options. (Because of limitations in the web platform, the decoder must be configured with `--disable-multithread --disable-runtime-cpu-detect --target=generic-gnu` because threading and SIMD is not yet supported in JavaScript.)
 
 If something goes wrong, you can clean the build by deleting the `.inspect` directory and try again.
+
+## URL Parameters
+
+### Decoders / Videos
+
+Video decoder/file pairs are constructed from a sequence of `decoder` and `file` URL parameters. For example, the URL string `decoder=A&file=X&file=Y&decoder=B&file=X` will construct 3 pairs: `A:X`, `A:Y` and `B:X`.
+
+### Voting
+
+ - `blind`: Whether to randomize the videos shown to the user.
+ - `vote`: A comma separated string of video decoder/file pairs to vote on. For example, the string `0:1,1:2` indicates that there should be two votes, the first between `A:X` and `A:Y`, and the second between `A:Y` and `B:X`. The voting tool can also be used to vote on more than 2 videos at a time (the string `0:1:2:1,1:2` is also valid.)
+ - `voteDescription`: A optional message to show on the first voting screen.

src/components/PlayerSplit.tsx

@@ -30,7 +30,6 @@ const ABC = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
 interface PlayerSplitComponentProps {
  videos: { decoderUrl: string, videoUrl: string, decoderName: string }[]
  isVotingEnabled: boolean
- isBlind: boolean;
  onVoted?: () => void;
 }
 

src/components/VotingSession.tsx

@@ -6,6 +6,18 @@ import LinearProgress from 'material-ui/LinearProgress';
 import {PlayerSplitComponent} from "./PlayerSplit";
 import {deepOrangeA400} from 'material-ui/styles/colors';
 
+function shuffle(array: any[], count: number) {
+ // Shuffle Indices
+ for (let j = 0; j < count; j++) {
+ let a = Math.random() * array.length | 0;
+ let b = Math.random() * array.length | 0;
+ let t = array[a];
+ array[a] = array[b];
+ array[b] = t;
+ }
+ return array;
+}
+
 interface VotingSessionComponentProps {
  /**
  * Sets of videos to vote on.
@@ -15,10 +27,16 @@ interface VotingSessionComponentProps {
  videoUrl: string,
  decoderName: string
  }[][];
+
  /**
  * Description to show on the first screen.
  */
  description?: string;
+
+ /**
+ * Whether to randomize voting.
+ */
+ isBlind?: boolean;
 }
 
 /**
@@ -27,6 +45,11 @@ interface VotingSessionComponentProps {
 export class VotingSessionComponent extends React.Component < VotingSessionComponentProps, {
  index : number
 } > {
+ public static defaultProps: VotingSessionComponentProps = {
+ description: "",
+ isBlind: true
+ } as any;
+
  constructor() {
  super();
  this.state = {
@@ -52,16 +75,19 @@ export class VotingSessionComponent extends React.Component < VotingSessionCompo
  () => this.next()
  } />]}>
  <p>
- You will be asked to vote on {videos.length} set(s) of videos. {' '}
+ You will be asked to vote on {videos.length} sets of videos. {' '}
  {this.props.description}
  </p>
  </Dialog>
  } else if (index < videos.length) {
+ let videosToVoteOn = videos[index];
+ if (this.props.isBlind) {
+ videosToVoteOn = shuffle(videosToVoteOn.slice(), 16);
+ }
  body = <PlayerSplitComponent
  key={this.state.index}
- videos={videos[index]}
+ videos={videosToVoteOn}
  isVotingEnabled={true}
- isBlind={true}
  onVoted={() => {
  this.next();
  }}/>

src/main.tsx

@@ -116,7 +116,7 @@ if (player || vote) {
  });
  ReactDOM.render(
  <MuiThemeProvider muiTheme={theme}>
- <VotingSessionComponent videos={videos} description={voteDescription}/>
+ <VotingSessionComponent videos={videos} description={voteDescription} isBlind={!!blind}/>
  </MuiThemeProvider>,
  document.getElementById("analyzer-app")
  );