Adjust video card position with updatePosition

[F-park]

视频卡片改为默认显示在左边（在动态下不会挡住标题）且垂直居中，且不会遮挡视频预览。

---

close #205

[F-park]

一个小问题，在热门页面左边的视频会因为左方位置不够，把卡片显示在右边，挡住文字。

[F-park]

由于热门页面的视频悬停时不会触发预览，所以让视频卡片在左方位置不够时，可以遮挡封面。

[F-park]

因为空间的 up 精选视频也会像上面一样遮挡文字，文字在右方就会有问题。 文字出现在下方的情况好像只有首页，所以让其他页面在左方位置不够时，也可以遮挡封面。

[gaogaotiantian]

是不是遮挡完全取决于你鼠标在哪儿触发的。我不认为“左边”是一个好的default。我们的阅读习惯，是从左向右的，所以我们习惯后出现的东西，出现在当前视角的右侧，而不是左侧。一个很简单的例子，当你在网页右键的时候，弹出来的那个框，只要右侧有位置，一定是出现在右侧的。你在资源管理器里右键，一样的道理。如果你在游戏里感受一下，也会发现，大部分情况都是在触发点右侧弹出信息的，这是符合我们的习惯的。所以不应该把默认放到左侧。

[F-park]

改成了通过兄弟元素或当前 flex 方向判断卡片显示位置（垂直布局往左右显示，优先右边，水平布局往上下显示，优先下边）。

但在上下显示还是遇到了一种情况，上下都不够位置显示，既然不应该显示在左边，我倾向不做处理（因为往上滚动鼠标就能看到内容了）。

[gaogaotiantian]

你没有说服我为什么默认显示在右边是有问题的。现在的显示方法是可以保证在屏幕有空间的情况下把卡片都显示出来的。

[F-park]

因为会在不同程度上挡住视频预览和相关联的文字，所以应该显示在这两者之外

[gaogaotiantian]

出现的弹窗是根据鼠标的位置弹的，你鼠标在视频左侧进入，那就是往右弹会挡住，从右侧进入，就是往左弹会挡住，从上面进入，就是往下弹会挡住，从下面进入，就是往上弹会挡住。为什么有一个方向会比其他方向更好？

[F-park]

可能需要点图片来说明。

首页/分区界面，元素呈垂直布局，卡片只会往左右显示。

热门界面，元素呈水平布局，卡片只会往上下显示。

动态界面，元素整体为 flex 元素，根据 flex 方向来判断

[gaogaotiantian]

哦你相当于是把我的整个videocard的位置逻辑改了，不再跟着鼠标走了，而是跟着这个target的边缘走？那你target边缘找不准咋办？

[F-park]

而是跟着这个target的边缘走？

对的

那你target边缘找不准咋办？

边缘不会找不准的，target 要不就是封面，要不就是标题，最坏的情况就是卡片左右/上下显示判断错误。但我测试了大量常用的页面，还未发现问题。

[gaogaotiantian]

ok这个理念本身是可以接受的。

我看了一下你的实现，那个判断上下左右的地方有点太magic了。我倾向于用白名单解决这个问题。默认情况下，永远是先右后左，在左右布局的时候，永远先试图把top对齐（也就是card往下延伸），如果不行，bot对齐，再不行再mid对齐。可以考虑把mid和bot换一下，但是在屏幕允许的情况下，一定是优先把这个card放到视频的右下方向的。只是先右后下还是先下后右。

对于某一些特别的网页，比如动态或者热门，可以先下后右。也就是把card放到target下方，放不下就放上方，都放不下默认放下面。然后尽可能左对齐，位置不够再考虑其他的方式。（如果是这种上下布局，target左对齐位置不够的概率应该非常低才对）。

不要试图用网页上的元素去做猜测，出问题的几率反而更大，而且维护太复杂了。你去找sibling这个事情太magic，直接判断url。而且你的上下左右显示怎么比我当时写的还更复杂一点。

[F-park]

是否可以结合一下，可以用 sibling 判断就用 sibling 判断，判断不了的全部用 site-script 显式标注。

在左右布局的时候，我把 mid 设为默认的原因是此视频不存在AI总结 这句话也会居中显示，我感觉默认放在右下不太好看。

---

由于我最近在玩黑神话，可能需要晚点才能改进这个 PR。

[gaogaotiantian]

sibling这个事情本身太magic了，可维护性太差了，它实际上绕了若干个圈子去试图解决这个事情，我觉得里面太多地方可能出现一些判断的偏差了，比如target的sibling其实不是真正意义上的并列项，比如pixel不完全对齐，比如它恰好是纵向的sibling但是其实应该显示在横向。在实际页面种类很少的情况下，用这种magic不如直接白名单。

如果卡片显示在左边，不存在AI总结就是上面和target对齐吧？我想象中是可以接受的。

居中经常是一个不那么理想的选择。其实我觉得这个不存在AI显示在鼠标边上也不错。

[F-park]

那就默认左右显示，手动标注上下显示的状态吧。

其实我觉得这个不存在AI显示在鼠标边上也不错。

由于我经常使用首页，挡住视频预览对我来说问题挺大的。默认右下（下是卡片往下边显示的意思）的话就是情况，我觉得也可以吧。

[gaogaotiantian]

可以，这个位置显示也行。等你把白名单的部分更新了我看一下~

[F-park]

完成了，目前就只有四个地方让卡片上下显示，其他地方都是左右显示

1. 热门

2. 动态

3. 空间（仅 up 代表作为一个时）

4. 视频页推荐视频

[gaogaotiantian]

这里我没太懂为啥要去注入一个script。我们应该是尽可能避免注入script的，当然有时候没办法了还得用。

对于这个case，直接检查href就足够了吧？有什么必要去把每个视频做标注么？热门动态和视频列表这三个应该是url完全可以确定的东西吧。那个“只有一个代表作”的case不用管，它过于corner了，显示在右边并不会有什么大问题。

我现在有些担心的是，这种上下形式的显示会不会在很多情况下都显示不全。可以先试用一下。

[F-park]

对于这个case，直接检查href就足够了吧？

右上角的动态收藏历史里还有视频，我不认为匹配 href 是个好选择。

我们应该是尽可能避免注入script的

也可以，应该也就这个位置用到，我晚点改改

[gaogaotiantian]

ok，如果直接href不行，那href加上一个class（或者parent的class）之类的呢？我希望把这段代码做的尽可能的灵活。我们可以多开一个函数比如cardVerticalFirst(target)，然后在里面尽可能简单地处理逻辑。就尽量是href+class的检查就定位到。

[F-park]

我现在有些担心的是，这种上下形式的显示会不会在很多情况下都显示不全。

现在往下显示的时候，热评可以出现在屏幕外，在我的1080p屏幕下刚好上下都能显示全。