templates/learn/courseView.html.twig line 1

  1. {% extends 'base.html.twig' %}
  3. {% block title %}HYPA - Apprendre{% endblock %}
  5. {% block stylesheets %}
  6.     <link rel="stylesheet" href="{{ asset("css/reset.css") }}">
  7.     <link rel="stylesheet" href="{{ asset("css/learn/courseView.css") }}">
  8.     <style>
  9.         html {
  10.             font-family: HanMufa,sans-serif;
  11.         }
  12.         .character {
  13.             font-family: KaiTi,sans-serif;
  14.         }
  15.     </style>
  16. {% endblock %}
  18. {% block javascripts %}
  19.     <script src="https://kit.fontawesome.com/407f58a928.js" crossorigin="anonymous"></script>
  20.     <script>
  21.         document.addEventListener('DOMContentLoaded', principale);
  23.         function principale() {
  24.             console.log('js comportements chargé');
  26.             const playsoundButton = document.querySelector(".playsound")
  27.             playsoundButton.addEventListener('click', playsound)
  29.             let semaphore = 1;
  30.             function resetSemaphore(){
  31.                 semaphore=1
  32.             }
  34.             const queryString = window.location.search;
  35.             const urlParams = new URLSearchParams(queryString);
  36.             let automatic = urlParams.get("automatic")
  37.             console.log(automatic)
  38.             let volume = urlParams.get("volume")
  39.             let volumeSlider = document.getElementById('volume')
  40.             volumeSlider.addEventListener('input', changeVolume)
  42.             let audio = new Audio(playsoundButton.id)
  44.             function changeVolume(){
  45.                 volume = volumeSlider.value
  46.                 audio.volume = volume/100
  47.             }
  49.             if(Object.is(volume,null)||volume==='null'){
  50.                 volumeSlider.value=50
  51.                 audio.volume=50/100
  52.             } else {
  53.                 audio.volume=volume/100
  54.                 volumeSlider.value=volume
  55.             }
  57.             if(automatic==null) {
  58.                 automatic = false;
  59.             }
  60.             if(automatic){
  61.                 document.getElementById('auto').checked = true
  62.                 playsound()
  63.             }
  65.             function playsound(evt){
  66.                 if(semaphore) {
  67.                     semaphore=0
  68.                     // try{
  69.                     //     let audio = new Audio(playsoundButton.id)
  70.                     //     audio.addEventListener('error',stay)
  71.                     //     audio.addEventListener('loadeddata',stay)
  72.                     // }
  73.                     // catch (error){
  74.                     //     console.log("whesh je catch")
  75.                     //     console.log(error)
  76.                     // }
  77.                     if(!Boolean(playsoundButton.id)){
  78.                         setTimeout(nextDiapo, 2000)
  79.                     }
  80.                     audio.play().catch((error)=>{
  81.                             console.log(error)
  82.                         }
  83.                     )
  84.                     audio.addEventListener('ended',resetSemaphore)
  85.                     audio.addEventListener('ended',nextDiapo)
  86.                 }
  87.             }
  89.             function nextDiapo(){
  90.                 if(document.getElementById('auto').checked)
  91.                 {
  92.                     automatic=true
  93.                     const nextPageButton = document.querySelector("#nextPageButton")
  94.                     if (nextPageButton){
  95.                         window.location.href = nextPageButton.href + "?automatic=" + automatic + "&volume=" + volume;
  96.                     }
  97.                 }
  98.             }
  100.             function stay(evt){
  101.                 if (evt.type==="error"){
  102.                     return null
  103.                 }
  104.                 else{
  105.                     console.log("good")
  106.                     nextDiapo()
  107.                 }
  108.             }
  109.         }
  110.     </script>
  111. {% endblock %}
  112. {% block body %}
  113.     <header>
  114.         <a href="{{ path("app_menu") }}" id="menu"><img src="{{ asset("images/nav_indicators/learn.png") }}" alt=""></a>
  115.         <h1>HYPA - Cours</h1>
  116.         <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"></a>
  117.     </header>
  118.     <section>
  119.         <ul>
  120.             <li>
  121.                 {% if numberOfPage > 1%}
  122.                     <a href="{{ path("app_course_view",{"page": numberOfPage - 1, "course": course.courseId}) }}"><</a>
  123.                 {% endif %}
  124.             </li>
  125.             <li class = "picture">
  126.                 {% if character %}
  127.                     {% if character.course %}
  128.                         {% if character.rcc %}
  129.                              <div class="playsound" id="{{ asset("dictionary/sound/"~character.course.title~"_sons/"~character.rcc.shortcutPath~".m4a") }}">
  130.                                 <figure>
  131.                                     {% if character is not null %}
  132.                                         <img src="{{ asset("dictionary/fr_FR/pictures/"~course.title~"_png/P"~course.courseId~"-D"~numberOfPage~"-"~character.shortcutPath~".png") }}" alt="{{ course.title }}">
  133.                                         <figcaption>future translation</figcaption>
  134.                                     {% else %}
  135.                                         <img src="{{ asset("dictionary/fr_FR/pictures/"~course.title~"_png/P"~course.courseId~"-D"~numberOfPage~".png") }}" alt="{{ course.title }}">
  136.                                         <figcaption>future translation</figcaption>
  137.                                     {% endif %}
  138.                                 </figure>
  139.                             </div>
  140.                         {% else %}
  141.                             <div class="playsound" id="{{ asset("dictionary/sound/"~character.course.title~"_sons/"~character.shortcutPath~".m4a") }}">
  142.                                 <figure>
  143.                                     {% if character is not null %}
  144.                                         <img src="{{ asset("dictionary/fr_FR/pictures/"~course.title~"_png/P"~course.courseId~"-D"~numberOfPage~"-"~character.shortcutPath~".png") }}" alt="{{ course.title }}">
  145.                                         <figcaption>future translation</figcaption>
  146.                                     {% else %}
  147.                                         <img src="{{ asset("dictionary/fr_FR/pictures/"~course.title~"_png/P"~course.courseId~"-D"~numberOfPage~".png") }}" alt="{{ course.title }}">
  148.                                         <figcaption>future translation</figcaption>
  149.                                     {% endif %}
  150.                                 </figure>
  151.                             </div>
  152.                         {% endif %}
  153.                     {% endif %}
  154.                 {% else %}
  155.                     <div class="playsound" id="">
  156.                         <figure>
  157.                             {% if character is not null %}
  158.                                 <img src="{{ asset("dictionary/fr_FR/pictures/"~course.title~"_png/P"~course.courseId~"-D"~numberOfPage~"-"~character.shortcutPath~".png") }}" alt="{{ course.title }}">
  159.                                 <figcaption>future translation</figcaption>
  160.                             {% else %}
  161.                                 <img src="{{ asset("dictionary/fr_FR/pictures/"~course.title~"_png/P"~course.courseId~"-D"~numberOfPage~".png") }}" alt="{{ course.title }}">
  162.                                 <figcaption>future translation</figcaption>
  163.                             {% endif %}
  164.                         </figure>
  165.                     </div>
  166.                 {% endif %}
  167.             </li>
  168.             <li>
  169.                 {% if numberOfPagesAvailable > numberOfPage%}
  170.                     <a id="nextPageButton" href="{{ path("app_course_view",{"page": numberOfPage + 1, "course": course.courseId}) }}">></a>
  171.                 {% endif %}
  172.             </li>
  173.         </ul>
  174.         <ul>
  175.             <li>
  176.                 <label for="auto"><i class="fa-solid fa-robot"></i></label>
  177.                 <input type="checkbox" name="auto" id="auto">
  178.             </li>
  179.             <li>
  180.                 <label for="volume"><i class="fa-solid fa-volume-high"></i></label>
  181.                 <input type="range" name="volume" id="volume" min="0" max="100">
  182.             </li>
  183.             <li>
  184.                 <a href="{{ path("app_dictionary") }}"><i class="fa-solid fa-book"></i></a>
  185.             </li>
  187.         </ul>
  188.     </section>
  189. {% endblock %}