search

philharmoniedeparis / metascore-library

The front-end library that powers the metaScore authoring tool.
https://metascore.philharmoniedeparis.fr
CeCILL Free Software License Agreement v2.1
0 stars 0 forks source link

Améliorer l'UI du mode plain écran #375

Closed semiaddict closed 4 years ago

semiaddict commented 4 years ago

Centrer le guide et le mettre sur fond blanc.

semiaddict commented 4 years ago

Cette feature est liée à #383, car il faut déjà ajouter les champs/métadonnées "largeur" et "hauteur" aux guides pour pouvoir les centrer en mode plain écran.

semiaddict commented 4 years ago

Est-ce que le guide doit aussi être centré en dehors du mode plain écran ? Par exemple, si le guide fait 500x250 pixels et que l'iframe de l'embed fait 600x400, est-ce que le guide doit aussi être centré ? La question se pose aussi lorsque le guide est visualisé directement dans sa page HTML comme ceci : https://drupal8-metascore.philharmoniedeparis.fr/fr/player/VKv?responsive=1 Personnellement, il me semble que le centrage est valable pour toutes ces situations, non ?

De plus, il me semble intéressant d'ajouter un paramètre d'URL (comme pour le responsive) permettant d'autoriser l'agrandissement du guide au-delà de sa taille réel en mode responsive, cela peut être utile en particulier pour les guides qui ne comportent pas d'image bitmap, comme c'est le cas (il me semble) de #VKv « Pierre & le Loup ».

rbailly commented 4 years ago

Personnellement, il me semble que le centrage est valable pour toutes ces situations, non ?

Oui, je suis d'accord.

autoriser l'agrandissement du guide au-delà de sa taille réel en mode responsive

Egalement d'accord,, très bonne idée et très pratique dans bien des cas.

semiaddict commented 4 years ago

J'ai mis en place le centrage du player, et ajouté la possibilité d'autoriser l'agrandissement via un paramètre d'URL et mis à jour le formulaire de partage en conséquence.

afborneuf commented 4 years ago

Le centrage, c'est classe ! L'agrandissement, je ne suis pas sûre d'avoir réussi à tester :-)

semiaddict commented 4 years ago

Voici un exemple d'agrandissement avec Pierre & le Loup : https://dev-metascore.philharmoniedeparis.fr/fr/player/VKv?responsive=1&allow_upscaling=1

afborneuf commented 4 years ago

OK, merci Oussama ! Ce que je voulais dire c'est que je m'interrogeais sur comment mettre cette fonctionnalité en oeuvre quand on passe en plein écran à partir de "Explorer"... mais je me ferai expliquer ça plus tard, ce n'est pas urgent à la minute !

afborneuf commented 4 years ago

Dans certains cas, le guide s'affiche sur fond noir en plein écran : https://dev-metascore.philharmoniedeparis.fr/guide/ZQ6#player

Peut-être parce que dans le guide le fond du bloc est transparent ?

Par ailleurs, il n'est pas centré.

semiaddict commented 4 years ago

Il s'agit d'un guide hébergé sur legacy-metascore.philharmoniedeparis.fr, utilisant donc l'ancienne version du Player qui n'a pas été modifiée.

semiaddict commented 4 years ago

J'ai mis en place la gestion des paramètres « responsive » et « allowUpscaling » sur la v1 via 96b920f7a269f2700f0828ceb9ab6c1e2f1b2eb2. Pour le moment ce changement est disponible sur dev. Voici un exemple: https://dev-legacy-metascore.philharmoniedeparis.fr/player/ZQ6?responsive=1&allowUpscaling=1

Pour éviter de modifier l’apparence de guide v1 déjà intégré dans des pages HTML externes, le centrage et le fond blanc sont ajoutés uniquement lorsque le mode responsive est actif.

rbailly commented 4 years ago

Voici un exemple: https://dev-legacy-metascore.philharmoniedeparis.fr/player/ZQ6?responsive=1&allowUpscaling=1

Whaou !