4.20.57

* Added: Setting to hide viewer counts from the side bar.
* Changed: Allow use of time formats when creating a timeout action. (Closes #978)
* Changed: Highlight My Message highlights can now be displayed in either Twitch style or FFZ style, in addition to disabling the highlight. FFZ Style remains the default. (Closes #972)
* Fixed: Current Channel profile rules not functioning, either on normal channel pages or on mod view pages. (Closes #957)
* Fixed: Current Category and Title profile rules not working on mod view.
* Fixed: Channel color not being detected correctly. (Also Closes #972)
* Fixed: Download Clip not displaying on clip pages. (Closes #960)
* Fixed: Remove debug logging from `resizeInput`
* Fixed: Popups, including channel rules, not rendering correctly in portrait mode. (Closes #979)
* Fixed: Rendering for certain elements using `tw-pill`
* Fixed: Vue balloon elements not rendering correctly.

src/modules/chat/actions/components/edit-timeout.vue

@@ -7,11 +7,11 @@
 
 			<input
 				id="edit_duration"
-				v-model.number="value.duration"
+				v-model="value.duration_rich"
 				:placeholder="defaults.duration"
 				class="tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
-				type="number"
-				@input="$emit('input', value)"
+				type="text"
+				@input="update()"
 			>
 		</div>
 
@@ -32,8 +32,48 @@
 
 <script>
 
+const DUR_MATCH = /(\d+)(mo|d|h|m|s)?/gi,
+	MULTIPLIERS = {
+		m: 60,
+		h: 3600,
+		d: 86400,
+		mo: 86400 * 28,
+		s: 1
+	};
+
+function durationToSeconds(dur) {
+	let seconds = 0;
+	let match;
+
+	while(match = DUR_MATCH.exec(dur)) { // eslint-disable-line no-cond-assign
+		const val = parseInt(match[1], 10),
+			unit = (match[2] || 's').toLowerCase(),
+			multiplier = MULTIPLIERS[unit] || 1;
+
+		if ( isNaN(val) )
+			return NaN;
+
+		seconds += val * multiplier;
+	}
+
+	return seconds;
+}
+
+
 export default {
-	props: ['value', 'defaults']
+	props: ['value', 'defaults'],
+
+	created() {
+		if ( this.value.duration_rich == null )
+			this.value.duration_rich = this.value.duration;
+	},
+
+	methods: {
+		update() {
+			this.value.duration = durationToSeconds(this.value.duration_rich);
+			this.$emit('input', this.value);
+		}
+	}
 }
 
 </script>

src/modules/chat/actions/types.jsx

@@ -1,6 +1,7 @@
 'use strict';
 
 import {createElement} from 'utilities/dom';
+import {durationForChat} from 'utilities/time';
 
 
 // ============================================================================

src/modules/metadata.jsx

@@ -12,7 +12,7 @@ import {duration_to_string, durationForURL} from 'utilities/time';
 import Tooltip from 'utilities/tooltip';
 import Module from 'utilities/module';
 
-const CLIP_URL = /^https:\/\/[^/]+\.twitch\.tv\/.+?\.mp4$/;
+const CLIP_URL = /^https:\/\/[^/]+\.(?:twitch\.tv|twitchcdn\.net)\/.+?\.mp4(?:\?.*)?$/;
 
 export default class Metadata extends Module {
 	constructor(...args) {
@@ -265,6 +265,9 @@ export default class Metadata extends Module {
 				if ( ! src || ! CLIP_URL.test(src) )
 					return;
 
+				if ( this.settings.get('metadata.clip-download.force') )
+					return src;
+
 				const user = this.resolve('site').getUser?.(),
 					is_self = user?.id == data.channel.id;