Question

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

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

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

未捕获的TypeError：无法读取属性＆＃39; handler＆＃39;未定义的

...或

无法阅读财产＆＃39;目标＆＃39;为null

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

他们似乎正在使用RxJS和react-redux的可观察模式。

但是在观察者移动滑块（或箭头）之后，如果trickyIndex为0，则上面的行将完美地工作。无论再次调用多少次，或者是否用户向后或向前跳过，trickyIndex为0将始终有效，但trickyIndex为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始终为空）。这令人费解，因为如果我运行原始行：netflix.cadmium.UiEvents.events.resize[1].scope.events.dragend[trickyIndex].handler(null, {value: 123, pointerEventData: {playing: true}}); - 它在特定用例中有效。

有什么想法吗？

Answer 1

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

特别是事件及时成为＆＃39;集合。然后他们应用集合函数（例如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，如果您计划在其上构建任何内容，我强烈建议您观看他们的视频（他们的用户界面有完整的YouTube频道）。

如何在Netflix视频中处理dragend事件

1 个答案: