javascript – 如何处理Netflix视频中的dragend事件

2023年3月18日 209次阅读

我有一个Chrome扩展程序可以对Netflix进行一些基本的自动化操作.我有这条线向后或向前跳过：

netflix.cadmium.UiEvents.events.resize[1].scope.events.dragend[trickyIndex].handler(null, {value: 123, pointerEventData: {playing: true}});

当trickyIndex为1时,仅当Netflix滑块保持不变时才能正常工作.如果查看器向前或向后拖动滑块或使用向前或向后箭头键向后或向前跳过,则下次调用上述行时,它会抛出以下两个错误之一：

Uncaught TypeError: Cannot read property ‘handler’ of undefined

要么…

Cannot read property ‘target’ of null

显示的第二个错误是迄今为止最常见的错误,但我也看到了第一个错误.

看起来他们正在使用带有RxJS和react-redux的O​​bservable模式.

但是在观察者移动滑块(或箭头)之后,如果trickyIndex为0,则上面的线将完美地工作.无论再次调用多少次,或者用户是否向前或向前跳过,都是0的棘手索引将始终工作,但棘手的索引1将始终抛出上面显示的错误.

如果我从头开始使用trickyIndex为0,则会抛出错误.只有在用户使用滑块或箭头进行手动跳过后,它才能正常工作.

问题：我不知道如何检测用户何时拖动滑块或使用左/右箭头键.如果我能检测到这一点,我可以正确设置trickyIndex,我相信它会在所有情况下都有效.或者我会完全接受更好或更强大的解决方案.另一个问题是try / catch根本不能解决所显示的代码行.我认为因为涉及的处理程序是异步的.如果我能成功捕获错误,我可以简单地尝试1,如果失败,请尝试0,这可能会很好.但是catch块没有捕获任何东西,异常崩溃一直回到浏览器.

我还尝试了这种方法,它完全没有错误运行,但不执行搜索/跳过：

netflix.cadmium.UiEvents.events.resize.forEach(function(resizeItem) {
    if (resizeItem.scope) {
        resizeItem.scope.events.dragend.forEach(function(dragendItem) {
            if (dragendItem.scope) {
                dragendItem.handler(null, {
                    value: 123,
                    pointerEventData: {playing: true}
                });
            }
        });
    }
});

我确认输入了外部foreach但不是内部foreach(dragendItem.scope始终为null).这令人费解,因为如果我运行原始行：netflix.cadmium.UiEvents.events.resize [1] .scope.events.dragend [trickyIndex] .handler(null,{value：123,pointerEventData：{playing：true}} ); – 它确实适用于特定用例.

有任何想法吗？

最佳答案 Netflix使
observable pattern的
extensive use成为客户端和服务器端 – 您尝试对其事件做的任何事情都需要考虑到这一点.

特别是事件成为“及时收集”,然后他们应用集合功能(如地图).

这种设计模式不会让事件处理程序处于闲置状态(这是它的一大优势),因此您将无法抓住它们,您需要连接核心观察者或添加自己的观察者.

这意味着使用Rx methods而不是索引,因为索引会随着新事件的发生而不断变化而旧的事件被丢弃.

像这样的东西：

netflix.cadmium.UiEvents.events.resize.subscribe(
    // This will repeat every time resize happens
    r => r.scope.events.dragend.subscribe(
        // This will repeat every time dragend happens
        d => d.handler(null, {value: 123, pointerEventData: {playing: true}})
    )
);

Netflix have been quite open about using Rx,如果你打算在它上面构建任何东西,我强烈建议你观看他们的视频(他们的UI有一个完整的YouTube频道).

点赞