Git Product home page Git Product logo

mfts's Introduction

Material for the spine

Build Status codecov tested with jest styled with prettier

MFS

A movement study webapp converted from Contredanse's "Material for the Spine" DVD-ROM originally written in flash/actionscript.

https://www.materialforthespine.com

License

Source code of this webapp is freely available under MIT license. Video material is subject to copyright to Contredanse editions, Brussels. For support please register for a paid subscription.

Technologies

  • React/Typescript/Webpack.

Contributors

Notes for developers

Install

$ git clone https://github.com/contredanse/mfts.git
$ cd mfts
$ yarn install

Configure

You don't have to but if you want for development to change some environment variables (links, assets url's...

Copy the env.template file into `./env.development.local'.

$ cp ./env/env.template ./env.development.local

Develop

$ yarn dev

then open http://localhost:3001 in your browser.

Check & test

$ yarn lint:fix
$ yarn prettier
$ yarn test

Build

$ yarn build

The build will be available in /dist/public

Production

Server

To fully take advantage of brotli compression, Apache is recommended over Nginx. Really be sure to not cache either service-worker.js and index.html to prevent PWA caching issues.

See notes, root .htaccess and static .htaccess. Note that apache support is build with the project. In other words, nothing to do for apache users.

Deploy

For simple deployments scenarios have a look to the deploy.sh.example.

mfts's People

Contributors

bapt2001 avatar belgattitude avatar boblemarin avatar dependabot[bot] avatar florencecorin avatar imeurrens avatar nils-lopez avatar

Stargazers

 avatar

Watchers

 avatar  avatar

mfts's Issues

Meeting notes TODO

  • First review (bapt/flo)

    • Data data-pages.json
      • New attribute: loop to control infinite loops of pages videos
      • New attribute: loop_number to control number of iterations
      • New attribute: speed_control to display video speed control (was abandonned after)
    • Homepage/Landing page
      • Design: Broaden click to entire text block -> goto intro
      • Design: language to right upper corner
      • Design: Video background (2tubes)
      • Feature: Remove speed behaviour onMouseOver
      • Feature add Fullscreen
    • Introduction page
      • Skip intro -> go to navigation (helix or page list / quid mobile ?)
    • Topbar
      • Remove top icons in favour of sidebar
      • Design: Page breadcrumb (menu sections and title )should be in the top area (react portal).
      • AutoHide page breadcrumb on inactivity
      • Design: Keep only hamburger menu and helix icons
    • Sidebar (main menu)
      • Feature: Side navigation opens submenu
        • Home
        • About
        • Content
        • Credits
        • Biography
        • (Login/Logout)
        • Language and Link contredanse
        • Copyright
    • Page
      • Design: margin-bottom to prevent video to overlap with controls
    • PageList
      • Design: Move the search to the top (new appbar)
    • Player
      • On play end, show overlay :
        • Strategy choice (next / reload / timeout ?)
      • Controlbar
        • Playback speed control
          • If video is muted or explicit definition speed_control in data.
        • Translated tooltips for buttons (play, pause, show subtitles...)
        • AutoHide controlbar on inactivity
        • Add fullscreen icon + support (redux)
        • SVG icons:
          • Contredanse
            • Abandoned play/pause maybe ?
            • Abandoned looping on/off variants
            • subtitles on/off variants, maybe ?
        • (abandonned) Visually indicate that it's autoloop or looping iterations
        • Change order of icons
          • Previous to the left... (greyed if not availble)
    • Static pages
      • Markdown for pages (by contredanse)
        • Bibliography
        • Credits
        • Biography
        • Biblio
        • Copyright

[seb] markdown

Serait-il possible d'avoir une retour à la ligne simple (sans un interlignage plus large) et un saut de paragraphe tel que tu l'as fait là?
C'est ce que j'ai fait pour le moment dans les markdown (et qui semblait ok dans des éditeurs en ligne).
Et serait-il aussi possible de réduire un peu la taille de base du texte, là c'est un peu grand sur tous les supports?

Prob de langue sur page Login

ouverture page Login (En), je reclique sur le menu droite pour changer de langue, les messages d'erreur s'affiche encore en anglais.
capture d ecran 2019-01-24 a 12 22 15

[seb] luminosité/contraste

diminuer un peu les paramètres... on est à 15 et 15? diminuer à 10 et 10?
En tout cas pour certaines vidéos c'est trop.

ouverture spirale sur catégorie

ayant ouvert une video (ex: "an approach to breathing"),
si je click sur le texte de la catégorie auquel elle fait partie (ex: basics)
la spirale ne s'ouvre plus sur la catégorie ouverte

En vrac

Si connexion lente: message ? quid pour la page « recherche »?

Login

  • Zone noire supérieure à retirer (zone menu)

Menu

  • Logged: « Bienvenue » pour (actuellement « welcome »)

Page Menu hélice

  • Emeric: Style CSS pour Titre Hélice (caps) - catégorie (pas caps) - nom video (pas caps)

Page Login:

  • Retour hélice depuis le breadcrumb.
  • écran fin : redesigner (icônes trop grandes) + par défaut après x secondes: retour menu hélice

Control bar

  • flo: problème pour changement vitesse sur l’audio -> remplacé par définir les vidéo où le sélecteur est utile.

  • manque icône vitesse sur PC (sur iPhone: ok) : quid mise en forme

  • un peu plus d’espace entre les icônes de droite

  • (closed) confirmation de seb qu’il y a bien un message d’avertissement

Bugs

  • Sous titres problèmes
  • surlignage bleu catégorie/titre en haut à gauche et souci écran fin de lecture video (videos comme sélectionnées - en bleu)

Sur iphone=

  • souci page d’accueil (titre « Steve Paxton » coupé)
  • control bar ne disparait pas (aléatoire) - surtout sur mode horizontal
  • supprimer icône spirale en haut à gauche
  • menu droite : le titre « recherche » > « menu"
  • Control bar > bouton vitesse - sous-titres - son > un peu trop serré
  • Control bar> bouton sous-titre reste jaune si sous-titre retiré, redevient blanc seulement si on clique sur un autre bouton
  • si vertical > menu droite ouvert cache icône Contredanse
  • si horizontal> menu droite déborde (l’adresse email prend bcp de place… est-ce nécessaire de l’afficher?) - Oui

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.