How do I open the Editor Ui in the browser?

[Ghabry]

Hello,

I'm currently evaluating your extension for my next programming course but I'm hitting a blocker here:

I cannot get the editor Ui in the browser opened that allows me to modify text after recording in VsCode.

I click "Start Playback" in VsCode and this opens such a browser window for me. The same happens when I use "Storyteller: Comment" in the command palette.

In your videos I can see an editor Ui in the browser and also your docs mention them:

But in my window this entire editor stuff is absent.

Can you tell me what I'm doing wrong?

[markm208]

Hi Gabriel, I think the issue is that you have to hit the 'edit comment button' in the bottom right corner of a comment to edit it:

Then in edit mode there is a button to save the changes that you will be able to see.

To edit the title of the playback there is another edit button on the first comment. When changing the title you have to hit that button again to save the title.

I am not kidding when I say that I would be thrilled to give you any more help or pointers for making playbacks. Let me know if that doesn't work or would like to discuss making playbacks! I am open for a zoom or direct questions at: markm208@gmail.com Mark

[markm208]

Also, looking at your screenshot I am noticing that there should be a 'Add New Comment' button on the bottom of the comment panel. Here is one I am working on (on a very large screen):

I wonder if this is not visible because the web page text is zoomed in or perhaps the browser window is too small. This is definitely a bug on my end but I am noticing when my browser window is small that button isn't visible. I'll try and fix that ASAP so it is visible no matter what the screen size is.

Let me know if you can rearrange the browser window to see it.

[markm208]

FYI: the three bar hamburger button under each group of comments is to rearrange the order of comments at a comment point using drag and drop.

[Ghabry]

Thank you for the quick response.

I wonder if this is not visible because the web page text is zoomed in or perhaps the browser window is too small.

Oh I actually zoomed out the window alot so it is not too huge in the screenshot (have a 4k panel).

Got it! Yeah I did not see some of the buttons. Now editing comments and embedding media works fine. Thanks.

---

But there is still one final thing unclear to me: In the "Editing playbacks in your browser" doc: https://markm208.github.io/storyteller/editPlayback.html

There are features mentioned to edit what is shown in the editor, e.g. to fixup a missing ; or a typing error.

How do I access this feature?

[markm208]

As for the 'edit in a playback' feature, unfortunately, that has not been implemented yet in my UI overhaul. It is on my list but I likely won't be able to get to it until summer. Sorry!

[Ghabry]

Ah okay. So the doc is a bit out of sync. No problem.

Thinking about it I will mostly only use this to fix a typing error, so I can likely preprocess the events.json file with a small script and then just throw away all INSERT-DELETE-combinations

Thanks!

[markm208]

In my experience, viewers only care about the code at the comment points. The UI is set up so a viewer can click on the comments in the comment panel and skip all of the intermediate typing.

When I teach my CS courses I use playbacks in class to walk through code instead of write it live. I always just click on the comments instead of have every keystroke play out. There are change markers so the viewer can see what has changed. I have polled my students to verify that they prefer this. If there are some typos in between your comment points I would suggest you just leave them in there. I don't think any student will ever know that they are there.

One feature that is coming soon is exactly what you are suggesting. I would like pro sw devs to use this as a code review tool and possibly a version control alternative. I have had pro sw devs tell me that they don't want their bosses to see all of the mistakes that they have made. I am working on a feature that will look at all of the events in between comment points and if some code is added (INSERT) and then deleted (DELETE) in between two comments then the author will have the option of removing those embarrassing typos and failed experiments.

It is a little trickier than just removing the inserts and deletes, though, because each insert/delete event has line and column numbers that are accurate at the time the code is written.

[Ghabry]

Thank you for sharing your experience. That's a valid point. They will likely do not care if there are minor typing errors that I fix right after.

It is really cool that there is the option between "let the code appear" and "skip to comment". Last year I recorded all my lectures (directly what I do in VsCode) and removed some boring typing parts. Then some users complained about the jumpcuts because they cannot follow what I did. With storyteller they can decide on there own if they want to see the typing or not (and copy code which is not possible when watching a video).