ui/routes: re-implement multi language filtering

Once again supported by the Twitch API

src/app/data/models/settings/model.js

@@ -32,17 +32,11 @@ export default Model.extend({
 			writable: true,
 			value: false
 		});
-		Object.defineProperty( this, "hasSingleStreamsLanguagesSelection", {
-			enumerable: false,
-			writable: true,
-			value: false
-		});
 
 		const update = () => {
 			const data = this.streams.languages.toJSON();
 			const num = Object.values( data ).filter( Boolean ).length;
 			set( this, "hasAnyStreamsLanguagesSelection", num > 0 );
-			set( this, "hasSingleStreamsLanguagesSelection", num === 1 );
 		};
 
 		addListener( this, "ready", update );

src/app/data/models/settings/streams/fragment.js

@@ -7,6 +7,9 @@ export const ATTR_STREAMS_NAME_CUSTOM = 1;
 export const ATTR_STREAMS_NAME_ORIGINAL = 2;
 export const ATTR_STREAMS_NAME_BOTH = ATTR_STREAMS_NAME_CUSTOM | ATTR_STREAMS_NAME_ORIGINAL;
 
+export const ATTR_STREAMS_LANGUAGES_FADE = 0;
+export const ATTR_STREAMS_LANGUAGES_FILTER = 1;
+
 export const ATTR_STREAMS_INFO_GAME = 0;
 export const ATTR_STREAMS_INFO_TITLE = 1;
 
@@ -33,8 +36,7 @@ export default Fragment.extend({
 	filter_vodcast: attr( "boolean", { defaultValue: true } ),
 	vodcast_regexp: attr( "string", { defaultValue: "" } ),
 
-	languages_fade: attr( "boolean", { defaultValue: false } ),
-	languages_filter: attr( "boolean", { defaultValue: false } ),
+	languages_filter: attr( "number", { defaultValue: ATTR_STREAMS_LANGUAGES_FADE } ),
 	languages: fragment( "settingsStreamsLanguages", { defaultValue: {} } ),
 
 	show_flag: attr( "boolean", { defaultValue: false } ),
@@ -53,6 +55,11 @@ export default Fragment.extend({
 		{ id: ATTR_STREAMS_NAME_ORIGINAL, label: "original" }
 	],
 
+	languagesFilter: [
+		{ id: ATTR_STREAMS_LANGUAGES_FADE, label: "fade" },
+		{ id: ATTR_STREAMS_LANGUAGES_FILTER, label: "filter" }
+	],
+
 	info: [
 		{ id: ATTR_STREAMS_INFO_GAME, label: "game" },
 		{ id: ATTR_STREAMS_INFO_TITLE, label: "title" }

src/app/init/initializers/localstorage/settings.js

@@ -1,5 +1,9 @@
 import { langs as langsConfig } from "config";
 import { moveAttributes, moveAttributesIntoFragment, qualityIdToName } from "./utils";
+import {
+	ATTR_STREAMS_LANGUAGES_FADE,
+	ATTR_STREAMS_LANGUAGES_FILTER
+} from "data/models/settings/streams/fragment";
 import { typeKey as streamingPlayerTypeKey } from "data/models/settings/streaming/player/fragment";
 import { qualities } from "data/models/stream/model";
 import { isWin7 } from "utils/node/platform";
@@ -189,12 +193,20 @@ function fixAttributes( settings ) {
 
 	// update old language filter
 	if ( hasOwnProperty.call( streams, "filter_languages" ) ) {
-		const value = streams.filter_languages;
-		// can't translate null or false value here due to lack of schema version
-		streams.languages_fade = value === 1;
-		streams.languages_filter = value === 2 || value === true;
+		streams.languages_filter = (
+			   streams.filter_languages === 2
+			|| streams.filter_languages === true
+		)
+			? ATTR_STREAMS_LANGUAGES_FILTER
+			: ATTR_STREAMS_LANGUAGES_FADE;
 		delete streams.filter_languages;
+	} else if ( hasOwnProperty.call( streams, "languages_fade" ) ) {
+		streams.languages_filter = streams.languages_filter
+			? ATTR_STREAMS_LANGUAGES_FILTER
+			: ATTR_STREAMS_LANGUAGES_FADE;
+		delete streams.languages_fade;
 	}
+
 	// find single language selection and update the new old languages object
 	if ( hasOwnProperty.call( streams, "language" ) ) {
 		const language = streams.language;

src/app/locales/de/settings.yml

@@ -421,14 +421,10 @@ languages:
         values:
             fade:
                 text: Streams ausblenden
-                description: |
-                    Zeige alle Streams, blende nicht passende aus.<br>
-                    Benötigt mindestens eine Auswahl und Ausfiltern muss deaktiviert sein.
+                description: Zeige alle Streams, blende nicht passende aus.
             filter:
                 text: Streams ausfiltern
-                description: |
-                    Nur Streams anzeigen, die der Sprachauswahl entsprechen.<br>
-                    Benötigt exakt eine Auswahl und hat Vorrang vor dem Ausblenden.
+                description: Nur Streams anzeigen, die der Sprachauswahl entsprechen.
     languages:
         title: Sprachen
         description: Broadcaster-Sprache oder, falls nicht verfügbar, die Kanalsprache.

src/app/locales/en/settings.yml

@@ -421,14 +421,10 @@ languages:
         values:
             fade:
                 text: Fade out streams
-                description: |
-                    Show all streams, fade out ones not matching the language selection.<br>
-                    Requires at least one selection and filtering needs to be disabled.
+                description: Show all streams, fade out ones not matching the language selection.
             filter:
                 text: Filter out streams
-                description: |
-                    Only show streams matching the language selection.<br>
-                    Requires exactly one selection and takes precedence over fading.
+                description: Only show streams matching the language selection.
     languages:
         title: Languages
         description: Broadcaster language, or if not set, the channel language.

src/app/locales/es/settings.yml

@@ -421,14 +421,10 @@ languages:
         values:
             fade:
                 text: Difuminar streams
-                description: |
-                    Muestra todos las streams, difumina las que no coinciden con la selección de idioma.<br>
-                    Requiere al menos una selección y el filtrado debe estar deshabilitado.
+                description: Muestra todos las streams, difumina las que no coinciden con la selección de idioma.
             filter:
                 text: Filtrar streams
-                description: |
-                    Mostrar solo los streams que coincidan con la selección de idioma.<br>
-                    Requiere exactamente una selección y tiene prioridad sobre el difuminado.
+                description: Mostrar solo los streams que coincidan con la selección de idioma.
     languages:
         title: Idiomas
         description: Idioma de del emisor,o si no está configurado, el idioma del canal.

src/app/locales/fr/settings.yml

@@ -422,15 +422,11 @@ languages:
             fade:
                 text: Griser les streams
                 # FIXME
-                description: |
-                    Afficher tous les streams, griser ceux qui ne correspondent pas au filtre de langage.<br>
-                    Nécessite au moins une sélection et l'option "Cacher les streams" doit être désactivée.
+                description: Afficher tous les streams, griser ceux qui ne correspondent pas au filtre de langage.
             filter:
                 text: Cacher les streams
                 # FIXME
-                description: |
-                    N'afficher que les streams qui correspondent au filtre de langage.<br>
-                    Nécessite au moins une sélection et a la priorité sur "Griser les streams".
+                description: N'afficher que les streams qui correspondent au filtre de langage.
     languages:
         title: Langages
         description: Langue du streamer, ou si non-défini, la langue de la chaîne.

src/app/locales/it/settings.yml

@@ -421,14 +421,10 @@ languages:
         values:
             fade:
                 text: Dissolvenza flussi
-                description: |
-                    Mostra tutti i flussi, sfuma quelli che non corrispondono alla selezione della lingua.<br>
-                    Richiede almeno una selezione e il filtro deve essere disabilitato.
+                description: Mostra tutti i flussi, sfuma quelli che non corrispondono alla selezione della lingua.
             filter:
                 text: Filtra gli stream
-                description: |
-                    Mostra solo gli stream corrispondenti alla lingua selezionata.<br>
-                    Richiede esattamente una selezione e ha la precedenza sulla dissolvenza.
+                description: Mostra solo gli stream corrispondenti alla lingua selezionata.
     languages:
         title: Lingue
         description: Lingua dell'emittente o, se non impostata, la lingua del canale.

src/app/locales/pt-br/settings.yml

@@ -427,15 +427,11 @@ languages:
             fade:
                 text: Esconder transmissões
                 # FIXME
-                description: |
-                    Mostrar todas as transmissões e esconder aquelas que não condizem com o idioma selecionado.<br>
-                    Requires at least one selection and filtering needs to be disabled.
+                description: Mostrar todas as transmissões e esconder aquelas que não condizem com o idioma selecionado.
             filter:
                 text: Mostrar transmissões
                 # FIXME
-                description: |
-                    Mostrar somente as transmissões que condizem com o idioma selecionado.<br>
-                    Requires exactly one selection and takes precedence over fading.
+                description: Mostrar somente as transmissões que condizem com o idioma selecionado.
     languages:
         title: Idiomas
         description: Idioma de transmissão, ou se não estiver definido, o idioma do canal.

src/app/locales/ru/settings.yml

@@ -418,15 +418,11 @@ languages:
             fade:
                 text: "Затемнять стримы"
                 # FIXME
-                description: |
-                    Показать все стримы, затемнять те, которые не соответствуют выбранному языку.<br>
-                    Requires at least one selection and filtering needs to be disabled.
+                description: Показать все стримы, затемнять те, которые не соответствуют выбранному языку.
             filter:
                 text: "Отфильтровывать стримы"
                 # FIXME
-                description: |
-                    Показывать только стримы, соответствующие выбранному языку.<br>
-                    Requires exactly one selection and takes precedence over fading.
+                description: Показывать только стримы, соответствующие выбранному языку.
     languages:
         title: "Языки"
         description: "Язык стримера. Если не установлен, то язык канала."

src/app/locales/zh-tw/settings.yml

@@ -421,14 +421,10 @@ languages:
         values:
             fade:
                 text: 淡出實況
-                description: |
-                    顯示所有實況，不符合設定語系的實況淡出顯示<br>
-                    至少要選擇一項且需停用過濾器
+                description: 顯示所有實況，不符合設定語系的實況淡出顯示
             filter:
                 text: 過濾顯示實況頻道
-                description: |
-                    只顯示所選語言的頻道<br>
-                    只選一個選項，並優先於淡出設定
+                description: 只顯示所選語言的頻道
     languages:
         title: 語言
         description: 實況主語言，若未設定，則為頻道語言

src/app/ui/components/list/stream-item/component.js

@@ -4,6 +4,7 @@ import { on } from "@ember/object/evented";
 import { cancel, later } from "@ember/runloop";
 import ListItemComponent from "../-list-item/component";
 import {
+	ATTR_STREAMS_LANGUAGES_FADE,
 	ATTR_STREAMS_INFO_GAME,
 	ATTR_STREAMS_INFO_TITLE
 } from "data/models/settings/streams/fragment";
@@ -45,16 +46,13 @@ export default ListItemComponent.extend({
 	fadedVodcast: and( "content.isVodcast", "settings.content.streams.filter_vodcast" ),
 
 	fading_enabled: computed(
-		"settings.content.streams.languages_fade",
 		"settings.content.streams.languages_filter",
 		"settings.content.hasAnyStreamsLanguagesSelection",
-		"settings.content.hasSingleStreamsLanguagesSelection",
 		function() {
 			const settings = this.settings.content;
-			const { languages_fade, languages_filter } = settings.streams;
 
-			return languages_fade && settings.hasAnyStreamsLanguagesSelection
-				&& !( languages_filter && settings.hasSingleStreamsLanguagesSelection );
+			return settings.streams.languages_filter === ATTR_STREAMS_LANGUAGES_FADE
+			    && settings.hasAnyStreamsLanguagesSelection;
 		}
 	),
 

src/app/ui/routes/-mixins/routes/filter-languages.js

@@ -1,37 +1,36 @@
 import { computed } from "@ember/object";
 import Mixin from "@ember/object/mixin";
 import { inject as service } from "@ember/service";
+import { ATTR_STREAMS_LANGUAGES_FILTER } from "data/models/settings/streams/fragment";
 
 
 export default Mixin.create({
 	/** @type {SettingsService} */
 	settings: service(),
 
 	language: computed(
-		"settings.content.hasSingleStreamsLanguagesSelection",
 		"settings.content.streams.languages_filter",
 		"settings.content.streams.languages",
 		function() {
-			const settings = this.settings.content;
-			const { languages_filter, languages } = settings.streams;
+			const { languages_filter, languages } = this.settings.content.streams;
 
-			if ( languages_filter && settings.hasSingleStreamsLanguagesSelection ) {
-				for ( const [ key, value ] of Object.entries( languages.toJSON() ) ) {
-					if ( value ) {
-						return key;
-					}
-				}
-			}
-
-			return undefined;
+			return languages_filter !== ATTR_STREAMS_LANGUAGES_FILTER
+				? []
+				: Object.entries( languages.toJSON() )
+					.filter( ([ , value ]) => value )
+					.map( ([ key ]) => key );
 		}
 	),
 
-	model( params ) {
+	model( params, ...args ) {
 		const { language } = this;
+		if ( language.length ) {
+			params = Object.assign(
+				params || /* istanbul ignore next */ {},
+				{ language }
+			);
+		}
 
-		return this._super(
-			Object.assign( params || /* istanbul ignore next */ {}, { language } )
-		);
+		return this._super( params, ...args );
 	}
 });

src/app/ui/routes/settings/languages/controller.js

@@ -1,11 +1,18 @@
 import Controller from "@ember/controller";
 import { get, setProperties, computed } from "@ember/object";
 import { langs as langsConfig } from "config";
+import { default as SettingsStreams } from "data/models/settings/streams/fragment";
+
+
+const {
+	languagesFilter: contentLanguagesFilter
+} = SettingsStreams;
 
 
 export default Controller.extend({
+	contentLanguagesFilter,
+
 	hasAnySelection: false,
-	hasSingleSelection: false,
 
 	languages: computed(function() {
 		return Object.entries( langsConfig )

src/app/ui/routes/settings/languages/route.js

@@ -16,8 +16,7 @@ export default SettingsSubmenuRoute.extend({
 			const data = buffer.getContent();
 			const num = Object.values( data ).filter( Boolean ).length;
 			setProperties( controller, {
-				hasAnySelection: num > 0,
-				hasSingleSelection: num === 1
+				hasAnySelection: num > 0
 			});
 		};
 

src/app/ui/routes/settings/languages/template.hbs

@@ -4,21 +4,17 @@
 	(t "settings.languages.filter.description")
 	icon="fa-filter"
 }}
-	{{check-box
-		checked=model.streams.languages_fade
-		label=(t "settings.languages.filter.values.fade.text")
-		description=(t "settings.languages.filter.values.fade.description" htmlSafe=true)
-		disabled=(bool-or
-			(bool-not hasAnySelection)
-			(bool-and model.streams.languages_filter hasSingleSelection)
-		)
-	}}
-	{{check-box
-		checked=model.streams.languages_filter
-		label=(t "settings.languages.filter.values.filter.text")
-		description=(t "settings.languages.filter.values.filter.description" htmlSafe=true)
-		disabled=(bool-not hasSingleSelection)
+	{{#radio-buttons
+		value=model.streams.languages_filter
+		content=contentLanguagesFilter
+		as |item|
 	}}
+		{{item.button
+			label=(t (concat "settings.languages.filter.values." item.label ".text"))
+			description=(t (concat "settings.languages.filter.values." item.label ".description"))
+			disabled=(bool-not hasAnySelection)
+		}}
+	{{/radio-buttons}}
 {{/settings-row}}
 
 {{#settings-row

src/test/tests/data/models/settings/model.js

@@ -87,17 +87,13 @@ module( "data/models/settings", function( hooks ) {
 		});
 
 		assert.ok( settings.hasAnyStreamsLanguagesSelection, "Has a language selection" );
-		assert.ok( settings.hasSingleStreamsLanguagesSelection, "Has a single language selection" );
 
-		set( settings, "streams.languages.de", true );
-		settings.trigger( "didUpdate" );
-		assert.ok( settings.hasAnyStreamsLanguagesSelection, "Has a language selection" );
-		assert.notOk( settings.hasSingleStreamsLanguagesSelection, "Has two language selections" );
-
-		set( settings, "streams.languages.de", false );
 		set( settings, "streams.languages.en", false );
 		settings.trigger( "didUpdate" );
 		assert.notOk( settings.hasAnyStreamsLanguagesSelection, "Has no language selections" );
-		assert.notOk( settings.hasSingleStreamsLanguagesSelection, "Has no language selections" );
+
+		set( settings, "streams.languages.de", true );
+		settings.trigger( "didUpdate" );
+		assert.ok( settings.hasAnyStreamsLanguagesSelection, "Has a language selection" );
 	});
 });