Fix video chooser panel, small other layout fixes

tests/app/models.py

 from django.db import models
 from modelcluster.fields import ParentalKey
-from wagtail.admin.edit_handlers import StreamFieldPanel
+from wagtail.admin.edit_handlers import FieldPanel
 from wagtail.core.fields import StreamField
 from wagtail.core.models import Page
 
@@ -51,5 +51,5 @@ class TestPage(Page):
 
     content_panels = Page.content_panels + [
         VideoChooserPanel('video_field'),
-        StreamFieldPanel('video_streamfield'),
+        FieldPanel('video_streamfield'),
     ]

wagtailvideos/edit_handlers.py

@@ -4,11 +4,7 @@ from .widgets import AdminVideoChooser
 
 
 class VideoChooserPanel(FieldPanel):
-    model = None
-    field_name = None
-    _target_model = None
 
-    object_type_name = "video"
-
-    def widget_overrides(self):
-        return {self.field_name: AdminVideoChooser}
+    def __init__(self, field_name, disable_comments=None, permission=None, **kwargs):
+        kwargs['widget'] = AdminVideoChooser
+        super().__init__(field_name, disable_comments=disable_comments, permission=permission, **kwargs)

wagtailvideos/templates/wagtailvideos/chooser/results.html

@@ -13,7 +13,7 @@
                     title="{{ video.title }}"
                     href="{% url 'wagtailvideos_chooser:chosen' video.id %}"
                 >
-                    <div class="image">
+                    <figure>
                         {% if video.thumbnail %}
                             <img
                                 src="{{ video.thumbnail.url }}"
@@ -30,8 +30,8 @@
                                 alt=""
                             />
                         {% endif %}
-                    </div>
-                    <h3>{{ video.title|ellipsistrim:60 }}</h3>
+                        <figcaption>{{ video.title|ellipsistrim:60 }}</figcaption>
+                    </figure>
                 </a>
             </li>
         {% endfor %}

wagtailvideos/templates/wagtailvideos/videos/results.html

@@ -21,7 +21,9 @@
                 <a class="image-choice" href="{% url 'wagtailvideos:edit' video.id %}">
                     <figure>
                         {% if video.thumbnail %}
-                        <img src="{{ video.thumbnail.url }}" height="165" width="165" class="show-transparency" alt="{% trans 'Video thumbnail' %}"/>
+                            <img src="{{ video.thumbnail.url }}" height="165" width="165" class="show-transparency" alt="{% trans 'Video thumbnail' %}"/>
+                        {% else %}
+                            <img width="165" height="165" class="show-transparency" alt="" />
                         {% endif %}
                         <figcaption>{{ video.title|ellipsistrim:60 }}</figcaption>
                     </figure>