templates/hymns/info.html.twig line 1

Open in your IDE?
  1. {% extends('base.html.twig') %}
  3. {% block title %}Hymn Information for {{ hymn.title }}!{% endblock %}
  5. {% block pageId %}hymn_info{% endblock %}
  7. {% block javascripts %}
  8. {{ parent() }}
  9. {{ encore_entry_script_tags('hymninfo') }}
  10. {% endblock %}
  12. {% block body %}
  13. {% if not useImg %}
  14. <script src="//cdnjs.cloudflare.com/ajax/libs/pdfobject/2.0.201604172/pdfobject.min.js"
  15. integrity="sha256-dUe7c2jPkbycNGu4OSy/3FbLKU5FK1aM62Vc5Ni7sgs="
  16. crossorigin="anonymous"></script>
  17. {% endif %}
  18. <div class="card">
  19. <h2 class="card-header">Hymn Information</h2>
  20. <article class="card-body">
  21. <div class="hymn-info">
  22. <h3 class="ml-3 font-weight-bold">{{ hymn.title }}</h3>
  23. <hr/>
  24. {% if is_granted('ROLE_ADMIN') %}
  25. <h4 class="ml-3">
  26. <a href="{{ path('app_admin_hymns_edit', {'id': hymn.id}) }}" target="_blank">Edit this hymn</a>
  27. </h4>
  28. <hr/>
  29. {% endif %}
  30. {% if categories|length > 0 %}
  31. <h3 class="col-12 text-center font-weight-bold" title="List of categories associated with this hymn!">Category List</h3>
  32. <div class="text-center">
  33. Here is a list of categories associated with this hymn!
  34. </div>
  35. <div class="row ml-3">
  36. {% for category in categories %}
  37. <div class="col-md-6">
  38. <div class="small">
  39. <a title="{{ category.description }}" class="pr-3" href="{{ path('hymn_category_show', {'slug': category.slug}) }}">{{ category.title }}</a>
  40. </div>
  41. </div>
  42. {% endfor %}
  43. </div>
  44. <hr/>
  45. {% endif %}
  46. <div class="row">
  47. <div class="col-md-6 hymn-audio">
  48. <audio class="mx-2" style="width: 100%;" id="player" controls title="{{ hymn.title }}">
  49. <source src="/{{ hymnType.slug }}/midi/{{ hymn.slug }}.mp3" type="audio/mpeg">
  50. Your browser does not support the audio element.
  51. </audio>
  52. </div>
  53. <div class="col-md-6 hymn-score btn-group-vertical align-items-center mt-2 mt-sm-0" data-toggle="modal"
  54. title="View the hymn, '{{ hymn.title }}'."
  55. data-target="#largeModal"><i class="fa fa-music"> view music</i>
  56. </div>
  57. <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal"
  58. aria-hidden="true">
  59. <div class="modal-dialog modal-lg">
  60. <div class="modal-content">
  61. <div class="modal-header" id="audio_container"></div>
  62. {% if useImg %}
  63. <div class="modal-body" id="image_container">
  64. {% if hymn.ScorePageCount > 1 %}
  65. {% for i in 0..(hymn.ScorePageCount-1) %}
  66. <img alt="{{ hymn.title }} page {{ i+1 }}"
  67. src="/{{ hymnType.slug }}/img/{{ hymn.slug }}-{{ i }}.jpg"/>
  68. {% endfor %}
  69. {% else %}
  70. <img alt="{{ hymn.title }}" src="/{{ hymnType.slug }}/img/{{ hymn.slug }}.jpg"/>
  71. {% endif %}
  72. </div>
  73. {% else %}
  74. <div class="modal-body" id="pdf_container"></div>
  75. <script>
  76. PDFObject.embed("/{{ hymnType.slug }}/pdfs/{{ hymn.title }}.pdf", "#pdf_container");
  77. </script>
  78. {% endif %}
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. <hr/>
  84. {% if is_recorded %}
  85. <h3 class="text-center">Audio Recording Samples</h3>
  86. <div class="row">
  87. {% for hymn in artist_hymns %}
  88. <div class="col-md-6 my-3 ml-2">
  89. <div class="{{ hymn.artistSlug }}">
  90. {{ hymn.artistName }}
  91. {% if hymn.yearRecorded is not null %}
  92. (in {{ hymn.yearRecorded }})
  93. {% endif %}
  94. </div>
  95. <audio class="h-50 w-50 m-1 p-0" id="player" controls title="{{ hymn.title }}">
  96. <source src="{{ hymn.HymnUrl }}{{ hymn.title }}.mp3" type="audio/mpeg">
  97. Your browser does not support the audio element.
  98. </audio>
  99. </div>
  100. {% endfor %}
  101. </div>
  102. <hr/>
  103. {% endif %}
  104. <div class="row">
  105. <div class="prev-hymn col-md-1">
  106. <a title="Go to the previous hymn"
  107. href="{{ path('hymnInfo', {'slug': hymn.prevSlug}) }}"><i class="fa fa-arrow-left ml-3"></i></a>
  108. </div>
  109. <div class="page-back text-center col-md-10">
  110. <a href="{{ path('hymns', {'hymnType': hymnType.slug}) }}">Back to the list</a>
  111. </div>
  112. <div class="next-hymn col-md-1">
  113. <a title="Go to the next hymn"
  114. href="{{ path('hymnInfo', {'slug': hymn.nextSlug}) }}"><i class="fa fa-arrow-right"></i></a>
  115. </div>
  116. </div>
  117. <hr/>
  118. <div class="row">
  119. <div class="col-md-3 text-right">Author</div>
  120. <div class="col-md-8">
  121. <a class="hymn-info-link d-inline" href="{{ path('authcomp', {'type': 'Author', 'id': auth.Id} ) }}">
  122. {{ auth.FirstName }} {{ auth.MiddleName }} {{ auth.LastName }}
  123. </a>{% if hymn.lyricyyyy|length > 0 %} in {{ hymn.lyricyyyy }} {% endif %}
  124. </div>
  125. <div class="col-md-1">
  126. <a href="#" class="authcomp-info" id="auth_{{ auth.ID }}"
  127. data-content="{{ auth.Notes|nl2br }}"
  128. data-toggle="modal" data-target="#authModal" data-id="{{ auth.ID }}"
  129. data-title="Author {{ auth.FirstName }} {{ auth.MiddleName }} {{ auth.LastName }}'s bio information">
  130. <i class="fa fa-book"></i>
  131. </a>
  132. </div>
  133. <div class="modal fade" id="authModal" tabindex="-1" role="dialog"
  134. aria-labelledby="authModalLabel">
  135. <div class="modal-dialog" role="document">
  136. <div class="modal-content">
  137. <div class="modal-header row">
  138. <h4 class="modal-title col-12" id="authModalLabel">
  139. {{ auth.FirstName }} {{ auth.MiddleName }} {{ auth.LastName }}'s bio information
  140. </h4>
  141. {% set bdate = auth.Birthdate|length > 0 ? auth.Birthdate : 'Date Unknown' %}
  142. {% set ddate = auth.Deathdate|length > 0 ? auth.Deathdate : 'Date Unknown' %}
  143. <h5 class="col-12">{{ bdate }} - {{ ddate }}</h5>
  144. </div>
  145. <div class="authcomp modal-body"
  146. id="authModalBody">{{ (auth.Notes ?? 'Sorry, we have no information for this author')|raw|nl2br }}</div>
  147. </div>
  148. </div>
  149. </div>
  150. </div>
  151. <hr/>
  152. <div class="row">
  153. <div class="col-md-3 text-right">Composer</div>
  154. <div class="col-md-8">
  155. <a class="hymn-info-link d-inline" href="{{ path('authcomp', {'type': 'Composer', 'id': comp.Id} ) }}">
  156. {{ comp.FirstName }} {{ comp.MiddleName }} {{ comp.LastName }}
  157. </a>{% if hymn.musicyyyy|length > 0 %} in {{ hymn.musicyyyy }} {% endif %}
  158. </div>
  159. <div class="col-md-1">
  160. <a href="#" class="authcomp-info" id="comp_{{ comp.ID }}"
  161. data-content="{{ comp.Notes|nl2br }}"
  162. data-toggle="modal" data-target="#compModal" data-id="{{ comp.ID }}"
  163. data-title="Composer {{ comp.FirstName }} {{ comp.MiddleName }} {{ comp.LastName }}'s bio information">
  164. <i class="fa fa-book"></i>
  165. </a>
  166. </div>
  167. <div class="modal fade" id="compModal" tabindex="-1" role="dialog"
  168. aria-labelledby="compModalLabel">
  169. <div class="modal-dialog" role="document">
  170. <div class="modal-content">
  171. <div class="modal-header row">
  172. <h4 class="modal-title col-12" id="compModalLabel">
  173. {{ comp.FirstName }} {{ comp.MiddleName }} {{ comp.LastName }}'s bio information
  174. </h4>
  175. {% set bdate = comp.Birthdate|length > 0 ? comp.Birthdate : 'Date Unknown' %}
  176. {% set ddate = comp.Deathdate|length > 0 ? comp.Deathdate : 'Date Unknown' %}
  177. <h5 class="col-12">{{ bdate }} - {{ ddate }}</h5>
  178. </div>
  179. <div class="authcomp modal-body"
  180. id="compModalBody">{{ (comp.Notes ?? 'Sorry, we have no information for this composer')|raw|nl2br }}</div>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. <hr/>
  186. <div class="row">
  187. <div class="col-md-3 text-right">Arranger</div>
  188. <div class="col-md-8">
  189. <a class="hymn-info-link d-inline" href="{{ path('authcomp', {'type': 'Arranger', 'id': arrn.Id} ) }}">
  190. {{ arrn.FirstName }} {{ arrn.MiddleName }} {{ arrn.LastName }}
  191. </a>{% if hymn.arrangedyyyy|length > 0 %} in {{ hymn.arrangedyyyy }} {% endif %}
  192. </div>
  193. <div class="col-md-1">
  194. <a href="#" class="authcomp-info" id="arrn_{{ arrn.ID }}"
  195. data-content="{{ arrn.Notes|nl2br }}"
  196. data-toggle="modal" data-target="#arrnModal" data-id="{{ arrn.ID }}"
  197. data-title="Arranger {{ arrn.FirstName }} {{ arrn.MiddleName }} {{ arrn.LastName }}'s bio information">
  198. <i class="fa fa-book"></i>
  199. </a>
  200. </div>
  201. <div class="modal fade" id="arrnModal" tabindex="-1" role="dialog"
  202. aria-labelledby="arrnModalLabel">
  203. <div class="modal-dialog" role="document">
  204. <div class="modal-content">
  205. <div class="modal-header row">
  206. <h4 class="modal-title col-12" id="arrnModalLabel" >
  207. {{ arrn.FirstName }} {{ arrn.MiddleName }} {{ arrn.LastName }}'s bio information
  208. </h4>
  209. {% set bdate = arrn.Birthdate|length > 0 ? arrn.Birthdate : 'Date Unknown' %}
  210. {% set ddate = arrn.Deathdate|length > 0 ? arrn.Deathdate : 'Date Unknown' %}
  211. <h5 class="col-12">{{ bdate }} - {{ ddate }}</h5>
  212. </div>
  213. <div class="authcomp modal-body"
  214. id="arrnModalBody">{{ (arrn.Notes ?? 'Sorry, we have no information for this arranger')|raw|nl2br }}</div>
  215. </div>
  216. </div>
  217. </div>
  218. </div>
  219. <hr/>
  220. {% if( hymn.OtherNotes is not null) %}
  221. <div class="row">
  222. <div class="col-md-3 text-right">Notes</div>
  223. <div class="col-md-9">{{ hymn.OtherNotes|raw|nl2br }}</div>
  224. </div>
  225. <hr/>
  226. {% endif %}
  227. <div class="row">
  228. <div class="col-md-3 text-right">Lyrics</div>
  229. <div class="col-md-9">{{ hymn.text|raw|nl2br }}</div>
  230. </div>
  231. <hr/>
  232. <div class="small text-center">
  233. <div>Uploaded on {{ hymn.createdAt|date("F jS, Y \\a\\t g:ia") }} and has {{ hymn.hymnHitCount }} views!</div>
  234. </div>
  235. </div>
  236. </article>
  237. <h3 class="card-header">Comments</h3>
  238. <div id="comments" class="card-body">
  239. {% for c in comments %}
  240. <blockquote class="mb-2">
  241. <p>{{ c.comment|raw }}</p>
  242. <footer>
  243. by {{ c.userName }} on {{ c.commentDate|date('m/d/Y h:m:s a') }}
  244. {% if is_granted('ROLE_ADMIN') %}
  245. <div class="float-right">
  246. <a href="mailto:{{ c.email }}?subject=Re:%20your%20comment%20on%20eHymns&body=Thank you for your comment on '{{ hymn.title }}'!">Reply</a>
  247. </div>
  248. {% endif %}
  249. </footer>
  250. </blockquote>
  251. {% else %}
  252. <div class="no-comments text-center">
  253. This hymn doesn't have any comments yet.<br/>You can be the first!
  254. </div>
  255. {% endfor %}
  256. {% if app.user %}
  257. {{ form_start(form) }}
  258. <input type="hidden" value="{{ app.user.id }}" name="user_id" id="user_id">
  259. {{ form_widget(form) }}
  261. <input type="submit"/>
  262. {{ form_end(form) }}
  263. {% else %}
  264. <div class="text-center">
  265. You must be
  266. <a href="{{ path('app_login') }}?go_to={{ app.request.server.get('REQUEST_SCHEME') }}://{{ app.request.host }}{{ path('hymnInfo', {'slug' : hymn.slug}) }}#comments">
  267. logged in</a> to comment. Otherwise, please <a href="{{ path('register') }}">register</a>.
  268. </div>
  269. {% endif %}
  270. </div>
  271. </div>
  272. {% endblock %}