From 60c3d51c7e4a04bd6eb58c898c74b37677d9af3c Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Thu, 1 Dec 2016 18:10:12 -0500
Subject: [PATCH] 3.5.387. Remove FFZ's small player feature. Add support for
 Twitch's native mini player.

---
 changelog.html       | 11 +++++-----
 dark.css             |  2 ++
 old_changes.html     |  5 +++++
 src/ember/channel.js | 52 ++++++++++++++++++++++----------------------
 src/ember/layout.js  | 31 +++++++++++---------------
 src/main.js          |  2 +-
 style.css            | 10 +++++++--
 7 files changed, 61 insertions(+), 52 deletions(-)

diff --git a/changelog.html b/changelog.html
index d0902cd8..9cc89822 100644
--- a/changelog.html
+++ b/changelog.html
@@ -1,3 +1,9 @@
+<div class="list-header">3.5.387 <time datetime="2016-11-30">(2016-11-30)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Removed: Mini Player. Twitch has its own feature for that now.</li>
+	<li>Fixed: Twitch's mini player didn't get along with FFZ's.</li>
+</ul>
+
 <div class="list-header">3.5.386 <time datetime="2016-11-30">(2016-11-30)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Support high-DPI images for custom moderator badges.</li>
@@ -54,10 +60,5 @@
 	<li>Fixed: Properly generate CSS for bits emoticons with every possible prefix.</li>
 </ul>
 
-<div class="list-header">3.5.376 <time datetime="2016-11-21">(2016-11-21)</time></div>
-<ul class="chat-menu-content menu-side-padding">
-	<li>Fixed: Cheers aren't working yet, but they also don't break chat completely.</li>
-</ul>
-
 <div class="list-header" id="ffz-old-news-button"><a href="#">View Older</a></div>
 <div id="ffz-old-news"></div>
\ No newline at end of file
diff --git a/dark.css b/dark.css
index bc8e0c5a..f6078bab 100644
--- a/dark.css
+++ b/dark.css
@@ -139,6 +139,8 @@ body.ffz-dark:not([data-page="teams#show"]),
 	background-color: rgba(16,16,16,0.3) !important;
 }
 
+.ffz-dark .player-placeholder { background: #000 }
+
 .ffz-dark div.title > span.over:hover,
 .ffz-dark div.title > span.real:hover,
 .ffz-dark #broadcast-meta .info .title:hover {
diff --git a/old_changes.html b/old_changes.html
index abf5f776..76ed6398 100644
--- a/old_changes.html
+++ b/old_changes.html
@@ -1,3 +1,8 @@
+<div class="list-header">3.5.376 <time datetime="2016-11-21">(2016-11-21)</time></div>
+<ul class="chat-menu-content menu-side-padding">
+	<li>Fixed: Cheers aren't working yet, but they also don't break chat completely.</li>
+</ul>
+
 <div class="list-header">3.5.375 <time datetime="2016-11-21">(2016-11-21)</time></div>
 <ul class="chat-menu-content menu-side-padding">
 	<li>Added: Option to disable subscriber loyalty badges in favor of displaying the lowest tier for all subscribers.</li>
diff --git a/src/ember/channel.js b/src/ember/channel.js
index 35ac9411..6b8ba041 100644
--- a/src/ember/channel.js
+++ b/src/ember/channel.js
@@ -183,6 +183,23 @@ FFZ.prototype.modify_channel_live = function(view) {
 			this.$().on("click", ".ffz-creative-tag-link", utils.transition_link(function(e) {
 				utils.transition('directory.creative.hashtag.index', this.getAttribute('data-tag'));
 			}));
+
+			var t = this;
+			this.$('.player-placeholder').on('click', function() { t.updatePlayerPosition() })
+
+			if ( this.updatePlayerPosition ) {
+				this._ffz_loaded = Date.now();
+				this._ffz_player_repositoner = setInterval(this.ffzUpdatePlayerPosition.bind(this), 250);
+			}
+		},
+
+		ffzUpdatePlayerPosition: function() {
+			if ( this._ffz_player_repositoner && Date.now() - this._ffz_loaded > 60000 ) {
+				clearInterval(this._ffz_player_repositoner);
+				this._ffz_player_repositoner = null;
+			}
+
+			this.updatePlayerPosition();
 		},
 
 		ffzUpdateAttributes: function() {
@@ -247,7 +264,11 @@ FFZ.prototype.modify_channel_live = function(view) {
 				this._fix_host_timer = null;
 			}
 
-			document.body.classList.remove('ffz-small-player');
+			if ( this._ffz_player_repositoner ) {
+				clearInterval(this._ffz_player_repositoner);
+				this._ffz_player_repositoner = null;
+			}
+
 			utils.update_css(f._channel_style, channel_id, null);
 		},
 
@@ -554,8 +575,6 @@ FFZ.prototype.modify_channel_redesign = function(view) {
 
 		handleScroll: function(top) {
 			this._super();
-			var height = this.channelCoverHeight + Layout.get('fullSizePlayerDimensions.height');
-			document.body.classList.toggle('ffz-small-player', f.settings.small_player && top >= (height * .8));
 		},
 
 		ffzUpdateCoverHeight: function() {
@@ -568,9 +587,12 @@ FFZ.prototype.modify_channel_redesign = function(view) {
 			this.channelCoverHeight = new_height;
 			this.$("#channel").toggleClass('ffz-bar-fixed', this.get('isFixed'));
 
-			if ( old_height !== new_height )
+			if ( this.$scrollContainer && old_height !== new_height )
 				this.scrollTo(this.$scrollContainer.scrollTop() + (new_height - old_height));
 
+			if ( this.updatePlayerPosition )
+				setTimeout(this.updatePlayerPosition.bind(this));
+
 		}.observes('isFixed')
 	})
 }
@@ -593,28 +615,6 @@ FFZ.settings_info.auto_theater = {
 	};
 
 
-FFZ.settings_info.small_player = {
-	type: "boolean",
-	value: false,
-	no_mobile: true,
-	no_bttv: true,
-
-	category: "Appearance",
-	name: "Mini-Player on Scroll",
-	help: "When you scroll down on the page, shrink the player and put it in the upper right corner so you can still watch.",
-
-	on_update: function(val) {
-		if ( ! val )
-			return document.body.classList.remove('ffz-small-player');
-
-		else if ( this._vodc )
-			this._vodc.ffzOnScroll();
-		else if ( this._cindex )
-			this._cindex.ffzOnScroll();
-	}
-}
-
-
 FFZ.settings_info.chatter_count = {
 	type: "boolean",
 	value: false,
diff --git a/src/ember/layout.js b/src/ember/layout.js
index 92de27e8..704cacb9 100644
--- a/src/ember/layout.js
+++ b/src/ember/layout.js
@@ -271,11 +271,9 @@ FFZ.prototype.setup_layout = function() {
 			var size = this.get('fullSizePlayerDimensions');
 
 			return '<style>' +
-				'.ffz-small-player:not(.ffz-bttv)[data-current-path^="user."] .app-main:not(.theatre) .js-player,' +
 				'.dynamic-player, .dynamic-player object, .dynamic-player video {' +
 					'width:' + size.width + 'px !important;' +
 					'height:' + size.height + 'px !important}' +
-				'.ffz-small-player:not(.ffz-bttv)[data-current-path^="user."] .app-main:not(.theatre) .js-player,' +
 				'.dynamic-target-player, .dynamic-target-player object, .dynamic-target-player video {' +
 					'width:' + size.width + 'px !important;' +
 					'height:' + size.targetHeight + 'px !important}' +
@@ -303,21 +301,10 @@ FFZ.prototype.setup_layout = function() {
 			var window_height = this.get('windowHeight'),
 				window_width = this.get('windowWidth'),
 				width = this.get('rightColumnWidth'),
-				out = 'body.ffz-small-player .js-player .dynamic-player {' +
-						'position: fixed;' +
-						'z-index: 9;' +
-						'box-shadow: 0 0 20px 0 black;';
-
-			if ( .25 * window_width >= .5 * window_height )
-				out += 'width: 25vw !important; height: 14.0625vw !important;';
-			else
-				out += 'width: 50vh !important; height: 28.125vh !important;';
+				out = '';
 
 			if ( ! f.has_bttv ) {
-				if ( this.get('isRightColumnClosed') )
-					out += 'top: 0; right: 0}';
-
-				else {
+				if ( ! this.get('isRightColumnClosed') ) {
 					if ( this.get('portraitMode') ) {
 						var size = this.get('fullSizePlayerDimensions'),
 							video_below = this.get('portraitVideoBelow'),
@@ -336,7 +323,14 @@ FFZ.prototype.setup_layout = function() {
 							theatre_video_bottom = window_height - (theatre_video_top + theatre_video_height),
 							theatre_chat_top = video_below ? 0 : theatre_video_height;
 
-						out += 'top: ' + video_top + 'px;right: 0}' +
+						out += '.player-mini {' +
+								'bottom: ' + (10 + video_bottom) + 'px}' +
+							'.ffz-channel-bar-bottom .player-mini {' +
+								'bottom: ' + (60 + video_bottom) + 'px}' +
+							'.ffz-channel-bar-bottom.ffz-minimal-channel-bar .player-mini {' +
+								'bottom: ' + (20 + video_bottom) + 'px}' +
+							'.ffz-sidebar-swap .player-mini {' +
+								'left: 10px !important}' +
 							'body[data-current-path^="user."] #left_col .warp { min-height: inherit }' +
 							'body[data-current-path^="user."] #left_col { overflow: hidden }' +
 							'body[data-current-path^="user."] #left_col .warp,' +
@@ -384,8 +378,8 @@ FFZ.prototype.setup_layout = function() {
 							'.ffz-theater-stats:not(.ffz-theatre-conversations):not(.ffz-top-conversations) .app-main.theatre .cn-metabar__more {' +
 								'bottom: ' + (theatre_video_bottom + 90) + 'px !important}';
 
-					}  else {
-						out += 'top: 0; right: ' + width + 'px}' +
+					} else {
+						out += '.ffz-sidebar-swap .player-mini{left:' + (width + 10) + 'px !important}' +
 							'#main_col.expandRight #right_close{left: none !important}' +
 							'#right_col{width:' + width + 'px}' +
 							'body:not(.ffz-sidebar-swap) #main_col:not(.expandRight){' +
@@ -447,5 +441,6 @@ FFZ.prototype.setup_layout = function() {
 	Ember.propertyDidChange(Layout, 'windowHeight');
 	Ember.propertyDidChange(Layout, 'ffzExtraHeight');
 	Ember.propertyDidChange(Layout, 'isTooSmallForRightColumn');
+	Ember.propertyDidChange(Layout, 'fullSizePlayerDimensions');
 	Layout.ffzUpdatePortraitCSS();
 }
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 37386ac1..308fc989 100644
--- a/src/main.js
+++ b/src/main.js
@@ -61,7 +61,7 @@ FFZ.channel_metadata = {};
 
 // Version
 var VER = FFZ.version_info = {
-	major: 3, minor: 5, revision: 386,
+	major: 3, minor: 5, revision: 387,
 	toString: function() {
 		return [VER.major, VER.minor, VER.revision].join(".") + (VER.extra || "");
 	}
diff --git a/style.css b/style.css
index 0a96ff2a..0a2471d6 100644
--- a/style.css
+++ b/style.css
@@ -3591,6 +3591,7 @@ body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 }
 .ffz-channel-title-top .cn-metabar__title {
 	position: absolute;
 	top: 5px;
+	z-index: 3;
 }
 
 .ffz-channel-title-top:not(.ffz-channel-bar-bottom):not(.ffz-minimal-channel-bar) #channel.ffz-bar-fixed .cn-metabar__title {
@@ -3602,8 +3603,7 @@ body.ffz-bttv #ffz-feed-tabs .tabs { margin-bottom: 0 }
 	transition: top ease-in-out 75ms, bottom ease-in-out 75ms;
 }
 
-body:not(.ffz-channel-bar-bottom).ffz-small-player .js-player .dynamic-player { margin-top: 50px }
-body:not(.ffz-channel-bar-bottom).ffz-small-player.ffz-minimal-channel-bar .js-player .dynamic-player { margin-top: 10px }
+.ffz-channel-bar-bottom .player-mini { bottom: 20px }
 
 .ffz-minimal-channel-bar .cn-bar-fixed:hover { top: 0 }
 .ffz-minimal-channel-bar.ffz-channel-bar-bottom .cn-bar-fixed { top: auto; bottom: -40px }
@@ -3839,4 +3839,10 @@ body.ffz-sidebar-swap .app-main.theatre #main_col:not(.expandRight) #player[data
 .ffz-pinned-cheer-expand-hover .pinned-cheers__message:hover .pinned-cheer__expando-arrow { transform: none }
 .ffz-pinned-cheer-expand-hover .pinned-cheers__message .pinned-cheer__expando-arrow {
 	transform: rotateX(180deg);
+}
+
+/* Player Mini Positioning Stuff */
+
+.ffz-sidebar-swap .expandRight .player-mini {
+	left: 10px !important;
 }
\ No newline at end of file