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

yossiz

תגובה: שיתוף: סקריפט להסרת אלמנט מיד לאחר שנוצר

קוד זה מבוסס על סקריפט שנכתב (כנראה על ידי @dovid?) עבור נטפרי. הייעוד של הסקריפט הוא לזהות וידיאו חסום בדף ולהמיר כל אלמנט video חסום שנמצאה בלחצן "שלח בקשה לבדיקה". דרך הפעולה הוא על ידי טעינת הוידיאו בתוך iframe (זה גורם לקבלת דף חסימה), והכנסת ה-iframe לתוך הדף במיקום וגודל המדוייק של אלמנט הוידיאו המקורי.
בקוד המקורי היו ארבע בעיות שניסיתי לתקן:

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

דוגמאות לדפים בהם הסקריפט נכשלה: 1, 2, 3, 4, 5 (נכון לעכשיו אפשר לבדוק, למי שנמצא בנטפרי, הסקריפט הזה מוזרק בברירת מחדל לכל הדפים)

ישבתי די הרבה זמן על הקוד הזה... (נסיתי כמה דרכים עד שהחלטתי שזה לכאורה הכי טוב)
אשמח לביקורות

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

(function () {
    var config = {
        attributes: false,
        childList: true,
        subtree: true
    };

    var observer = new MutationObserver(
        function (mutationsList) {
            for (let mutation of mutationsList)
                for (let el of mutation.addedNodes)
                    if (el.tagName == "VIDEO") el.addEventListener("error", function (e) {
                        addButton(this)
                    }, true);
        }
    );

    observer.observe(document, config);

    var vs = document.querySelectorAll("video");
    for (let v of vs) {

        // `HTMLMediaElement.error` doesn't get set when the video source is set in a child `source` element
        // https://stackoverflow.com/a/34239064/8997905
        // https://stackoverflow.com/a/20704999/8997905
        // https://stackoverflow.com/a/46508971/8997905
        // https://stackoverflow.com/questions/9175415

        if (v.error || v.networkState == 3) addButton(v);
        v.addEventListener("error", function (e) {
            console.trace(e);
            addButton(v);
        }, true);
    }

    function addButton(videoElement) {
        if (videoElement.buttonAdded) return; // don't run twice on error event - some pages seem to cause 2 errors
        videoElement.buttonAdded = 1;
        var src = new URL(videoElement.currentSrc);
        if (src.protocol == "blob:") return;
        src.protocol = document.location.protocol; // load http video over https

        var parent = videoElement.parentNode;
        var newNode = document.createElement("iframe");

        // getComputedStyle will only return a percentage when display is none
        // https://stackoverflow.com/a/8406724/8997905
        videoElement.style.display = "none";

        newNode.src = src.toString();
        newNode.style.border = "none";
        newNode.style.background = "#fff";
        newNode.style.zIndex = 9;

        function setProps(iframe) {
            [
                "position",
                "top",
                "left",
                "bottom",
                "right",
                "height",
                "max-height",
                "max-width",
                "min-height",
                "width",
                "min-width",
                "max-width",
                "padding",
                "margin"
            ].map(prop => newNode.style[prop] = window.getComputedStyle(videoElement)[prop]);
            if (newNode.style.position == "static") newNode.style.position = "relative";
        }

        setProps(newNode);
        setInterval(() => setProps(newNode), 3000);
        parent.appendChild(newNode);

        // mejs will overlay an error message when an error is detected, remove it.

        for (let overlay of document.querySelectorAll(".mejs__overlay.mejs__layer, .mejs-overlay.mejs-layer")) {
            for (let childElm of overlay.children) {
                if (childElm.classList.contains("mejs__overlay-error") || childElm.classList.contains("mejs-overlay-error"))
                    overlay.remove();
            }
        }
    }
})();

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 שלו בעצמו.

תחומים - פורום חרדי מקצועי

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