DEV Community

Cover image for How To: Use The Player
CodeCast
CodeCast

Posted on • Updated on

How To: Use The Player

The web player is the heart of what CodeCast is. It’s where all the interaction, learning, and teaching happens. Your audience can interact directly with your code, allowing you to make the most out of your teaching.

In this post, we’ll break down all the features our player offers for anyone viewing your casts.

Navigation Bar

At the top of the web player, you will find the navigation bar. This provides you with all the information you need about the ongoing cast. If the cast is a part of an organization, you will be able to access the organization's information as well.

Project Directory

On the left hand-side of your screen, you will be able to see the project directory. Located alongside it is a toolbar giving your various tools to improve your experience:

Folder Icon: You can browse the code files by pressing the folder icon to expand the project directory. You can easily toggle this open and closed by pressing the icon again.

Magnifying Glass: If you wish to search a specific file within the project folder, you can press on the little magnifying glass and enter your search.

History Icon: The history icon is where your code logs are stored. You can see which code files were updated, as well as detailed information about the changes. Click the yellow time slot to jump in the timeline to where the change happened.

**Gear Icon((: Press the gear icon to access the settings. Here you’re able to change the editor’s font size, as well as switch between dark and light themes. As per standard use, you are also able to change the font size by holding down either Control +/- (Windows) or Command +/- (Mac).

The Editor

This is your main view of the code being streamed. You can highlight specific sections of the code then copy it to your local machine. Alternatively, if you wish to copy the entire file you can hit the “Copy file” button to easily achieve this. You are not able to edit anything within the player as it is only for viewing and copying.

Screen Share Window

If the caster is sharing their screen, it will be shown as a small window on the bottom right of the player. You have several viewing options you can choose, to suit your preferences:

Split Screen: If you hit the square icon, the player will split the main area into a view of the screen and the editor.

Full Screen: If you press the scale icon, the screen will take up your entire view and the editor will not be displayed anymore.

Original Size: If you wish to turn it back into the default small window, hit the minus icon.

Video Toolbar

On the bottom of the player, you will see all of the video controls. The left side of the toolbar contains standard video controls: you can adjust the speed and volume of the video, and if it's recorded Cast, you can pause and play it as normal. You are also able to quickly move forward or back in fifteen-second increments.

If the video is a live-stream and not a recording, you will also be able to see the "LIVE" notification, with the number of current viewers next to it.

The right side offers these additional tools and features:

Diffs: Click on this to easily view the code changes from the state before the stream started.

Share: You have the option to see the embedded code, or share your video link and a specific time.

Chat: The chat feature allows you to communicate live with other viewers.

AutoFollow: Turning this on means your editor will automatically switch from file to file as the streamer moves between them. It allows you to stay on top of the code being written and lessens your chances of missing anything. Note: this feature is only available during live-streaming.

You are easily able to toggle these features on and off simply by clicking on them.

And that's it. One simple player with features that allow you to fully interact with your audience while giving your audience the best learning experience possible.

Originally published at codecast.io by Amy Oulton

Top comments (0)