1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
|
MediaElementPlayer.prototype.buildsubtitles = function(player, controls, layers, media) {
var $btns = $([
'<span>',
'<div class="mejs-button mejs-subtitles mejs-subtitles-button">',
'<button type="button" title="Subtitles" aria-label="Subtitles"></button>',
'</div>',
'<div class="mejs-button mejs-subtitles mejs-subtitles-popup-button">',
'<button type="button" title="Subtitles in Popup" aria-label="Subtitles in Popup"></button>',
'</div>',
'</span>'
].join(''));
$btns
.appendTo(controls)
.on('click', '.mejs-subtitles-button', function() {
connectToL2S2()
})
.on('click', '.mejs-subtitles-popup-button', function() {
var
frontend_url = $('.js-subtitles-settings').data('frontend-url'),
room = $('.video-wrap').data('subtitles-room-id');
window.open(frontend_url+''+room, 'subtitles-'+room, 'width=1000,height=560');
});
var $lines = $([
'<div class="mejs-subtitles-lines">',
'<div class="mejs-subtitles-lines-inner"></div>',
'</div>'
].join(''));
$lines.appendTo(layers);
};
function connectToL2S2()
{
var
baseurl = $('.js-subtitles-settings').data('primus-url');
if(window.io)
{
return openSocket();
}
$.getScript(baseurl+'primus/primus.js', openSocket);
}
function openSocket()
{
var
baseurl = $('.js-subtitles-settings').data('primus-url'),
room = $('.video-wrap').data('subtitles-room-id'),
$lines = $('.mejs-subtitles-lines');
var primus = Primus.connect(baseurl);
primus.on('open', function()
{
primus.emit('join', room);
$lines.css({
display: 'block'
});
});
// primus.on('lineStart', function(roomId, userId, text)
// {
// console.log('lineStart', roomId, userId, text);
// });
primus.on('line', function(roomId, text, userId, color)
{
if (text && text.trim().length > 0 && roomId == room) {
console.log('line', roomId, userId, text, color);
appendLine(text);
}
});
}
function appendLine(line)
{
var
$inner = $('.mejs-subtitles-lines .mejs-subtitles-lines-inner'),
$line = $('<div>').text(line),
cnt = 3;
$inner
.append($line)
.find('> div')
.slice(0, -cnt)
.remove()
$line.autoScale();
}
$.fn.autoScale = function() {
if(!this.data('autoScaleOriginal')) {
this.data('autoScaleOriginal', parseInt(this.css('font-size')));
}
var
maxSize = this.data('autoScaleOriginal');
maxH = this.closest('.mejs-subtitles-lines').innerHeight(),
thisH = this.css('font-size', maxSize).outerHeight();
console.log(thisH, maxH, maxSize);
while(thisH > maxH && maxSize > 0) {
console.log(thisH, maxH, maxSize);
thisH = this.css('font-size', --maxSize).outerHeight();
}
return this;
}
|
