@oat-sa/tao-core-ui 3.22.0 → 3.24.0

package/src/mediaplayer/readme.md

@@ -24,6 +24,7 @@ require(['ui/mediaplayer'], function(mediaplayer) {
 - *Number* **volume** - Sets the sound volume (default: 80)
 - *Number* **width** - Sets the width of the player (default: depends on media type)
 - *Number* **height** - Sets the height of the player (default: depends on media type)
+- *String* **crossOriginMode** - CORS mode for cross-domain HTML5 sources: `anonymous` (default, bare `crossorigin`) or `use-credentials` (`crossorigin="use-credentials"`)
 - *Function* **onrender** - Event listener called when the player is rendering
 - *Function* **onready** - Event listener called when the player is fully ready
 - *Function* **onplay** - Event listener called when the playback is starting
@@ -33,6 +34,22 @@ require(['ui/mediaplayer'], function(mediaplayer) {
 - *Function* **onlimitreached** - Event listener called when the play limit has been reached
 - *Function* **ondestroy** - Event listener called when the player is destroying
 
+### Module configuration
+
+Set a default `crossOriginMode` for all player instances via RequireJS:
+
+```javascript
+require.config({
+    config: {
+        'ui/mediaplayer': {
+            crossOriginMode: 'use-credentials'
+        }
+    }
+});
+```
+
+Per-instance `crossOriginMode` overrides the module default.
+
 ### Events
 
 Some events are triggered both on the component using `eventifier` and on the DOM through the component wrapper.

package/src/mediaplayer/tpl/audio.tpl

@@ -1,4 +1,4 @@
-<audio class="media audio" preload="{{preload}}" controls {{#if cors}}crossorigin{{/if}}>
+<audio class="media audio" preload="{{preload}}" controls{{#if crossOriginUseCredentials}} crossorigin="use-credentials"{{else}}{{#if crossOrigin}} crossorigin{{/if}}{{/if}}>
     {{__ 'Your browser doesn’t support the audio player.'}}
 {{#if link}}
     <a href="{{link}}">{{__ 'Please download the track and listen offline.'}}</a>

package/src/mediaplayer/tpl/video.tpl

@@ -1,4 +1,4 @@
-<video class="media video" preload="{{preload}}" poster="{{poster}}" controls {{#if cors}}crossorigin{{/if}}>
+<video class="media video" preload="{{preload}}" poster="{{poster}}" controls{{#if crossOriginUseCredentials}} crossorigin="use-credentials"{{else}}{{#if crossOrigin}} crossorigin{{/if}}{{/if}}>
     {{__ 'Your browser doesn’t support the video player.'}}
 {{#if link}}
     <a href="{{link}}">{{__ 'Please download the video and view offline.'}}</a>

package/src/mediaplayer/utils/crossOrigin.js

@@ -0,0 +1,63 @@
+/**
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; under version 2
+ * of the License (non-upgradable).
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * Copyright (c) 2026 (original work) Open Assessment Technologies SA ;
+ */
+
+/** @typedef {'anonymous' | 'use-credentials'} CrossOriginMode */
+
+const VALID_CROSS_ORIGIN_MODES = new Set(['anonymous', 'use-credentials']);
+
+/**
+ * Normalises cross-origin mode from instance or RequireJS module config.
+ * @param {CrossOriginMode | string | undefined | null} instanceMode
+ * @param {CrossOriginMode | string | undefined | null} [moduleMode]
+ * @returns {CrossOriginMode}
+ */
+function resolveCrossOriginMode(instanceMode, moduleMode) {
+    let mode = instanceMode;
+
+    if (typeof mode === 'undefined' || mode === null) {
+        mode = moduleMode;
+    }
+    if (typeof mode === 'undefined' || mode === null) {
+        mode = 'anonymous';
+    }
+
+    return VALID_CROSS_ORIGIN_MODES.has(mode) ? /** @type {CrossOriginMode} */ (mode) : 'anonymous';
+}
+
+/**
+ * Resolves the crossorigin attribute for HTML5 media when sources are cross-domain.
+ * @param {Array<{ src?: string }>} sources
+ * @param {CrossOriginMode} crossOriginMode
+ * @param {{ sameDomain: (url: string) => boolean }} page
+ * @returns {CrossOriginMode | null} null when attribute should be omitted
+ */
+function resolveCrossOriginAttribute(sources, crossOriginMode, page) {
+    const isCrossDomain = sources.some(source => source && source.src && !page.sameDomain(source.src));
+
+    if (!isCrossDomain) {
+        return null;
+    }
+
+    return resolveCrossOriginMode(crossOriginMode);
+}
+
+export default {
+    VALID_CROSS_ORIGIN_MODES,
+    resolveCrossOriginMode,
+    resolveCrossOriginAttribute
+};

package/src/mediaplayer.js

@@ -27,9 +27,13 @@ import store from 'core/store';
 import support from 'ui/mediaplayer/support';
 import players from 'ui/mediaplayer/players';
 import playerTpl from 'ui/mediaplayer/tpl/player';
+import crossOriginUtil from 'ui/mediaplayer/utils/crossOrigin';
+import module from 'module';
 import 'ui/mediaplayer/css/player.css';
 import 'nouislider';
 
+const moduleConfig = module.config ? module.config() : {};
+
 /**
  * CSS namespace
  * @type {String}
@@ -212,6 +216,7 @@ const isResponsiveSize = sizeProps => {
  * @param {Number} [config.height] - Sets the height of the player (default: depends on media type)
  * @param {Boolean} [config.preview] - Enables the media preview (load media metadata)
  * @param {Boolean} [config.debug] - Enables the debug mode
+ * @param {'anonymous'|'use-credentials'} [config.crossOriginMode] - CORS credentials mode for cross-domain HTML5 sources (default: module config, then anonymous)
  * @param {number} [config.config.stalledDetectionDelay] - The delay before considering a media is stalled
  * @event render - Event triggered when the player is rendering
  * @event error - Event triggered when the player throws an unrecoverable error
@@ -239,6 +244,10 @@ function mediaplayerFactory(config) {
             // load the config set, discard null values in order to allow defaults to be set
             this.config = _.omitBy(mediaPlayerConfig || {}, value => typeof value === 'undefined' || value === null);
             _.defaults(this.config, defaults.options);
+            this.config.crossOriginMode = crossOriginUtil.resolveCrossOriginMode(
+                this.config.crossOriginMode,
+                moduleConfig.crossOriginMode
+            );
             if (!this.config.mimeType && 'string' === typeof this.config.type && this.config.type.indexOf('/') > 0) {
                 this.config.mimeType = this.config.type;
             }
@@ -882,6 +891,7 @@ function mediaplayerFactory(config) {
                         sources: this.getSources(),
                         preview: this.config.preview,
                         debug: this.config.debug,
+                        crossOriginMode: this.config.crossOriginMode,
                         stalledDetectionDelay: this.config.stalledDetectionDelay
                     };
                     this.player = playerFactory(this.$player, playerConfig)

package/src/previewer.js

@@ -227,7 +227,7 @@ const previewer = {
                     // stop video, free the socket and remove player interface on video deletion
                     // stop video and free the socket on all other cases when video is selected or temporary hidden or modal window is closed
                     $controls = $(
-                        '.actions a:nth-child(1), .actions a:nth-child(3), .icon-close, .upload-switcher, .select-action, .files li>span',
+                        '.actions a:nth-child(1), .actions a:nth-child(3), .icon-close, .upload-switcher, .select-action, .files-list tr, .files .desc',
                         '#mediaManager'
                     );
                     $controls.off('mousedown.mediaelement').on('mousedown.mediaelement', function(event) {