C: First app bits

Design Notes

The speaker whose turn it is will see some visual indications of progress such as a bouncing ball or a "Your Turn Now" visual element or text-window scroll event triggered by another participant or automatically following the speaker's actual voice.

As a practice tool for dramatic acting, PlayAlong is perfect.

As a literacy-development tool, PlayAlong is exceptional. The speaker, him or herself, who may or may not be able to read, can be prompted by audio prompts in their earphones. Both speaker and audience will be able to follow along in the text so as to track both audio and text, which is a great way to learn reading, if you don't already know. It is also beautifully gentle and unassuming method since noone needs to know you can't read while you are going along with it. It also adds all the motivation of social participation to the task of reading better and better.

As a personal growth tool that approximates public speaking, PlayAlong is also great. Everyone knows what they are to do, does it on time, and contributes to the artistic experience of everyone else. Mutual appreciation is assured and real.

Connection between participants is enhanced; we are making art together.

The social skills exemplified in the spoken words of the drama are learned to a degree; whether insult or praise, informational or emotional, the words in a drama have been written into it after inspiration, second and third thoughts, and much editorial review, so they have the potential to bring quality educational content implicitly to participants.

By playing a role in Shakespeare, you learn a good part of being a human means.

PlayAlong aims to bring this kind of experience to everyone.

Implementation Content

The PlayAlong event requires:

• User account creation, email confirmation, login
• Play selection process including on day one a menu of one or two items, but in future a search and filter system, a display of search results system, a crowd-sourced recommendation system, etc.
• Play Enrollment: Each participant to sign up for a play individually or as a result of an invite-only group for which a play has been selected.
• Part Assignment: Assign/Choose role R in play P; Role Trade Request/Accept.
• Pre-Start: check:
  • All roles are taken
  • All missing roles have pre-recorded audio to play for their turns.
  • All participants registered and have the download and are ready.
• Start: sync all participants.
  
• LOOP: Prepare for New Turn: Assign line L, role R, participant P, prev, next.
• Do This Turn:
  • Dehighlight previous if any; highlight this turn; display turn's text (on all displays)
  • Indicate P's name and role as Current speaker.
  • Be sure their content is visible to them.
  • Play audio-prompt for P to listen to.
  • Prompt role's player P to start.
  • Record P's audio to share with others. (remote mode only)
  • Transfer audio to each audience member. (remote mode only)
  • Track P's speech until complete (future version: with speech rec or pause detection)
  • Await Go To Next event (as a click from anyone or as something else)
  • If Not Done, GOTO LOOP.

• Editing support. File format for a compatible play event.
• Turn-by-turn recording storage format; database form; cloud infrastructure.
• In future a media addition process including submit, check valid and reject or accept, add to the menu or the database.
• In future an economy of authors getting something for their work.
• In future subscriptions for groups. Chats. Share links, DRM checks, and replay process.
• In future etc etc etc.

First app contents:

• Header: PlayAlong brand display, maybe the Tom Veatch Sprex/Logos Logo, then MediaTitle UserName User RoleSet

• Pages: Register, Login, ChooseMedia, ShareMedia, PlayAlong.

• The PlayAlong page has the document loaded, and the other participants connected somehow.

• peer.js might be the way to connect. One person or tomveatch.com/playalong server might have to run a Peer Server for others to connect to.

  Per https://blog.bitsrc.io/simplified-peer-to-peer-communication-with-peerjs-e37244267723:

         1) % npm i peerjs
         2) % npm i -g peer
  each   3) React app.
  each   4) js: state = { myId:'', friendId:'', peer:{}, message:'',messages:[] }
  each   5) js: const peer = new Peer(myName, { host:'localhost',port:'3001',path:'/' })
  2nd    6) js: peer.on('open',       (id)   => { this.setState({ myId:id, peer:peer }); });
  rcvr   7) js: peer.on('connection', (conn) => {
                      conn.on('data', (data) => {
                           this.setState({messages:[...this.state.messages,data]});
  sndr   8) js: send = () => {
                  const conn = this.state.peer.connect(this.state.friendId);
                  conn.on('open', () => {
  		    const MsgObj = { sender:this.state.myId, message: this.state.message };
  		    conn.send(MsgObj);
                      this.setState({messages:[...this.state.messages,msgObj], message:'' });
  		});
                }
  
  video  9) js: peer.on('call', (call) => {
                  var getUserMedia = navigator.getUserMedia
  		                || navigator.webkitGetUserMedia
  		                || navigator.mozGetUserMedia;
                  getUserMedia({ video: true, audio: true }, (stream) => {
  		   this.myVideo.srcObject = stream; 
  		   this.myVideo.play();
  		   call.answer(stream);
  		   call.on('stream', (remoteStream) => {
  		     this.friendVideo.srcObject = remoteStream; 
    		     this.friendVideo.play();
  		   });
  		}, err => { console.log('Error!') });
  	      });
  JSX  10) js: return ( 
  '              
   
  
  	         
   My ID: {this.state.myId} 
  	          Friend ID: 
  		  { this.setState({
  			    friendId: e.target.value });}}
  			/>
  		 
   
   
  	          Message: 
  		  { this.setState({
  			    message: e.target.value }); } }
  			/>
  		 Send
  		 Video Call
  		 { this.state.messages.map( (message,i) => { return (
  		      
   
  {message.sender}: 
   
   { message: message }
   
  		    ) });
  		 }
  		 
  		 
  
  		   
   
  		   
   
  	         
  
  	       
  
   '            );