בקשת code review... סקריפט המרת וידיאו ב-iframe

[yossiz]

בעיה שמצאתי,
https://www.apple.com/mac-pro
אם לוחצים על:

יש שם סרטון שמכוסה על ידי הודעת שגיאה, הודעת השגיאה עולה על גבי אלמנט הוידיאו וה-iframe של נטפרי (גם אם ניתן לו z-index גבוה), מכיון שהם position: static והודעת השגיאה הוא position: absolute.

התיקון לכאורה הוא להוסיף אחרי שורה 59:

if (newNode.style.position == "static") newNode.style.position = "relative";

האם זה יגרום לתופעת לוואי לא רצויות?

[yossiz]

עוד מקרה,
https://www.vishay.com/videos/capacitorsconnectors/estaspring-connection-8211-product-overview.html
כאן אלמנט הוידיאו לא זורק שגיאה, מכיון שעוד לא קיים src, זאת מכיון שיש שגיאה קודמת של קריאת AJAX.
מה הפתרון?

עריכה: לכאורה אין פתרון, כי גם אם נצליח לזהות את מצב החסימה, עדיין איננו יודעים מהו ה-src של הוידיאו כדי לשלוח פניה

עריכה2: פתחו את החסימה, מתברר שה-src של הוידיאו הוא blob... לכאורה במקרה כזה אין דרך אוטומטית לחלץ את ה-URL המקורי של הוידיאו, נכון?

[yossiz]

https://www.vishay.com/videos/mosfets/trenchfet174-mosfets-in-automotive-applications.html

כאן יש בעיה אחרת - אלמנט הוידיאו יש לו left-margin: -999999, עד שלוחצים על ואז הוא מקבל left-margin: 0. מכיון שה-iframe נוצר לפני הלחיצה על ממילא הוא יורש את ההגדרה של left-margin: -999999.

פתרון אפשרי: להאזין לשינויי attributes על הוידיאו ולפעול בהתאם.

[dovid]

@yossiz אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

נ. ב. @dovid אני לא מנסה להתנצח או להראות לכולם ראו! הצלחתי לכתוב משהו יותר טוב!. רק שעבדתי על זה די קשה, ואני מאמין שעדיין אפשר לשפר את זה יותר. לכן אני מבקש ביקורות. אני מקווה שבסוף כל משתמשי נטפרי יהנו משיפור זה.

ההתנצלות הזו קצת מעליבה אותי, אני לא הייתי בחיים בא בטענה על מישהו ש"מעיז" לשפר קוד שלי.
ההערות שלך נכונות ולקחתי אותם בחשבון (לא היה לי פתרון וגם לא נלחצתי כי לא שאפתי מייד לשלמות - עד היום היה צריך הקלטה למי שלא יודע לחפש את הכתובת בקונסול).
הפתרון שלך מצויין. אני חשבתי על כיוון של יצירת דיב עם אותם הגדרות של הוידאו ולהעביר את הוידאו לתוכו אבל אפילו לא ניסיתי את זה כי היה לי תחושה שניתוק מהDOM והחזרה אליו יעוררו את האירוע שוב ושוב - אולי אני טועה.

[yossiz]

@dovid אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

ההתנצלות הזו קצת מעליבה אותי, אני לא הייתי בחיים בא בטענה על מישהו ש"מעיז" לשפר קוד שלי.

סליחה...

תודה על ההערות

@dovid אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

כי לא שאפתי מייד לשלמות

אני מסכים לגמרי שלא צריך שלמות מיד. רק מה, הסיבה שבכלל שמתי לב לסקריפט היתה כי זה שיבש דפים. אולי כדאי להשבית את הסקריפט עד שלפחות הוא לא ישבש דפים.

[dovid]

ראיתי ש@magicode אימץ את הקוד שלך.
אבל @shraga הראה לי את הדף הזה https://developers.google.com/web/updates/2019/06
הוידאו שמה ללא parent אישי, אלא ממש חלק מתוכן הדף ממילא הappend מוסיף רחוק מאוד מהמיקום המקורי (כאיבר אחרון במיכל).
לכן אני חושב שצריך

videoElement.outerHTML = newNode.outerHTML;

[dovid]

או אולי תקני יותר:

parent.replaceChild(newNode, videoElement);

[yossiz]

@dovid אני חושש שזה יגרום לבעיות, כי יש עדיין error handler על ה-node של הוידיאו, האם זה יבוטל אוטומטית?
גם אני עושה כל שלוש שניות העתקה חוזרת של המאפיינים, בגלל בעיה שציינתי למעלה.
עריכה אני רואה ש@magicode הוריד את זה... באמת לא היה פתרון אלגנטי...
אולי כך:

videoElement.after(newNode);

אגב, יש עוד בעיה שעוד לא מצאתי לה פתרון, בדף זה הדפדפן מסרב להטעין את האייפרים בגלל X-Frames-Options.

ועוד בעיה מצאתי בזכות ההפניה לאתר זה, שחכתי להוסיף למערך התכונות שצריך להעתיק את התכונה float... (שם הוידיאו מקבל float: right והאייפרים עומד בצד שמאל)

[dovid]

@yossiz אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

@dovid אני חושש שזה יגרום לבעיות, כי יש עדיין error handler על ה-node של הוידיאו, האם זה יבוטל אוטומטית?

לי ברור שכן, ברגע שהאלמנט מנותק מהדום הוא מפסיק לחלוטין את ה"עבודה".

[dovid]

@yossiz אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

אגב, יש עוד בעיה שעוד לא מצאתי לה פתרון, בדף זה הדפדפן מסרב להטעין את האייפרים בגלל X-Frames-Options.

אפשר במקרה זה לשים ישר html כמו a פשוט לשליחת פניה, אבל זה מקרי קצה.

[yossiz]

@dovid אמר בבקשת code review... סקריפט המרת וידיאו ב-iframe:

לי ברור שכן, ברגע שהאלמנט מנותק מהדום הוא מפסיק לחלוטין את ה"עבודה".

התכוונתי לפתרון הראשון, אם אתה רק מחליף את ה-outerHTML, זה נשאר אותו node.

[dovid]

@yossiz תנסה את הקוד הבא:

var btn = document.querySelector("button");
btn.addEventListener('click', function(){
  console.log(123);
  btn.outerHTML = btn.outerHTML;
});

האירוע יקרה רק פעם ראשונה, זה שיטה לסלק מאזינים של אלמנט להשים את הouterHTML שלו בעצמו.