Implement Drawing Panel Button in YouTube Toolbar for FrameTagger

[umeshSinghVerma]

Add Edit Button to Open Drawing Panel in FrameTagger ✏️

Current Situation:

• Currently, FrameTagger has a single button to take a screenshot and add a note, which can also be triggered using Ctrl + B.
• However, to open the drawing/edit panel, users must press Ctrl + I, as there is no button for this functionality.

Task:

1. Design Phase:

   • Create a button for opening the drawing/edit panel. The button should match the style of YouTube's icons in the video player (clean, minimalistic, and intuitive).
   • Ensure that the button visually aligns with other YouTube icons (e.g., play/pause, volume, settings).

2. Implementation Phase:

   • Add the newly designed button to the FrameTagger interface.
   • Implement the functionality to open the edit panel (the same functionality as pressing Ctrl + I) when the button is clicked.

Requirements:

• The button should be consistent with YouTube's UI/UX for seamless integration.
• Make sure the button is easily accessible and positioned appropriately in the FrameTagger interface.
• Test the button to ensure it triggers the drawing panel correctly.

Steps to Add the Button:

1. Understand the Existing Button Implementation:

   • The current implementation for taking a screenshot and adding a note is found in the function addTakeScreenshotButton.
   • When clicked, this button triggers the getPlayingScreenshot() function, which captures the screenshot. You can view the getPlayingScreenshot() function here.

2. Create a New Function for the Edit Button:

   • To add a similar button for the drawing panel, create a new function following the structure of addTakeScreenshotButton.
   • Instead of calling getPlayingScreenshot(), this new button will call the getEditScreenshot() function, which can be found here.

3. Steps to Implement:

   • Step 1: Define a new function addEditScreenshotButton() in the updateContent.js file, modeled after the existing addTakeScreenshotButton() function.
   • Step 2: Within this function, create a button with the same style as the existing toolbar buttons, ensuring it aligns with YouTube’s icon design and placement.
   • Step 3: Link this new button’s onClick event to the getEditScreenshot() function, which will open the drawing/edit panel.
   • Step 4: Add the button to YouTube’s video toolbar, just like how the screenshot button was added.

[swarupn17]

Hello @umeshSinghVerma I can do this. Please assign this to me.
Thanks.

[umeshSinghVerma]

Hi @swarupn17!

Thanks for volunteering to take on this task! I've assigned the issue to you. Before you get started, I recommend downloading FrameTagger from the Chrome Web Store and using it a bit to get familiar with its functionality. While you're using it, feel free to note any bugs or areas for improvement as your feedback will be valuable.

Also, if you haven't already, please consider starring ⭐ the repository to help spread the word about FrameTagger. Excited to see your contribution!

[Priyanshu-2005]

Hey @umeshSinghVerma I would like to address this issue kindly assign me this issue.