youtube-extension icon indicating copy to clipboard operation
youtube-extension copied to clipboard

Allow 'openLinksInNewWindow' affect the link inside the svg when 'smoothLivePreview' is true

Open RamiroPastor opened this issue 6 years ago • 3 comments

var svg =
      '<div class="youtube-preview" style="width:%2; height:%3; background-color:#333; position:relative;">' +
      '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" ' +
      ...
      '</svg>' +
      '<div style="text-align:center; padding-top:10px; color:#fff"><a (TARGET "_BLANK" HERE) href="%1">%1</a></div>' +
'</div>',

Is it reasonable? Also sorry if i don't do it myself but i have very low experience with Git and JS

RamiroPastor avatar Jul 15 '18 19:07 RamiroPastor

Ok thanks.

Anyway i manually removed the link and added a simple paragraph along the lines of "your video will be correcty embedded" with a more readable color.

I did this because the link wasn't readable because of its blue color; i checked the code now and it has a "color:#fff" in the div wrapping the link, but it doesn't affect the link itself (at least not in firefox). However, i just tried <a style="color:#fff" href="%1">%1</a> and it works as expected, even though i still prefer to clearly inform that that particular element of the preview is not in a "final view state"

¿Maybe the color issue is my own problem?

RamiroPastor avatar Sep 04 '18 23:09 RamiroPastor

I had a good look at it and I really don't know why the link is even there in the first place. (I think it was an artifact from smoothLivePreview is supposed to be used in live editors, as a placeholder, to reduce the burden placed in the browser.

For instance, let's say you're using angular to create a live editor like this one. Every time the user types one character, showdown reads all text and parses it. Now, let's say you have 5 youtube videos in your live md text. Then it means everytime the user types a character, those 5 videos are recreated again (means 5 requests to youtube + loading the iframe).

That can be extremely laggy.

using smoothLivePreview prevents this since all is shown to the user is an image (or a SVG)

tivie avatar Sep 05 '18 00:09 tivie

Yes, i use it in a live previewer also.

Even if there is only 1 video, it will constantly flicker (or completely disappear) as you type because the iframe starts empty and then fills itself with the video thumbnail.

So using smoothLivePreview is a clear choice here.

But then i see 2 problems with the svg placeholder:

  • The link inside it is not readable in blue color (this is how i see it in firefox, even with a "color: white" in the wrapping div)
  • The end user may be confused, not knowing that the svg placeholder will be correctly replaced by the real iframe in the final view (when i finally parse the complete user input without smoothLivePreview)
  • Link always opens in the same tab (although i now know how to manually fix that and always open in new tab)

My own initial approach to solving these was switching the link for a simple informative line "your video will be correctly embedded" However, i currently think that it can get confusing if the end user puts a lot of videos, so keeping the link can be a good idea

RamiroPastor avatar Sep 05 '18 13:09 RamiroPastor