Add audio block

article/blocks.py

@@ -4,6 +4,14 @@
 from videos import blocks as video_blocks
 from wagtail.documents.blocks import DocumentChooserBlock
 
+class AudioBlock(blocks.StructBlock):
+    caption =  blocks.CharBlock(required=False)
+    audio = DocumentChooserBlock(required=True, help_text="Must be mp3 format")
+
+    class Meta:
+        template = 'article/stream_blocks/audio.html',
+        icon = "media"
+
 class PullQuoteBlock(blocks.StructBlock):
     content = blocks.CharBlock(required=True)
     source =  blocks.CharBlock(required=False)
@@ -88,6 +96,12 @@ class VisualEssayBlock(blocks.StructBlock):
                 ('side',ChooseSideBlock(default=("left", "Left"))),
             ], icon = "media"
         )),
+        ('audio', blocks.StructBlock(
+            [
+                ('block', AudioBlock()),
+                ('side',ChooseSideBlock(default=("left", "Left"))),
+            ], icon = "media"
+        )),
         ('raw_html', blocks.StructBlock(
             [
                 ('block', blocks.RawHTMLBlock(

article/migrations/0022_alter_articlepage_content.py

@@ -0,0 +1,25 @@
+# Generated by Django 3.2.11 on 2023-12-12 03:58
+
+from django.db import migrations
+import images.models
+import wagtail.blocks
+import wagtail.documents.blocks
+import wagtail.embeds.blocks
+import wagtail.fields
+import wagtail.images.blocks
+import wagtail.snippets.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('article', '0021_auto_20230815_2248'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='articlepage',
+            name='content',
+            field=wagtail.fields.StreamField([('richtext', wagtail.blocks.RichTextBlock(help_text='Write your article contents here. See documentation: https://docs.wagtail.io/en/latest/editor_manual/new_pages/creating_body_content.html#rich-text-fields', label='Rich Text Block')), ('plaintext', wagtail.blocks.TextBlock(help_text='Warning: Rich Text Blocks preferred! Plain text primarily exists for importing old Dispatch text.', label='Plain Text Block')), ('dropcap', wagtail.blocks.TextBlock(help_text='DO NOT USE - Legacy block. Create a block where special dropcap styling with be applied to the first letter and the first letter only.\n\nThe contents of this block will be enclosed in a <p class="drop-cap">...</p> element, allowing its targetting for styling.\n\nNo RichText allowed.', label='Dropcap Block', template='article/stream_blocks/dropcap.html')), ('video', wagtail.blocks.StructBlock([('video_embed', wagtail.embeds.blocks.EmbedBlock(blank=False, null=False)), ('title', wagtail.blocks.CharBlock(max_length=255, required=False)), ('caption', wagtail.blocks.CharBlock(max_length=255, required=False)), ('credit', wagtail.blocks.CharBlock(max_length=255, required=False))], help_text='Use this to credit or caption videos that will only be associated with this current article, rather than entered into our video library. You can also embed videos in a Rich Text Block.', label='Credited/Captioned One-Off Video')), ('audio', wagtail.blocks.StructBlock([('caption', wagtail.blocks.CharBlock(required=False)), ('audio', wagtail.documents.blocks.DocumentChooserBlock(help_text='Must be mp3 format', required=True))])), ('image', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(required=True)), ('style', wagtail.blocks.ChoiceBlock(choices=[('default', 'Default'), ('left', 'Left'), ('right', 'Right')])), ('width', wagtail.blocks.ChoiceBlock(choices=[('full', 'Full'), ('small', 'Small'), ('medium', 'Medium'), ('large', 'Large')])), ('caption', wagtail.blocks.CharBlock(max_length=255, required=False)), ('credit', wagtail.blocks.CharBlock(max_length=255, required=False))])), ('raw_html', wagtail.blocks.RawHTMLBlock(help_text="WARNING: DO NOT use this unless you really know what you're doing!", label='Raw HTML Block')), ('quote', wagtail.blocks.StructBlock([('content', wagtail.blocks.CharBlock(required=True)), ('source', wagtail.blocks.CharBlock(required=False)), ('audio', wagtail.documents.blocks.DocumentChooserBlock(help_text='optional, must be mp3 format', required=False))])), ('gallery', wagtail.snippets.blocks.SnippetChooserBlock(target_model=images.models.GallerySnippet, template='article/stream_blocks/gallery.html')), ('header_link', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('id', wagtail.blocks.CharBlock(help_text='Intended to be shared with a page link button so that clicking the button will scroll the user to this header'))])), ('header_menu', wagtail.blocks.StructBlock([('list', wagtail.blocks.ListBlock(wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('id', wagtail.blocks.CharBlock(help_text='Intended to be shared with a header so that this button will send the user to the section of the page with said header')), ('colour', wagtail.blocks.CharBlock(default='0071c9'))], label='Page Link')))])), ('visual_essay', wagtail.blocks.StructBlock([('view', wagtail.blocks.StructBlock([('view', wagtail.blocks.ChoiceBlock(choices=[('vs-side-by-side', 'Side By Side'), ('vs-over-image', 'Text Over Image')]))])), ('content', wagtail.blocks.StreamBlock([('rich_text', wagtail.blocks.StructBlock([('block', wagtail.blocks.RichTextBlock(help_text='Write your article contents here. See documentation: https://docs.wagtail.io/en/latest/editor_manual/new_pages/creating_body_content.html#rich-text-fields', label='Rich Text Block')), ('side', wagtail.blocks.ChoiceBlock(choices=[('left', 'Left'), ('right', 'Right')]))], icon='doc-full')), ('image', wagtail.blocks.StructBlock([('block', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(required=True)), ('style', wagtail.blocks.ChoiceBlock(choices=[('default', 'Default'), ('left', 'Left'), ('right', 'Right')])), ('width', wagtail.blocks.ChoiceBlock(choices=[('full', 'Full'), ('small', 'Small'), ('medium', 'Medium'), ('large', 'Large')])), ('caption', wagtail.blocks.CharBlock(max_length=255, required=False)), ('credit', wagtail.blocks.CharBlock(max_length=255, required=False))])), ('side', wagtail.blocks.ChoiceBlock(choices=[('left', 'Left'), ('right', 'Right')]))], icon='image')), ('video', wagtail.blocks.StructBlock([('block', wagtail.blocks.StructBlock([('video_embed', wagtail.embeds.blocks.EmbedBlock(blank=False, null=False)), ('title', wagtail.blocks.CharBlock(max_length=255, required=False)), ('caption', wagtail.blocks.CharBlock(max_length=255, required=False)), ('credit', wagtail.blocks.CharBlock(max_length=255, required=False))], help_text='Use this to credit or caption videos that will only be associated with this current article, rather than entered into our video library. You can also embed videos in a Rich Text Block.', label='Credited/Captioned One-Off Video')), ('side', wagtail.blocks.ChoiceBlock(choices=[('left', 'Left'), ('right', 'Right')]))], icon='media')), ('audio', wagtail.blocks.StructBlock([('block', wagtail.blocks.StructBlock([('caption', wagtail.blocks.CharBlock(required=False)), ('audio', wagtail.documents.blocks.DocumentChooserBlock(help_text='Must be mp3 format', required=True))])), ('side', wagtail.blocks.ChoiceBlock(choices=[('left', 'Left'), ('right', 'Right')]))], icon='media')), ('raw_html', wagtail.blocks.StructBlock([('block', wagtail.blocks.RawHTMLBlock(help_text="WARNING: DO NOT use this unless you really know what you're doing!", label='Raw HTML Block')), ('side', wagtail.blocks.ChoiceBlock(choices=[('left', 'Left'), ('right', 'Right')]))], icon='code')), ('quote', wagtail.blocks.StructBlock([('block', wagtail.blocks.StructBlock([('content', wagtail.blocks.CharBlock(required=True)), ('source', wagtail.blocks.CharBlock(required=False)), ('audio', wagtail.documents.blocks.DocumentChooserBlock(help_text='optional, must be mp3 format', required=False))])), ('side', wagtail.blocks.ChoiceBlock(choices=[('left', 'Left'), ('right', 'Right')]))], icon='openquote')), ('header_link', wagtail.blocks.StructBlock([('block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock()), ('id', wagtail.blocks.CharBlock(help_text='Intended to be shared with a page link button so that clicking the button will scroll the user to this header'))])), ('side', wagtail.blocks.ChoiceBlock(choices=[('left', 'Left'), ('right', 'Right')]))], icon='title')), ('gap', wagtail.blocks.StructBlock([('id', wagtail.blocks.CharBlock(required=False)), ('height', wagtail.blocks.IntegerBlock(default=0, min_value=0, required=True))])), ('switch_view', wagtail.blocks.StructBlock([('view', wagtail.blocks.ChoiceBlock(choices=[('vs-side-by-side', 'Side By Side'), ('vs-over-image', 'Text Over Image')]))]))]))]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]

article/models.py

@@ -489,6 +489,7 @@ class ArticlePage(RoutablePageMixin, SectionablePage, UbysseyMenuMixin):
                 label = "Credited/Captioned One-Off Video",
                 help_text = "Use this to credit or caption videos that will only be associated with this current article, rather than entered into our video library. You can also embed videos in a Rich Text Block."
             )),
+            ('audio', article_blocks.AudioBlock()),
             ('image', image_blocks.ImageBlock(
             )),
             ('raw_html', blocks.RawHTMLBlock(

article/templates/article/stream_blocks/audio.html

@@ -0,0 +1,7 @@
+<div class="audio">
+    <p class="caption">{{self.caption}}</p>
+    <audio controls>
+        <source src="{{self.audio.url}}" type="audio/mpeg">
+        Your browser does not support the audio element.
+    </audio>
+</div>

home/migrations/0025_alter_homepage_sidebar_stream.py

@@ -0,0 +1,23 @@
+# Generated by Django 3.2.11 on 2023-12-12 03:58
+
+from django.db import migrations
+import section.models
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+import wagtail.snippets.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('home', '0024_auto_20230815_2248'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='homepage',
+            name='sidebar_stream',
+            field=wagtail.fields.StreamField([('sidebar_advertisement_block', wagtail.blocks.StructBlock([])), ('sidebar_issues_block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(max_length=255, required=True)), ('issues', wagtail.blocks.StreamBlock([('issue', wagtail.blocks.StructBlock([('date', wagtail.blocks.DateBlock(required=True)), ('image', wagtail.images.blocks.ImageChooserBlock(required=False)), ('show_image', wagtail.blocks.BooleanBlock(required=False)), ('link', wagtail.blocks.URLBlock(required=True))]))]))])), ('sidebar_category_block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(max_length=255, required=True)), ('category', wagtail.snippets.blocks.SnippetChooserBlock(section.models.CategorySnippet))])), ('sidebar_section_block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(max_length=255, required=True)), ('section', wagtail.blocks.PageChooserBlock(page_type=['section.SectionPage']))])), ('sidebar_flex_stream_block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(max_length=255, required=True)), ('stream', wagtail.blocks.StreamBlock([('image_link', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(required=True)), ('link', wagtail.blocks.URLBlock(required=False))]))]))])), ('sidebar_latest', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(max_length=255, required=True))])), ('sidebar_manual', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(max_length=255, required=True)), ('articles', wagtail.blocks.ListBlock(wagtail.blocks.PageChooserBlock(page_type=['article.ArticlePage'])))]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]

section/migrations/0014_alter_sectionpage_sidebar_stream.py

@@ -0,0 +1,23 @@
+# Generated by Django 3.2.11 on 2023-12-12 03:58
+
+from django.db import migrations
+import section.models
+import wagtail.blocks
+import wagtail.fields
+import wagtail.images.blocks
+import wagtail.snippets.blocks
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('section', '0013_alter_sectionpage_sidebar_stream'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='sectionpage',
+            name='sidebar_stream',
+            field=wagtail.fields.StreamField([('sidebar_advertisement_block', wagtail.blocks.StructBlock([])), ('sidebar_issues_block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(max_length=255, required=True)), ('issues', wagtail.blocks.StreamBlock([('issue', wagtail.blocks.StructBlock([('date', wagtail.blocks.DateBlock(required=True)), ('image', wagtail.images.blocks.ImageChooserBlock(required=False)), ('show_image', wagtail.blocks.BooleanBlock(required=False)), ('link', wagtail.blocks.URLBlock(required=True))]))]))])), ('sidebar_section_block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(max_length=255, required=True)), ('section', wagtail.blocks.PageChooserBlock(page_type=['section.SectionPage']))])), ('sidebar_flex_stream_block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(max_length=255, required=True)), ('stream', wagtail.blocks.StreamBlock([('image_link', wagtail.blocks.StructBlock([('image', wagtail.images.blocks.ImageChooserBlock(required=True)), ('link', wagtail.blocks.URLBlock(required=False))]))]))])), ('sidebar_category_block', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(max_length=255, required=True)), ('category', wagtail.snippets.blocks.SnippetChooserBlock(section.models.CategorySnippet))])), ('sidebar_manual', wagtail.blocks.StructBlock([('title', wagtail.blocks.CharBlock(max_length=255, required=True)), ('articles', wagtail.blocks.ListBlock(wagtail.blocks.PageChooserBlock(page_type=['article.ArticlePage'])))]))], blank=True, null=True, use_json_field=True),
+        ),
+    ]

ubyssey/static_src/src/styles/modules/article/_embeds.scss

@@ -447,6 +447,13 @@
   }
 }
 
+.audio{
+  audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
+    background-color: #411d0f; //inversion of ubyssey light blue
+    filter:invert(1);
+  }
+}
+
 hr.page-break{
       display: flex;
       max-width: 65%;