法情直播

[yewzhiyong]

法情直播室 v1.3.1

开发了法情学堂，把直播室的存库加上了个通知，请观众移步去法情学堂。
课程办多了，密码多了，连我们自己都无法记得所有密码。最佳的系统是不需要用任何密码就可以回看视频。观看权锁定与参与者的账号。



法情直播室 v1.3.2

添加了【直播结束】通知。已不少次直播结束了，有参与者联络客服咨询为什么观看不了视频。通知里含有法情学堂回看视频链接，方便参与者浏览。

[yewzhiyong]

法情直播室 1.4

添加了个守候室 - Waiting room。守候室会显示直播标题，主讲人名字和剩下的时间。只要管理员还未把直播室开放，观众就会被带到去守候室。在直播开始15分钟前，观众会自动被转进直播室。

[yewzhiyong]

法情直播室 1.5

添加了管理员后台仪表板。这是一个非常大的变动，计划和编写了许久。



旧直播室页面是 static html file，就是说每一次直播都必须登录 server 更换里头的html文件。
这不是最佳的方法，因为会搞错的机率很大。只要不小心输入或删除了任何一个符号，整个直播页面就无法展示了。
加上，这样的处理方法需要做许多反复的工作。每一次直播需要到直播主页、守候室、和登录页面更换资料。即使资料是一样（课程标题），还是需要到3个页面更换。系统不会互相沟通。

这一次的更新，是要把 Static HTML file 换成 Dynamic。把直播资料都放进一个 database，管理员就更换 database 里的资料，用户进来直播室时，资料也是从 database 获取。因此，整个直播室系统多部分需重写，以让页面会呼叫 database 获取资料。

管理员后台仪表板是输入资料进入database 的界面。我选择只允许输入资料，而不能修改资料。这简化整个系统，直播室页面就只需索取 database 最新的资料即可。

[yewzhiyong]

法情直播室 v2.0

这是开创法情直播室后，首次有这么宏大的改变。直播室的所有编码都已重新编写、直播室被迁移到更快和可靠的服务器、直播室附加系统（排版、播放器、客服、聊天室）都更新了。除此以外，管理员后台和登录页面的功能和处理模式也完全更换了。

我会分成两个部分编写：
第一个部分是前台的更新，就是用户会看到的界面。
第二部分是后台的变化，以及后台和前台的联系。

全新简单洁净的登录页面：


新版“守候室”：


直播室界面：

[yewzhiyong]

2.1 - 聊天室大装修

1. 加了需多Emoji
2. 添加了Stickers
3. 换了颜色

[yewzhiyong]

法情直播 2.2

这一个更新，主要专注在后台。这是2.0版本以来最大的调动。

【迁移 Server】
从 Vultr 迁移到 Digital Ocean。从那天 Vultr server 突然出问题后，就想迁移了。最怕的是直播进行时，观众不能进入 server。
DO 会比较可靠。

【Git Versioning】
法情直播室 1.0 时，因为需要多人调 code，我们是有用 Git 来操作的。
有了仪表板后，我就没去设定 Git 了，是直接 SSH 进 server 修改文件。
有 Git，如果某个更新出问题，会很容易就 undo。也可以多人一起维修。
法情直播室的 code 的 remote repository 是在 Github，在 server 设定了 webhook。有更新会自动 pull 进去。


【Whitelabelling】
儿协公开课的直播，都会使用法情直播室。可是，因为儿协几个月办一次活动，那边的直播室版本总会落后。
每一次要修改，很麻烦。我把文件抄过去后，还要一个一个去修改里头的 “法情” label。
我把所有的“法情”标题，指示，和 database credentials 都通过一个 php ini 文件设为 constant。这文件被放在 public_html 外，以避免外人可以下载或读阅。
后期，要在儿协 server 使用时，我就只需要 git pull。只有软件会更新，里头的内容不会被抄过去。

【可支持多项来临直播】
法情学堂越办越大，直播越来越多。之前，我们一个时间内只能支撑一个直播。
如果有2场来临直播，我们只能设定好下一场的。
万一输入第二场的密码的话，会显示【密码错误】。报名者会被这信息搞乱。
照理是，输入不同密码，会出现不同的资料。
Countdown 时钟也应该根据活动而变。
---

【课程资料库】
我们首先需要准备多一个 database，主要是储存来临直播的资料。
现有的 database，只能用来设定正进行直播的资料。
有了这 database 后，需要有个界面，让直播组可以容易添加和修改资料。




【直播室等待房】
资料库组成后，等待房的编码也需要更新。
之前是这样的：
获取正进行直播的资料:
查看密码是否是正进行的直播 ->
如果不是，查看是否是来临直播 ->
密码错误

现在的编码：
获取正进行直播的资料:
查看密码是否是正进行的直播 ->

如果不是，
获取正进行直播的资料:
查看是否是来临直播 -> 如果是，就展示等待房
查看是否是已过直播 -> 如果是，就转去法情学堂课程页面
密码错误

【仪表板自动输入资料】
这是个方便直播组的功能。在课程存库输入了资料后，可以在仪表板这里选择来临课程。
选择后，网页会自动输入资料。这样，直播组不需要每一次课程前填写所有的资料。在新课程页面填一次就可以了。



后台的更新，观众是看不到的。可是，后台犹如汽车的引擎。一个软件要顺利操作，后台都需要定时维修。

[yewzhiyong]

法情直播 2.3

等候室更新



法情直播等候室，有了2个新功能：

1. 加上了聊天室，让在等候直播开始的学员可以交流。
2. 直播后台批准后，等候室会自动登进直播室，不需点击任何按钮了。

[yewzhiyong]

法情直播室 2.4 - 语言选项

配合 @老黄 的首场马来语讲座 - Kenapa ZhugeLiang Disanjungi Ramai —— Dari Perspektif Sejarah dan Novel，让直播室添加了个语言选项。

这工程不小，因为除了需要编写更换语言的编码，也需要把所有直播室里的文字都改为 ’variables‘。这样，当我们切换不同语言时，系统会选择该出现的文字。如，[zh][login]: 登录；[bm][login]: Daftar Masuk

有了基础，未来要添加什么语言就方便了。

[yewzhiyong]

法情直播室 3.0

[新功能]

1. 投票 - Poll 系统


这应该时最大的添加了。淑维老师即将给课程，她要求直播时要进行投票。我之前有大概策划过，但没有落实。趁这个机会完成它。

投票系统有2个部分 - 前台和后台。
有几点需要考量：
A:前台必须在要投票时，自动出现。不应该让观众另外点击链接去其他网站。
B: 后台必要容易操作，让主讲人自己也可以操控。
C: 应该可以支撑不同的投票平台，让未来如果主讲人有特别需求，我们可以配合。

让投票自动出现是最难解决的一块。这是因为，用户需要不断呼叫服务器。服务器的数据库每一秒收到几百个query，肯定应付不来。

我的解决方法是，让用户没一秒呼叫一个 json 文件。Json 文件就是一个简单的文字文件，犹如 TXT，可是里头有 item + value。

例子：

Code: Select all

{"poll_enable":"enable","poll_id":"12345","poll_status":"0","time":1646467218} 

每一次呼叫，就查看此 json 文件是否 outdated 了。如果和现今时间差异 5秒，就呼叫另一个 script，更新一下 data。

这样以来，data 最多也是过时5秒钟罢了。Database 也是每5秒钟才被呼叫一次，可以应付。

这样，如果 poll_status 是 ’1‘ 的话，就会自动开启；如果是 ’0‘ 的话，就会自动关上。

可是，问提来了。如果用户投票了后，自己关上的话，因为 poll_status 还是 1，过了1秒，又会跳出来。解决方法是，先检查是否 poll_status 有更新，如果没有更新的话，就不用做任何的 action。

2. 用Websocket统计人数

我们之前统计人数，都是通过客服系统来看，和通过直播室聊天区。各有各的弱点。

这一个版本起，我们通过 Websocket 来断定人数。每一个用户进入直播室后，会开一个 ’socket'。这个 'socket' 需要不断更新 'keep-open'。

这样以来，我们只需计算有几个 'socket' 是开着的，就可以断定有几个人在观看直播了。


3. 跳转到直播


偶尔会收到留言或客服信息，有学员会询问为什么自己的直播落后了。我们添加了一个【跳转到直播】的按钮，让用户可以轻易点击后，就跳到直播了。

这也方便 iOS 用户，因为在 iOS Player 是没有这个按钮的。之前他们都需要刷新才会去到直播点。

4. 跳出聊天室


点击按钮后，聊天室就会跳出，浮在荧幕中间。主要是方便手机用户输入信息。

5. 关于法情直播室


添加了一个 【关于】的页面。让用户可以看到这个 Changelog，也可以提交启用或停用报告。

[改进/ 更新]

1. Azure Media Player 更新 2.3.8 -> 2.3.9

2. Bootstrap 更新 4.2 -> 5.0

3. 用Flexbox来编写直播室构造
从第一版本开始，直播室是用 Bootstrap Rows & Columns 来编造。我们用 Bootstrap 5 的 flexbox 来让视频和聊天去会根据不同的荧幕大小自动调整。

4. 法情直播室 logo 换成 SVG Vector

5. 直播室标题，Align centre

6. 自动计算并断定聊天区的高度

这个主要是因为 iOS Safari 的 address bar 被拉到电话下边，会挡着输入信息的栏。

通过Javascript 和 CSS Calc 的功能，我们可以计算用户荧幕的高度有多少，并告诉浏览器。

7. Azure Media Player 的代码在法情 server Self Host

8. Navigation bar 的按钮颜色稍微调整

9. Azure Media Player 转用最新的 Flush 皮肤

10. Navigation bar 按钮自动收缩的 Animation 代码重新编写，现在 animation 非常顺了。

---

[仪表板]

1. 去除了 maximum 20 课程的限制

2. 课程列表加上了 Navigation 按钮


以上两项，非常感谢 @papercup_prince 的协助。

3. 添加了 Poll 的控制表


4. 利用 local storage 储存功能，让浏览器会记得最后浏览的页面，并在点击【保存】或【start poll】后会保留在此页面，不是回到主页。

5. 加了【测试直播链接】的按钮，方便进到直播室测试。

[yewzhiyong]

直播室 V3.1 - 添加了 Zoom/ 直播室选项