Youtube Videos And Code Design


After the "dead end" from the previous post, we decided that a meeting with the workshop lecturer would be a good place to get solutions and new ideas.

That meeting gave us some good ideas. The first one we wanted to try and implement was to open the youtube videos in a simple chrome (or other default browsers) window.
A quick search brought it can be done similarly to the same option in images.

But before implementing this feature we wanted to make a logical design, so it will be easier to add more similar features in the future without making code duplications and a lot of conditions.

After reviewing and examining our code so far, we decided it would be a good idea to make an interface with 2 functions to implement:
1. a function that makes the HTML string for the webview.
2. a function that makes the Markdown string for the hover.







The main reason we chose these two functions is that they both create different outcomes depending on the file format (local images, non-local images, and youtube videos have different Markdown and HTML strings). 

We realized that once we create an instance of the interface, we need to create an object and send it the functions directly (there is no empty constructor).



Now, the  'getWebViewContent'  function (which is a registered command we previously made) will call the 'getHtmlContent' function. 
That means that the relevant function will be decided and called at run time, rather than making a condition to check what kind of file we deal with at the moment and making a relevant string accordingly.
Also, we noticed that the markdown string for local and non-local images is slightly different.
So, to avoid code duplication and maintain modularity, we decided to split the images markdown string function into two seperate functions that will both implement the "previewObject" interface:

One for local images: 









and one for non-local images:




In addition, we added a function to create markdown string for YouTube videos (which also implements the "previewObject" interface):

"getYouTubeVideoMarkdownString" is calling the "extractYouTubeIdFromUrl" function which is using a regex to map the URL and returns the id (always in the 7th cell):
(learned this from this StackOverflow question)













After that, we create a "videoThumbnail" string so we could see the video's thumbnail when hovering. (learned this from this StackOverflow question)

Then we created a new function called "extractUrlByYouTube" which searches for a "youtu" inside the current line we stand on (URL may contain "youtube" or "youtu.be").
If it is a youtube video, we update the interface "makeMarkdownString" to "getYouTubeVideoMarkdownString" (you can see there is no "open in new tab" option, so the interface "getHtmlContent" doesn't have to be updated because it's not being used).
















** IMPORTANT: we made a condition in each URL extraction function ("extractUrlByYouTube", "extractUrlByExtension") to check if we already extracted the correct URL format. To do so, we sent the URL "by ref" (using this StackOverflow question) to those functions. We initiated the URL to "undefined" and made sure it only gets a value when we find the correct format (that means that after we find it, other functions will not do their searches).

Now these two functions are being called one after the other:




















The last thing left to do was to update the interface function from the image URL extraction: (in "extractUrlByExtension" function)
















Explanation: 

  • If we found an extension from the above list of extractions then (currently) it's surly an image- so update the interface "getHtmlContent" function to getImageHtml (if it's a local image we won't use it, just like in youtube videos).
  • If the URL doesn't have whitespaces (which means the correct extension is in the current line): if it has an "http" substring in it then the correct format is a non-local image- update the interface "makeMarkdownString" to "getImageMarkdownString". Otherwise, we are talking about a local image- update the interface "makeMarkdownString" to "getLocalImageMarkdownString".
  • If there is whitespace, it means that there are two URLs somewhere in the substring we found. That means we still haven't found the correct format- update the URL to "undefined".

Finely, we also added some more adjustments to the hover command so the hover panel will show up near the current position (before that, the panel sometimes showed up in some weird places in the file).











The final look so far:





Comments

Post a Comment

Popular posts from this blog

Turorial- How to add a new feature

Image
In this Post we will explain how to make and integrate a new feature to our extension. ** ALL VARIABLES EXPLANATIONS ARE AT THE BOTTOM Let's say we want to support text files. The first thing we will need to do is to create a new file- we name it "TextObject". We then import the "utils" and "IPreviewObject" files. We create a new (export deafult) class caled "TextObject" which implements IPreviewObject. Now, we need to implement the interface's 3 functions: 1. validatePotentialUrl- we check if the current potential URL has a ".txt" extension. if so- we update the current URL to the potential URL, and the currentPreviewObject to a textObject. 2. GetHtmlContent- returns an empty string because we dont need a webview panel for this feature. 3. makeMrkdownString- this function will need to create a string that will allow to open a text file in a new tab when clicking on a certain button. To do so, w...
Read more

Little Bug Fix

Image
After the big refactoring and redesigning we made, there are a few more things we have left to do: 1. Currently, once the cursor is on a certain URL, the hover panel will change accordingly. So, if we hover over URLs that the cursor is not on them we will still be presented with the last hover panel that was created. That is a bug and we need to fix it. 2. We need to make a unit testing (we dont know how to do that, so we need to learn a bit more) 3. Try and use other VSCODE extensions to support previewing PDFs and HTML (the web page, not the HTML file). To fix (1) we added a new condition to the "push" call (in the activate finction, in extension.ts). We check if the line the cursor is on is the same as the line we hover over. If so, call the "updateHoverPanel" function (which makes a markdown string for the hover panel according to the current URL format). If not, update the hover panel content (the markdown string) to an empty string. W...
Read more

Publishing First Beta & Refactoring The Code

Image
We figured it was time to publish a first beta of our extension to VSCODE marketplace. We made some little adjustments like renaming some variables, for more readable code, and fixed a few major bugs, and then we published it using this tutorial .  You can find our extension on this link . *A big bug we had was that the last hover panel continude to show when hovering on defferent lines that are not a URL. Our problem was fixed by updating the current URL variable to UNDEFINED and the markdown string to an empty string, like so: Now that we published our first working extension, we wanted to focus more on the code and the design. Firstly, we decided it would be smarter to extract the relevant line and check what is it's format rather then what we made so far- which is to send the whole document to each extraction function. We created a new function called "extractCurrentLine" which does the following: 1. The function receives the document text ...
Read more