Logger Extension - Devlog

By A.A. Lopez

    For the past couple of weeks I've been working on a new tool for my team based on an idea another member brought up. The idea comes from the fact that during our quality control checks in our media asset manager(MAM) caption issues are under reported. Various factors are the reason behind this; from the notes section being outdated, too many caption issue types to remember, to even just missing the timecode of a certain instance. So she put forth the idea of updating our note system in the MAM, however, due to future planning there's little to no actual movement on that front, which leads us into this tool.

    Instead of relying on implementing a new tool inside the MAM, why not create an extension that does the exact same thing? With the help of ChatGPT, a lot of googling, and various nights with a monster or redbull the tool, right now called the "Logger Extension" (name will change once I have a better one), is on a decent path.

Pseudo-Code 

    Starting off we have the Pseudo-code that I've put together. Here in the following image you'll see the pseudo-code laid out by both a simple path and through sticky notes thanks to Lucid.

 Here's the breakdown of the path:

>> Open MAM Video/Audio Tab
>> Extension opens automatically, Dropdown window tab appears on right hand corner of the screen
    >> Extension finds Title in <div id="cc-nav-button-label" class="label"> QC Tools - Title - S# - E# </div>
        >> Places title at the top of Extension window ignoring "QC Tools"
    >> Extension finds FPS in <div class="time-area" slot="time-input-area">FPS [NDF/DF]</div>
        >> Places FPS at top of Extension window by title
>> QCer selects timecode by selecting "New Note" or Hotkey (z)
    >> New note section generated containing a spot for the Timecode, Dropdown Menu of Issue types, Note section
        >> Extension grabs timecode found in <span class="duration">HH:MM:SS:FF / HH:MM:SS;FF</span>
            >> Places timecode into new note section
        >> Dropdown menu of issue types
            >> Nigh Impossible (8 Issue Types)
            >> Difficult (2 Issue Types)
            >> Moderate (4 Issue Types)
            >> Easy Fix (6 Issue Types)
            >> KidVid Content (1 Issue Type)
>> QCer selects issue type. Optionally may add note in note section. Optionally marks an "Unsure" check box for instances the QCer is unsure of the issue or if one does exist
>> Repeat process until complete
>> QCer then selects save/export
    >> Option to export as CSV file or Txt file. CSV is default
    >> Option to save as input for an Airtable Form as well
>> Close Browser Window
>> End

     The breakdown is pretty straightforward with what the intent is. And as you can see there's some future planning for beyond the captions.

Flowchart 

    Next is the flowchart showing off how the breakdown will be interpreted by the code. Starting as the QCer begins and then encountering a CC issue. From there they will choose to make a note and pulling the timecode and FPS from the MAM, then they will choose the issue type and include a note if they need. They will do this until all issues they can find are flagged, afterwards they will choose to save, copy, or send the notes to an Internal Storage in the extension, to a Text or CSV file, or to upload directly to the Airtable that contains the CC issues for the team that reviews them to check and fix them.

UI Mockup

     Finally, the UI design for this tool. The original design, the Silveria Design, focused more on the consistent issue types and a checklist, which seemed to put many other captions to the wayside. The updated design focuses more on a consistent level and allows each type to be considered. 

    The design is focused to be small and convenient without getting in the way of the QCer's work. With each new note it will grow in size, but max out at 3 notes and then become scrollable.

    The color scheme is focused to align with the company's colors of black, yellow, white, and a muted grey. Where the color scheme of the issue types aligns more with the teams set colors found in Airtable. However, the color for KidVid has been altered from a grey to a purple due to some minor instances "KidVid should be more colorful."

    The buttons below the Issue Type and Notes are:

• Save Note || To save the note to the internal extension's storage
• Copy to Clipboard || Copy over the note for a quick copy/paste from the note to the Airtable
• Delete || In case a note was created by accident

    The yellow buttons below are:

• Screenshot || For instances where a QCer finds something that warrants an image
• New Note (z) || To create a new note, with the hotkey present
• Export to CSV || Export to the CSV file format
• Export to TXT || Export to the TXT file format

  Conclusion  

    This Logger Extension is meant to help out the team. Be more cognizant of where and what the issues are and give a standardized note taking experience. The intent is not to limit the team, but to allow them to be proactive without sacrificing time or energy. And as we build this tool I am confident that we will see a marked improvement. Thank you for looking this over and hope to see you on the next log.