MediaWiki:Common.js: Difference between revisions

← Older edit Newer edit →

@@ Line 546: / Line 546: @@
 		});
-		var $cards = $('.mw-parser-output .yt-interview[data-youtube-id]');
+		function interviewCardRef($el) {
+			var yt = String($el.attr('data-youtube-id') || '');
+			if (yt) {
+				return { key: 'yt:' + yt, href: '#yt-' + yt };
+			}
+			var sc = String($el.attr('data-soundcloud-track') || '');
+			if (sc) {
+				return { key: 'sc:' + sc, href: '#sc-' + sc };
+			}
+			return null;
+		}
+		var $cards = $('.mw-parser-output .yt-interview').filter(function () {
+			return interviewCardRef($(this)) !== null;
+		});
 		$cards.each(function (idx) {
 			var $card = $(this);
@@ Line 558: / Line 572: @@
 			}
 			var mine = splitSoldiers($card.attr('data-soldiers'));
+			var selfRef = interviewCardRef($card);
 			var picks = [];
 			var seen = {};
 			function addCard($other, why) {
-				var oid = String($other.attr('data-youtube-id') || '');
+				var ref = interviewCardRef($other);
-				if (!oid || seen[oid] || oid === $card.attr('data-youtube-id')) {
+				if (!ref || !selfRef || seen[ref.key] || ref.key === selfRef.key) {
 					return;
 				}
-				seen[oid] = 1;
+				seen[ref.key] = 1;
 				picks.push({
-					id: oid,
+					href: ref.href,
 					heading: String($other.attr('data-heading') || $other.find('h3, h2').first().text() || 'Interview'),
 					short: String($other.attr('data-short') || ''),
@@ Line 593: / Line 608: @@
 			picks.slice(0, 3).forEach(function (item) {
 				var label = item.short ? (item.heading + ' — ' + item.short) : item.heading;
-				var $a = $('<a></a>').attr('href', '#yt-' + item.id).text(label);
+				var $a = $('<a></a>').attr('href', item.href).text(label);
 				var $li = $('<li></li>').append($a);
 				if (item.why === 'same soldier') {
@@ Line 603: / Line 618: @@
 				.append($('<div class="yt-interview-next-label"></div>').text('Watch next'))
 				.append($list);
+		});
+	}());
+	(function buildSoundCloudEmbeds() {
+		var SC_TRACK = /^[0-9]{6,12}$/;
+		function playSoundCloud($slot, trackId, title) {
+			var src = 'https://w.soundcloud.com/player/?url=' +
+				encodeURIComponent('https://api.soundcloud.com/tracks/' + trackId) +
+				'&color=%23ff5500&auto_play=true&hide_related=true&show_comments=false' +
+				'&show_user=true&show_reposts=false&show_teaser=false&visual=true';
+			var $iframe = $('<iframe class="sc-embed-frame" scrolling="no" frameborder="no" allow="autoplay"></iframe>')
+				.attr({
+					src: src,
+					title: title || 'SoundCloud audio',
+					loading: 'lazy'
+				});
+			$slot.empty().append($iframe).addClass('sc-embed-playing');
+		}
+		$('.mw-parser-output .sc-embed[data-soundcloud-track]').each(function () {
+			var $slot = $(this);
+			if ($slot.data('rbScEmbed')) {
+				return;
+			}
+			var trackId = String($slot.attr('data-soundcloud-track') || '');
+			if (!SC_TRACK.test(trackId)) {
+				return;
+			}
+			$slot.data('rbScEmbed', 1);
+			var title = String($slot.attr('data-title') || 'SoundCloud audio');
+			var $fallback = $slot.find('.sc-embed-fallback').first();
+			var $btn = $('<button type="button" class="sc-embed-play"></button>')
+				.attr('aria-label', 'Play ' + title)
+				.append($('<span class="sc-embed-play-icon" aria-hidden="true"></span>'))
+				.append($('<span class="sc-embed-play-text"></span>').text('Play audio'));
+			var $poster = $('<div class="sc-embed-poster"></div>').append($btn);
+			if ($fallback.length) {
+				$fallback.before($poster);
+				$fallback.hide();
+			} else {
+				$slot.prepend($poster);
+			}
+			$poster.on('click', function (ev) {
+				ev.preventDefault();
+				playSoundCloud($slot, trackId, title);
+			});
 		});
 	}());