oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-12 09:00:54 +00:00
Code Wiki Activity

Closes #9

Browse source 
Closes #8

Use position: fixed for positioning the theater mode channel metadata view.
This commit is contained in:
SirStendec 2016-10-03 18:35:32 -04:00
parent f9e3d41e65
commit c7c07d4c58
3 changed files with 24 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/ember/channel.js
View file

@ -31,9 +31,9 @@ FFZ.prototype.setup_channel = function() {
this.update_views('component:channel-redesign', this.modify_channel_redesign); this.update_views('component:channel-redesign', this.modify_channel_redesign);
this.update_views('component:channel-redesign/live', this.modify_channel_live); this.update_views('component:channel-redesign/live', this.modify_channel_live);
this.log("Hooking the Ember Channel Index component."); /*this.log("Hooking the Ember Channel Index component.");
if ( ! this.update_views('component:legacy-channel', this.modify_channel_index) ) if ( ! this.update_views('component:legacy-channel', this.modify_channel_index) )
return; return;*/
var f = this, var f = this,
Channel = utils.ember_lookup('controller:channel'); Channel = utils.ember_lookup('controller:channel');
@ -568,7 +568,7 @@ FFZ.prototype.modify_channel_redesign = function(view) {
} }
FFZ.prototype.modify_channel_index = function(view) { /*FFZ.prototype.modify_channel_index = function(view) {
var f = this; var f = this;
utils.ember_reopen_view(view, { utils.ember_reopen_view(view, {
ffz_init: function() { ffz_init: function() {
@ -1105,7 +1105,7 @@ FFZ.prototype.modify_channel_index = function(view) {
el.innerHTML = utils.time_to_string(uptime, false, false, false, f.settings.stream_uptime === 1 || f.settings.stream_uptime === 3); el.innerHTML = utils.time_to_string(uptime, false, false, false, f.settings.stream_uptime === 1 || f.settings.stream_uptime === 3);
} }
}); });
} }*/
// --------------- // ---------------

10
src/ember/layout.js
View file

@ -272,6 +272,7 @@ FFZ.prototype.setup_layout = function() {
theatre_chat_height = window_height - theatre_video_height, theatre_chat_height = window_height - theatre_video_height,
theatre_video_top = video_below ? theatre_chat_height : 0, theatre_video_top = video_below ? theatre_chat_height : 0,
theatre_video_bottom = window_height - (theatre_video_top + theatre_video_height),
theatre_chat_top = video_below ? 0 : theatre_video_height; theatre_chat_top = video_below ? 0 : theatre_video_height;
out += 'top: ' + video_top + 'px;right: 0}' + out += 'top: ' + video_top + 'px;right: 0}' +
@ -313,7 +314,10 @@ FFZ.prototype.setup_layout = function() {
'.ffz-channel-bar-bottom .cn-bar {' + '.ffz-channel-bar-bottom .cn-bar {' +
'bottom: ' + video_bottom + 'px}' + 'bottom: ' + video_bottom + 'px}' +
'body:not(.ffz-sidebar-swap) .cn-bar-fixed { right: 0 !important }' + 'body:not(.ffz-sidebar-swap) .cn-bar-fixed { right: 0 !important }' +
'body.ffz-sidebar-swap .cn-bar-fixed { left: 0 !important }'; 'body.ffz-sidebar-swap .cn-bar-fixed { left: 0 !important }' +
'.ffz-theater-stats .app-main.theatre .cn-metabar__more {' +
'max-width: calc(100% - 300px);' +
'bottom: ' + (theatre_video_bottom + 55) + 'px !important}';
} else { } else {
out += 'top: 0; right: ' + width + 'px}' + out += 'top: 0; right: ' + width + 'px}' +
@ -332,7 +336,9 @@ FFZ.prototype.setup_layout = function() {
'body:not(.ffz-sidebar-swap) #main_col:not(.expandRight) .cn-bar-fixed {' + 'body:not(.ffz-sidebar-swap) #main_col:not(.expandRight) .cn-bar-fixed {' +
'right: ' + width + 'px}' + 'right: ' + width + 'px}' +
'body.ffz-sidebar-swap #main_col:not(.expandRight) .cn-bar-fixed {' + 'body.ffz-sidebar-swap #main_col:not(.expandRight) .cn-bar-fixed {' +
'left: ' + width + 'px !important}'; 'left: ' + width + 'px !important}' +
'.ffz-theater-stats .app-main.theatre .cn-metabar__more {' +
'max-width: calc(100% - ' + (width + 300) + 'px)}';
} }
} }

48
style.css
View file

@ -279,7 +279,7 @@ body.ffz-bttv-dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill:
display: block display: block
} }
.ffz-theater-stats .app-main.theatre .player-column:focus #hostmode > div.clearfix, /*.ffz-theater-stats .app-main.theatre .player-column:focus #hostmode > div.clearfix,
.ffz-theater-stats .app-main.theatre .player-column:hover #hostmode > div.clearfix { .ffz-theater-stats .app-main.theatre .player-column:hover #hostmode > div.clearfix {
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -287,56 +287,32 @@ body.ffz-bttv-dark .ffz-ui-toggle.blue.live:hover svg.svg-emoticons path { fill:
.ffz-theater-stats .app-main.theatre #channel .player-column:focus .archive_info + .stats-and-actions, .ffz-theater-stats .app-main.theatre #channel .player-column:focus .archive_info + .stats-and-actions,
.ffz-theater-stats .app-main.theatre #channel .player-column:hover .archive_info + .stats-and-actions { .ffz-theater-stats .app-main.theatre #channel .player-column:hover .archive_info + .stats-and-actions {
display: none; display: none;
} }*/
.ffz-theater-stats .app-main.theatre .player-column:hover + .metadata-box .cn-metabar__more, .ffz-theater-stats .app-main.theatre .player-column:hover + .metadata-box .cn-metabar__more,
.ffz-theater-stats .app-main.theatre .player-column:focus + .metadata-box .cn-metabar__more, .ffz-theater-stats .app-main.theatre .player-column:focus + .metadata-box .cn-metabar__more,
.ffz-theater-stats .app-main.theatre .cn-metabar__more:hover, .ffz-theater-stats .app-main.theatre .cn-metabar__more:hover,
.ffz-theater-stats .app-main.theatre .cn-metabar__more:focus, .ffz-theater-stats .app-main.theatre .cn-metabar__more:focus /*,
.ffz-theater-stats .app-main.theatre .player-column:focus #hostmode > div.clearfix, .ffz-theater-stats .app-main.theatre .player-column:focus #hostmode > div.clearfix,
.ffz-theater-stats .app-main.theatre .player-column:hover #hostmode > div.clearfix, .ffz-theater-stats .app-main.theatre .player-column:hover #hostmode > div.clearfix,
.ffz-theater-stats .app-main.theatre .player-column:focus .stats-and-actions, .ffz-theater-stats .app-main.theatre .player-column:focus .stats-and-actions,
.ffz-theater-stats .app-main.theatre .player-column:hover .stats-and-actions { .ffz-theater-stats .app-main.theatre .player-column:hover .stats-and-actions */ {
background-color: #19191f; background-color: rgba(25,25,31,0.95);
color: #aaa; color: #aaa;
position: absolute; position: fixed;
bottom: 55px; bottom: 55px;
margin-right: 150px;
left: 10px; left: 10px;
width: auto;
z-index: 7; z-index: 7;
padding: 10px; padding: 10px;
opacity: 0.95;
} }
.ffz-theater-stats .app-main.theatre .player-column:hover + .metadata-box .cn-metabar__more, .ffz-theater-stats .app-main.theatre .cn-metabar__more span,
.ffz-theater-stats .app-main.theatre .player-column:focus + .metadata-box .cn-metabar__more, .ffz-theater-stats .app-main.theatre .cn-metabar__more div { flex-grow: 0 !important }
.ffz-theater-stats .app-main.theatre .cn-metabar__more:hover,
.ffz-theater-stats .app-main.theatre .cn-metabar__more:focus {
width: calc(100% - 20px);
margin-bottom: 40px;
}
.ffz-theater-stats.ffz-theatre-conversations .app-main.theatre .player-column:focus #hostmode > div.clearfix,
.ffz-theater-stats.ffz-theatre-conversations .app-main.theatre .player-column:hover #hostmode > div.clearfix,
.ffz-theater-stats.ffz-theatre-conversations .app-main.theatre .player-column:focus .stats-and-actions,
.ffz-theater-stats.ffz-theatre-conversations .app-main.theatre .player-column:hover .stats-and-actions,
.ffz-theater-stats.ffz-theatre-conversations .app-main.theatre .player-column:hover + .metadata-box .cn-metabar__more,
.ffz-theater-stats.ffz-theatre-conversations .app-main.theatre .player-column:focus + .metadata-box .cn-metabar__more,
.ffz-theater-stats.ffz-theatre-conversations .app-main.theatre .cn-metabar__more:hover,
.ffz-theater-stats.ffz-theatre-conversations .app-main.theatre .cn-metabar__more:focus,
.ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:hover + .metadata-box .cn-metabar__more,
.ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:focus + .metadata-box .cn-metabar__more,
.ffz-theater-stats.ffz-top-conversations .app-main.theatre .cn-metabar__more:hover,
.ffz-theater-stats.ffz-top-conversations .app-main.theatre .cn-metabar__more:focus,
.ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:focus #hostmode > div.clearfix,
.ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:hover #hostmode > div.clearfix,
.ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:focus .stats-and-actions,
.ffz-theater-stats.ffz-top-conversations .app-main.theatre .player-column:hover .stats-and-actions {
bottom: 15px;
}
.ffz-theater-stats .app-main.theatre .channel-stats .stat { color: #aaa; } .ffz-theater-stats .app-main.theatre .channel-stats .stat { color: #aaa; }
@ -2927,7 +2903,7 @@ body:not(.ffz-top-conversations) .conversations-list-bottom-bar {
body:not(.ffz-tags-on-channel) .tw-title--tall { height: 60px } body:not(.ffz-tags-on-channel) .tw-title--tall { height: 60px }
body:not(.ffz-tags-on-channel) #broadcast-meta .ct-tags, /*body:not(.ffz-tags-on-channel) #broadcast-meta .ct-tags,*/
.cn-metabar__title .ct-tags, .cn-metabar__title .ct-tags,
/*body:not(.ffz-creative-showcase) .ct-banner-handler .tower > div:last-child,*/ /*body:not(.ffz-creative-showcase) .ct-banner-handler .tower > div:last-child,*/
body:not(.ffz-creative-showcase) .ct-spotlight-container { display: none; } body:not(.ffz-creative-showcase) .ct-spotlight-container { display: none; }