MOBILE-5072 external-content: Support picture element and srcset attr

Author: crazyserver

src/core/directives/external-content.ts

@@ -157,10 +157,24 @@ export class CoreExternalContentDirective implements AfterViewInit, OnChanges, O
             targetAttr = 'src';
             url = this.url ?? this.src ?? ''; // eslint-disable-line @typescript-eslint/no-deprecated
 
+            await this.handleSrcset(this.siteId);
+
         } else if (tagName === 'AUDIO' || tagName === 'VIDEO' || tagName === 'SOURCE' || tagName === 'TRACK') {
             targetAttr = 'src';
             url = this.url ?? this.src ?? ''; // eslint-disable-line @typescript-eslint/no-deprecated
 
+            if (tagName === 'SOURCE') {
+                await this.handleSrcset(this.siteId);
+
+                // For elements that only use srcset, url can be empty.
+                // Resolve early when tagName === 'SOURCE' and there is no src URL.
+                if (!url) {
+                    this.onReadyPromise.resolve();
+
+                    return;
+                }
+            }
+
             if (tagName === 'VIDEO' && this.posterUrl) {
                 // Handle poster.
 
@@ -201,28 +215,19 @@ export class CoreExternalContentDirective implements AfterViewInit, OnChanges, O
         }
 
         const site = await CorePromiseUtils.ignoreErrors(CoreSites.getSite(this.siteId));
-        const isSiteFile = site?.isSitePluginFileUrl(url);
-
-        // Try to convert the URL to absolute. This will only work for URLs relative to the site URL, it won't work for
-        // URLs relative to a subpath (e.g. relative to the course page URL).
-        url = site && url ? CoreUrl.toAbsoluteURL(site.getURL(), url) : url;
-
-        if (!url || !url.match(/^https?:\/\//i) || CoreUrl.isLocalFileUrl(url) ||
-                (tagName === 'A' && !(isSiteFile || site?.isSiteThemeImageUrl(url) || CoreUrl.isGravatarUrl(url)))) {
-
-            this.logger.debug(`Ignoring non-downloadable URL: ${url}`);
-
-            throw new CoreError('Non-downloadable URL');
-        }
 
-        if (site && !site.canDownloadFiles() && isSiteFile) {
-            this.element.parentElement?.removeChild(this.element); // Remove element since it'll be broken.
+        let finalUrl: string;
+        try {
+            finalUrl = await this.getFinalUrl(url, tagName, targetAttr, site);
+        } catch (error) {
+            if (error instanceof CannotDownloadError) {
+                // Remove element since it'll be broken.
+                this.element.parentElement?.removeChild(this.element);
+            }
 
-            throw new CoreError(Translate.instant('core.cannotdownloadfiles'));
+            throw error;
         }
 
-        const finalUrl = await this.getUrlToUse(targetAttr, url, site);
-
         this.logger.debug(`Using URL ${finalUrl} for ${url}`);
 
         this.setElementUrl(targetAttr, finalUrl);
@@ -276,6 +281,93 @@ export class CoreExternalContentDirective implements AfterViewInit, OnChanges, O
         }
     }
 
+    /**
+     * Handle srcset attribute, replacing each URL with the local/downloaded version.
+     *
+     * @param siteId Site ID.
+     * @returns Promise resolved when done.
+     */
+    protected async handleSrcset(siteId?: string): Promise<void> {
+        const srcset = this.element.getAttribute('data-original-srcset') ?? this.element.getAttribute('srcset');
+        if (!srcset) {
+            return;
+        }
+
+        if (!this.element.hasAttribute('data-original-srcset')) {
+            this.element.setAttribute('data-original-srcset', srcset);
+        }
+
+        const site = await CorePromiseUtils.ignoreErrors(CoreSites.getSite(siteId));
+
+        // Parse srcset: comma-separated list of "url [descriptor]" pairs.
+        const parts = srcset.split(',').map(part => part.trim()).filter(part => part.length > 0);
+
+        const promises = parts.map(async (part) => {
+            const tokens = part.split(/\s+/);
+            const url = tokens[0];
+            const descriptor = tokens.slice(1).join(' ');
+
+            if (!url) {
+                return part;
+            }
+
+            let finalUrl: string;
+            try {
+                finalUrl = await this.getFinalUrl(url, this.element.tagName, 'srcset', site);
+
+                this.logger.debug(`Using URL ${finalUrl} for ${url} in srcset`);
+
+                return descriptor ? `${finalUrl} ${descriptor}` : finalUrl;
+            } catch (error) {
+                if (error instanceof CannotDownloadError) {
+                    // URL might be broken.
+                    return '';
+                }
+
+                return part;
+            }
+        });
+
+        try {
+            const newParts = await Promise.all(promises);
+            this.element.setAttribute('srcset', newParts.filter(part => part.length > 0).join(', '));
+        } catch {
+            this.logger.error('Error treating srcset.', this.element);
+        }
+    }
+
+    /**
+     * Get the final URL to use in the element, checking if it's valid and can be downloaded.
+     *
+     * @param url URL to treat.
+     * @param tagName Name of the tag using the URL.
+     * @param targetAttr Attribute using the URL.
+     * @param site Site.
+     * @returns Promise resolved with the URL to use in the element.
+     *  If the URL is not valid or can't be downloaded, the promise will be rejected.
+     */
+    protected async getFinalUrl(url: string, tagName: string, targetAttr: string, site?: CoreSite): Promise<string> {
+        const isSiteFile = site?.isSitePluginFileUrl(url);
+
+        // Try to convert the URL to absolute. This will only work for URLs relative to the site URL, it won't work for
+        // URLs relative to a subpath (e.g. relative to the course page URL).
+        url = site && url ? CoreUrl.toAbsoluteURL(site.getURL(), url) : url;
+
+        if (!url || !url.match(/^https?:\/\//i) || CoreUrl.isLocalFileUrl(url) ||
+                (tagName === 'A' && !(isSiteFile || site?.isSiteThemeImageUrl(url) || CoreUrl.isGravatarUrl(url)))) {
+
+            this.logger.debug(`Ignoring non-downloadable URL: ${url}`);
+
+            throw new CoreError('Non-downloadable URL');
+        }
+
+        if (site && !site.canDownloadFiles() && isSiteFile) {
+            throw new CannotDownloadError(Translate.instant('core.cannotdownloadfiles'));
+        }
+
+        return await this.getUrlToUse(targetAttr, url, site);
+    }
+
     /**
      * Handle inline styles, trying to download referenced files.
      *
@@ -587,3 +679,5 @@ export class CoreExternalContentDirective implements AfterViewInit, OnChanges, O
     }
 
 }
+
+class CannotDownloadError extends CoreError {};

src/core/directives/format-text.ts

@@ -364,6 +364,7 @@ export class CoreFormatTextDirective implements OnDestroy, AsyncDirective {
 
     /**
      * Wrap an image with a container to adapt its width.
+     * If the image is inside a picture element, the picture element is wrapped instead.
      *
      * @param img Image to adapt.
      */
@@ -372,6 +373,11 @@ export class CoreFormatTextDirective implements OnDestroy, AsyncDirective {
             return;
         }
 
+        // If the image is inside a picture element, wrap the picture element instead.
+        const elementToWrap = img.parentElement?.tagName === 'PICTURE'
+            ? img.parentElement
+            : img;
+
         // Element to wrap the image.
         const container = document.createElement('span');
         const originalWidth = img.attributes.getNamedItem('width');
@@ -399,22 +405,25 @@ export class CoreFormatTextDirective implements OnDestroy, AsyncDirective {
             container.classList.add('atto_image_button_text-bottom');
         }
 
-        CoreDom.wrapElement(img, container);
+        CoreDom.wrapElement(elementToWrap, container);
     }
 
     /**
      * Add image viewer button to view adapted images at full size.
      */
     protected async addImageViewerButton(): Promise<void> {
-        const imgs = Array.from(this.element.querySelectorAll('.core-adapted-img-container > img'));
+        const imgs = Array.from(
+            this.element.querySelectorAll<HTMLImageElement>(
+                '.core-adapted-img-container > img, .core-adapted-img-container > picture > img',
+            ),
+        );
         if (!imgs.length) {
             return;
         }
 
         // If cannot calculate element's width, use viewport width to avoid false adapt image icons appearing.
         const elWidth = await this.getElementWidth();
-
-        imgs.forEach((img: HTMLImageElement) => {
+        imgs.forEach((img) => {
             // Skip image if it's inside a link.
             if (img.closest('a')) {
                 return;
@@ -701,6 +710,7 @@ export class CoreFormatTextDirective implements OnDestroy, AsyncDirective {
         const site = await this.getSite();
 
         const images = Array.from(div.querySelectorAll('img'));
+        const pictures = Array.from(div.querySelectorAll('picture'));
         const anchors = Array.from(div.querySelectorAll('a'));
         const audios = Array.from(div.querySelectorAll('audio'));
         const videos = Array.from(div.querySelectorAll('video'));
@@ -735,12 +745,22 @@ export class CoreFormatTextDirective implements OnDestroy, AsyncDirective {
             this.addExternalContent(anchor);
         });
 
+        const siteId = this.getSiteId();
         const externalImages: CoreExternalContentDirective[] = [];
         if (images && images.length > 0) {
             // Walk through the content to find images, and add our directive.
-            images.forEach((img: HTMLElement) => {
+            images.forEach((img) => {
                 this.addMediaAdaptClass(img);
 
+                if (siteId) {
+                    // Avoid WebView starting network requests before external-content can rewrite URLs.
+                    const srcset = img.getAttribute('srcset');
+                    if (srcset) {
+                        img.setAttribute('data-original-srcset', srcset);
+                        img.removeAttribute('srcset');
+                    }
+                }
+
                 const externalImage = this.addExternalContent(img);
                 if (externalImage && !externalImage.invalid) {
                     externalImages.push(externalImage);
@@ -752,6 +772,22 @@ export class CoreFormatTextDirective implements OnDestroy, AsyncDirective {
             });
         }
 
+        pictures.forEach(picture => {
+            const sources = Array.from(picture.querySelectorAll('source'));
+
+            sources.forEach((source) => {
+                if (siteId) {
+                    // Avoid WebView starting network requests before external-content can rewrite URLs.
+                    const srcset = source.getAttribute('srcset');
+                    if (srcset) {
+                        source.setAttribute('data-original-srcset', srcset);
+                        source.removeAttribute('srcset');
+                    }
+                }
+                this.addExternalContent(source);
+            });
+        });
+
         const audioControllers = audios.map(audio => {
             this.treatMedia(audio);