Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[建議] holotools和holodex的聊天室顯示方式變更 #43

Closed
rushive opened this issue May 3, 2021 · 7 comments · Fixed by #80
Closed

[建議] holotools和holodex的聊天室顯示方式變更 #43

rushive opened this issue May 3, 2021 · 7 comments · Fixed by #80
Assignees
Labels
question Further information is requested

Comments

@rushive
Copy link
Contributor

rushive commented May 3, 2021

你的提案是因為發生某些問題嗎?
預留的聊天室空白位置會壓縮到影片畫面的顯示空間。

你期待的改進方案
移除holotools與holodex中聊天室預留的空間,改為點擊開啟聊天室後再分配空間。

你考慮過的其他替代方案
無。

其他內容
例:

@zoosewu
Copy link
Owner

zoosewu commented May 3, 2021

改成這種模式會有幾種問題
1.視窗丟掉之後怎麼新增回來(可能要右上列表新增一個P)
2.能不能讓套件的分割切換全版/編輯模式(類似聊天室分割下面的編輯按鈕)
3.RWD會不會出問題(之前實作自訂寬度時好像修得差不多了,還是要再確認一下)

目前的想法是新增一個CHAT然後把CHAT清空改成套件
因為如果是用YT的話會造成上方按鈕不見(新增進分割的實況就不會在上面列表顯示)

然後聊天室有兩個額外功能CHAT跟TL不確定這些會不會造成影響
或是拔掉聊天室之後導致網站原生功能出問題

最後是套件會不會有奇怪的狀況發生
現在網站在調整布局的時候有時候會把iframe全部reset
原本看到一半的實況會變成未開啟狀態
如果套件也發生這種事情要重新登入找文章滿困擾的

@zoosewu zoosewu added the question Further information is requested label May 3, 2021
@rushive
Copy link
Contributor Author

rushive commented May 4, 2021

改成這種模式會有幾種問題
1.視窗丟掉之後怎麼新增回來(可能要右上列表新增一個P)

打算與#40 一樣在控制列上加上按鈕。

2.能不能讓套件的分割切換全版/編輯模式(類似聊天室分割下面的編輯按鈕)
3.RWD會不會出問題(之前實作自訂寬度時好像修得差不多了,還是要再確認一下)

如果要改成全版/編輯模式切換的話感覺要改動的範圍不小,holodex團隊好像也還沒完全完成,應該暫時先用video的框架擺放。
寬度的話可以直接拉邊框調整,反倒是長度沒有反應,晚點再看看是哪裡出錯了。

目前的想法是新增一個CHAT然後把CHAT清空改成套件
因為如果是用YT的話會造成上方按鈕不見(新增進分割的實況就不會在上面列表顯示)

然後聊天室有兩個額外功能CHAT跟TL不確定這些會不會造成影響
或是拔掉聊天室之後導致網站原生功能出問題

我是想一樣在右上方加按鈕就不會占用開台列表的區域也不用擔心按鈕不見,不過現在看起來控制列有點長,加上去不知道會不會影響使用。聊天室的話我覺得應該都是額外掛上去的,我會先直接動DOM看會不會出事再決定拿掉哪部分。

最後是套件會不會有奇怪的狀況發生
現在網站在調整布局的時候有時候會把iframe全部reset
原本看到一半的實況會變成未開啟狀態
如果套件也發生這種事情要重新登入找文章滿困擾的

對,我也不知道為什麼/什麼時候會重新整理,這點滿棘手的,我看之後要不要聯絡他們團隊問一下。

@zoosewu
Copy link
Owner

zoosewu commented May 4, 2021

打算與#40 一樣在控制列上加上按鈕。

這邊可能可以做跟其他網站不同的形式,
變成按一下就加一個,他想開幾個套件就開幾個。
這樣就不用已生成的Instance到底有沒有消失。

按鈕也可以不要加在上面的控制列,
可以在新的分割裡面加就好。
現在裡面有開YT或是開聊天室,
我們新增第三個開套件,
然後點了之後開啟聊天室,
再把聊天室內容清空塞套件。

如果要改成全版/編輯模式切換的話感覺要改動的範圍不小,holodex團隊好像也還沒完全完成,
應該暫時先用video的框架擺放。
寬度的話可以直接拉邊框調整,反倒是長度沒有反應,晚點再看看是哪裡出錯了。

我先詢問他們官方好了,
如果他們能稍微提供一點支援例如開API就好了。

剛剛測試一下直接把聊天室砍掉塞套件應該是可行的。
下面的CHAT跟TL兩個按鈕無視就好。
這樣就可以按編輯調整大小,
打勾確認之後套件就能填滿整個分割。

我是想一樣在右上方加按鈕就不會占用開台列表的區域也不用擔心按鈕不見。
不過現在看起來控制列有點長,加上去不知道會不會影響使用。
聊天室的話我覺得應該都是額外掛上去的,我會先直接動DOM看會不會出事再決定拿掉哪部分。

我1920*1080的視窗看起來他們UI乾淨俐落,
所以雖然icon滿小的不過都很清楚,
所以塞一堆其實占用的空間也不是說非常多。

對,我也不知道為什麼/什麼時候會重新整理,這點滿棘手的,我看之後要不要聯絡他們團隊問一下。

這部分應該是他們的實例陣列沒有加上key,
我回報給他們了。

他們網站也是用vue去渲染前端的,
嚴格來說其實能抓到他們的vue instance然後在裡面嵌入或撈他們的API,
不過這部分太麻煩了。

@zoosewu
Copy link
Owner

zoosewu commented May 4, 2021

剛剛和holodex的人討論之後
感覺上有三種嵌入的方式
1.借用一個分割來填充套件內容
2.聊天室視窗上會有tab選擇要顯示的聊天室,新增一個tab提供顯示套件
3.在聊天室上面懸浮套件 就像Youtube聊天室的用法

我覺得2是比較複雜而且麻煩的
然後1的話看起來會很酷 但是也應該蠻麻煩的
3應該是最簡單可行的 只要有聊天室就嵌一個給他

然後套件同時生成超過一個不知道會不會有bug
可以的話好向還是盡量只生成一個就好

@rushive
Copy link
Contributor Author

rushive commented Jun 3, 2021

1.借用一個分割來填充套件內容
2.聊天室視窗上會有tab選擇要顯示的聊天室,新增一個tab提供顯示套件
3.在聊天室上面懸浮套件 就像Youtube聊天室的用法

這幾個作法好像都要一直用timeinterval定時(0.5~1s)去查有沒有cell instance,不知道會不會影響到效能。
我的做法偏向在控制列加按鈕,有點擊的時候才去看有沒有可以插入的空分割。

我覺得2是比較複雜而且麻煩的

這個我覺得是使用上最舒適的做法,但應該要向holodex他們提一些feature不然沒辦法實作。

3應該是最簡單可行的 只要有聊天室就嵌一個給他

我覺得這樣嵌進去的時候要把下面的tab切到TL的部分或直接砍掉yt的聊天室,不然大台會很卡。

然後套件同時生成超過一個不知道會不會有bug
可以的話好向還是盡量只生成一個就好

vue的instance都是用動態產生出來的應該是沒問題
我是在想如果用兩個物件互相連結,其中一個隱藏起來另一個掛在cell裡,在cell被銷毀後可不可以直接clone隱藏的回復工作狀態,這樣就不用重新登入之類的操作了。

@zoosewu
Copy link
Owner

zoosewu commented Jun 8, 2021

#73

這幾個作法好像都要一直用timeinterval定時(0.5~1s)去查有沒有cell instance,不知道會不會影響到效能。
我的做法偏向在控制列加按鈕,有點擊的時候才去看有沒有可以插入的空分割。

一秒次的if判斷不太影響效能

如果要修改現有module要調整太多東西,我在原本的基礎上直接調整,減少對其他支援網站的影響。
剩下的是註解掉的collapse動畫部分,取消註解後大部分可以正常運行,除了max-height要多按一次P按鈕才會更新高度。

什麼意思,不太懂。

另外不知道有沒有 #43 (comment) 提到的可以共用instance data的方法,不小心弄掉聊天室要重新登入總覺得有點麻煩。
我試著實作的時候不知道是vuex資料亂掉還是怎麼樣,出來的結果都不太理想。

登入狀態是直接在iframe裡面的,砍掉cell就會連iframe一起砍掉了。
然後密碼也不會儲存或暫存在任何地方,所以vuex也找不到。
關於vuex資料共享的部分可能要去看他的source code,一般而言我覺得vuex或vue的root instance不會任意的生成或消滅,所以我覺得他們可能沒辦法簡單的這樣做。

另外有兩個問題、一個是按鈕太紅了,一般而言紅色都有特定的意思,例如警告或刪除。要不要換其他顏色?
還有一個是能不能改成每個cell都給他P按鈕,但是只能生一個實體,有實體就不會再生或是砍掉P按鈕,不然有時候生在不想要的cell上還要調整很麻煩。

@rushive
Copy link
Contributor Author

rushive commented Jun 8, 2021

什麼意思,不太懂。

剛剛再看了一下發現沒問題 ,等一下再推新的版本,昨天腦袋突然打結。

登入狀態是直接在iframe裡面的,砍掉cell就會連iframe一起砍掉了。
然後密碼也不會儲存或暫存在任何地方,所以vuex也找不到。
關於vuex資料共享的部分可能要去看他的source code,一般而言我覺得vuex或vue的root instance不會任意的生成或消滅,所以我覺得他們可能沒辦法簡單的這樣做。

那除了一次登入兩個PTT然後一次操作兩邊之外好像沒別的方法了,那要提醒使用者用預設自動佈局跟增減cell時要注意一下。

另外有兩個問題、一個是按鈕太紅了,一般而言紅色都有特定的意思,例如警告或刪除。要不要換其他顏色?
還有一個是能不能改成每個cell都給他P按鈕,但是只能生一個實體,有實體就不會再生或是砍掉P按鈕,不然有時候生在不想要的cell上還要調整很麻煩。

OK,我調整一下。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
2 participants