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

Question

我有一个 Chrome 扩展程序，可以针对 Netflix 执行一些基本的自动化操作。我有这一行向后或向前执行跳过:

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

当 trickyIndex 为 1 时，仅当 Netflix slider 保持不变时，它才能完美运行。如果查看者向前或向后拖动 slider 或使用向前或向后箭头键向后或向前跳转，则下次调用上述行时，它会抛出以下两个错误之一:

Uncaught TypeError: Cannot read property 'handler' of undefined

或者...

Cannot read property 'target' of null

显示的第二个错误是迄今为止最常见的错误，但我也见过第一个错误。

看来他们正在使用带有 RxJS 和 react-redux 的 Observable 模式。

但是在浏览器移动 slider (或箭头)后，如果 trickyIndex 为 0，上面的代码将从那时起完美运行。无论再次调用多少次，或者是否用户向后或向前跳转，0 的 trickyIndex 将始终有效，但 1 的 trickyIndex 将始终抛出上面显示的错误。

如果我从一开始就使用 0 的 trickyIndex，它就会抛出错误。它只有在用户使用 slider 或箭头手动跳过后才能正常工作。

问题:我不知道如何检测用户何时拖动 slider 或使用左/右箭头键。如果我能检测到这一点，我就可以正确设置 trickyIndex，我相信它在所有情况下都能正常工作。或者我愿意接受更好或更强大的解决方案。另一个问题是 try/catch 根本无法解决显示的代码行。我认为是因为涉及一个异步的处理程序。如果我能成功捕捉到错误，我可以简单地尝试 1，如果失败，则尝试 0，这可能会很有效。但是 catch block 什么也没捕获，异常一直崩溃并返回到浏览器。

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

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}});——它在特定用例中确实有效。

有什么想法吗？

Answer 1

Netflix 制作 extensive use的 observable pattern客户端和服务器端 - 您尝试对其事件执行的任何操作都需要考虑到这一点。

在特定事件中成为“时间集合”，然后它们应用集合函数(例如 map)。

这种设计模式不会留下事件处理程序(这是它的一大优势)，因此您将无法保留它们，您需要连接到核心观察者或添加自己的观察者.

这意味着使用 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 channel )。