wikimedia/mediawiki-extensions-MultimediaViewer
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer synced 2024-11-23 15:56:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add loading bar while loading mmv module

Browse source 
When opening the media viewer, we immediately display a black frame,
as we wait for the dependencies etc to load.

Add a codex indeterminate progress bar to this phase as we wait, so
the user has feedback that something is happening.

Bug: T77230
Change-Id: Ibba98150ac2e8034fbfcd586309632704cf0b606
This commit is contained in:
Derk-Jan Hartman 2024-05-20 21:42:02 +02:00 committed by Jdlrobson
parent 82e36ddc61
commit c1a38cfe9e
5 changed files with 35 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
extension.json
View file

@ -207,6 +207,7 @@
"codexComponents": [
"CdxButton",
"CdxDialog",
"CdxProgressBar",
"CdxSelect",
"CdxTabs",
"CdxTextInput"
@ -301,6 +302,7 @@
"mmv.head"
],
"messages": [
"multimediaviewer-loading",
"multimediaviewer-view-expanded",
"multimediaviewer-view-config",
"multimediaviewer-disable-info-title",

3
i18n/en.json
View file

@ -154,5 +154,6 @@
"multimediaviewer-enable-alert": "Media Viewer is now disabled",
"multimediaviewer-disable-info-title": "You have disabled Media Viewer",
"multimediaviewer-disable-info": "You can still view individual files with Media Viewer.",
"multimediaviewer-errorreport-privacywarning": "Details of the error are attached to the report, which will be publicly viewable. If you are not comfortable with that, you can edit the report below and remove all the data you don't want to share."
"multimediaviewer-errorreport-privacywarning": "Details of the error are attached to the report, which will be publicly viewable. If you are not comfortable with that, you can edit the report below and remove all the data you don't want to share.",
"multimediaviewer-loading": "Loading Media Viewer."
}

3
i18n/qqq.json
View file

@ -167,5 +167,6 @@
"multimediaviewer-enable-alert": "Text shown in the enable panel to alert the user that the media viewer is currently disabled.",
"multimediaviewer-disable-info-title": "Used as title for {{msg-mw|Multimediaviewer-disable-info}}.",
"multimediaviewer-disable-info": "The title for this message is {{msg-mw|Multimediaviewer-disable-info-title}}.",
"multimediaviewer-errorreport-privacywarning": "A warning that is included in the Phabricator error report that's generated when the user clicks on the report link on an error page."
"multimediaviewer-errorreport-privacywarning": "A warning that is included in the Phabricator error report that's generated when the user clicks on the report link on an error page.",
"multimediaviewer-loading": "Label for indeterminate progress bar shown while the dialog is loading."
}

16
resources/mmv.bootstrap/mmv.bootstrap.js
View file

@ -174,7 +174,11 @@ class MultimediaViewerBootstrap {
mw.notify( `Error loading MediaViewer: ${ message2 }` );
return $.Deferred().reject( message2 );
}
);
).always( () => {
if ( this.$loadBar ) {
this.$loadBar.remove();
}
} );
}
/**
@ -214,7 +218,7 @@ class MultimediaViewerBootstrap {
this.$parsoidThumbs.each( ( i, thumb ) => this.processParsoidThumb( thumb ) );
} finally {
this.thumbsReadyDeferred.resolve();
// now that we have set up our real click handler we can we can remove the temporary
// now that we have set up our real click handler we can remove the temporary
// handler added in mmv.head.js which just replays clicks to the real handler
$( document ).off( 'click.mmv-head' );
}
@ -685,6 +689,14 @@ class MultimediaViewerBootstrap {
this.$overlay = $( '<div>' )
// Dark overlay should stay dark in dark mode
.addClass( 'mw-mmv-overlay mw-no-invert' );
this.$loadBar = $( '<div>' )
.addClass( 'cdx-progress-bar' )
.attr( {
role: 'progressbar',
'aria-label': mw.msg( 'multimediaviewer-loading' )
} ).append( $( '<div>' ).addClass( 'cdx-progress-bar__bar' ) );
this.$overlay.append( this.$loadBar );
}
this.savedScrollTop = $( window ).scrollTop();

16
resources/mmv.bootstrap/mmv.bootstrap.less
View file

@ -8,6 +8,17 @@
bottom: 0;
z-index: 1000;
background-color: #000;
display: flex;
justify-items: center;
align-items: center;
align-content: center;
justify-content: center;
.cdx-progress-bar {
max-width: 80vw;
min-width: 20vw;
width: 20rem;
}
}
body.mw-mmv-lightbox-open {
@ -18,7 +29,10 @@ body.mw-mmv-lightbox-open {
display: none;
}
> .mw-mmv-overlay,
> .mw-mmv-overlay {
display: flex;
}
> .mw-mmv-wrapper {
display: block;
}