From 1befda5ac3ddd940a570448f28bcf061784f3706 Mon Sep 17 00:00:00 2001 From: Nikolas Nyby Date: Mon, 3 Oct 2022 19:39:17 -0400 Subject: [PATCH] Add simple AssetCreateView #4647 Create basic form for creating a Mediathread asset based on an external image or video source. --- mediathread/assetmgr/tests/test_views.py | 16 ++-- mediathread/assetmgr/urls.py | 4 +- mediathread/assetmgr/views.py | 7 +- .../templates/main/collection_add.html | 90 +++++++++++++++++-- mediathread/urls.py | 7 +- 5 files changed, 102 insertions(+), 22 deletions(-) diff --git a/mediathread/assetmgr/tests/test_views.py b/mediathread/assetmgr/tests/test_views.py index 6d2112d198..e37f91206d 100644 --- a/mediathread/assetmgr/tests/test_views.py +++ b/mediathread/assetmgr/tests/test_views.py @@ -18,7 +18,7 @@ EMBED_WIDTH, EMBED_HEIGHT, asset_workspace_courselookup, RedirectToExternalCollectionView, - RedirectToUploaderView, AssetCreateView, AssetEmbedListView, + RedirectToUploaderView, ExternalAssetCreateView, AssetEmbedListView, _parse_domain, AssetEmbedView, annotation_delete, annotation_create_global, annotation_create, AssetUpdateView ) @@ -86,7 +86,7 @@ def test_sources_from_args(self): 'image': 'x' * 5000, # too long 'url': 'https://www.youtube.com/abcdefghi'} request = RequestFactory().post('/save/', data) - sources = AssetCreateView.sources_from_args(request) + sources = ExternalAssetCreateView.sources_from_args(request) self.assertEquals(len(sources.keys()), 0) @@ -95,7 +95,7 @@ def test_sources_from_args(self): 'image': 'https://www.flickr.com/', 'image-metadata': ['w720h526;text/html']} request = RequestFactory().post('/save/', data) - sources = AssetCreateView.sources_from_args(request) + sources = ExternalAssetCreateView.sources_from_args(request) self.assertEquals(len(sources.keys()), 2) self.assertEquals(sources['image'].url, 'https://www.flickr.com/') self.assertTrue(sources['image'].primary) @@ -111,7 +111,7 @@ def test_sources_from_args(self): 'metadata-description': 'Video description', } request = RequestFactory().post('/save/', data) - sources = AssetCreateView.sources_from_args(request) + sources = ExternalAssetCreateView.sources_from_args(request) self.assertEquals(len(sources.keys()), 2) self.assertEquals(sources['video'].url, 'http://www.example.com/video.mp4') @@ -120,7 +120,7 @@ def test_sources_from_args(self): self.assertEquals(sources['video'].height, 358) def test_parse_user(self): - view = AssetCreateView() + view = ExternalAssetCreateView() request = RequestFactory().get('/') request.course = self.sample_course @@ -222,7 +222,7 @@ def test_asset_create_via_bookmarklet(self): request.user = self.instructor_one request.course = self.sample_course - view = AssetCreateView() + view = ExternalAssetCreateView() view.request = request response = view.post(request) @@ -240,7 +240,7 @@ def test_asset_create_via_bookmarklet(self): request.user = self.instructor_one request.course = self.sample_course - view = AssetCreateView() + view = ExternalAssetCreateView() view.request = request response = view.post(request) @@ -1025,7 +1025,7 @@ def test_update_primary_and_thumb(self): self.assertEquals(self.asset.thumb_url, 'new thumb') -class UploadedAssetCreateViewTest(MediathreadTestMixin, TestCase): +class AssetCreateViewTest(MediathreadTestMixin, TestCase): def setUp(self): self.setup_sample_course() self.setup_alternate_course() diff --git a/mediathread/assetmgr/urls.py b/mediathread/assetmgr/urls.py index 3bf275814b..eafb65a81d 100644 --- a/mediathread/assetmgr/urls.py +++ b/mediathread/assetmgr/urls.py @@ -9,7 +9,7 @@ MostRecentView, annotation_create, annotation_create_global, annotation_save, annotation_delete, asset_delete, final_cut_pro_xml, AnnotationCopyView, PDFViewerDetailView, S3SignView, - UploadedAssetCreateView + AssetCreateView ) from mediathread.djangosherd.apiviews import SherdNoteCreate from mediathread.assetmgr.apiviews import AssetUpdate @@ -36,7 +36,7 @@ path('/annotations//', AssetWorkspaceView.as_view(), {}, 'annotation-view'), - path('create/', UploadedAssetCreateView.as_view(), name='asset-create'), + path('create/', AssetCreateView.as_view(), name='asset-create'), path('create//annotations/', annotation_create), diff --git a/mediathread/assetmgr/views.py b/mediathread/assetmgr/views.py index c1141f685a..90b649b85d 100644 --- a/mediathread/assetmgr/views.py +++ b/mediathread/assetmgr/views.py @@ -155,7 +155,7 @@ def post(self, request): # This view is used by Mediathread's browser extension, so disable CSRF # until we implement this in the extension. @method_decorator(csrf_exempt, name='dispatch') -class AssetCreateView(View): +class ExternalAssetCreateView(View): OPERATION_TAGS = ('jump', 'title', 'noui', 'v', 'share', 'as', 'set_course', 'secret') @@ -328,9 +328,10 @@ def post(self, request): return HttpResponseRedirect(asset_url) -class UploadedAssetCreateView(LoggedInCourseMixin, View): +class AssetCreateView(LoggedInCourseMixin, View): """ - View for creating an Asset via an uploaded media object. + View for creating an Asset via an uploaded media object, or + a piece of media imported via the import form. """ http_method_names = ['post'] diff --git a/mediathread/templates/main/collection_add.html b/mediathread/templates/main/collection_add.html index 0bacbdfa6b..f9b2c8b99b 100644 --- a/mediathread/templates/main/collection_add.html +++ b/mediathread/templates/main/collection_add.html @@ -179,16 +179,71 @@
IMAGE
Import Media
+ +
+ {% csrf_token %} +
+ + + + Right-click source image and "Copy image address" + +
+ +
+ + + + + +
+ +
+ +
+

- Install Mediathread’s Google Chrome - extension to import assets like video, audio, and + Alternatively, you can install + Mediathread’s Google Chrome extension + to import assets like video, audio, and images into this course from various sites across the web. -

  • Visit the Chrome Web Store and make sure to click Add To Chrome.
    • -
  • Once added to your browser, you can click on the Extension icon next - to the Address Bar to pin the Mediathread extension for easier access.
    • -
  • You can click the extension to collect single media items from sites like Flickr, YouTube, and Google Images.
    • +
      +
    • + Visit the Chrome Web Store and + make sure to click Add To + Chrome. +
      • +
    • + Once added to your browser, you + can click on the Extension icon + next to the Address Bar to pin + the Mediathread extension for + easier access. +
      • +
    • + You can click the extension to + collect single media items from + sites like Flickr, YouTube, and + Google Images. +
    You must be using a browser in the Chrome family @@ -272,6 +327,23 @@
    Import Media
    }); }; + /** + * Refresh form display when import url changes. + */ + const refreshImportForm = function(sourceUrl) { + const thumbnail = document.getElementById('imported-thumbnail'); + thumbnail.src = sourceUrl; + thumbnail.style.display = 'block'; + + jQuery(thumbnail).on('load', function() { + console.log('image load!'); + document.getElementById('import-form-width').value = + thumbnail.naturalWidth; + document.getElementById('import-form-height').value = + thumbnail.naturalHeight; + }); + }; + jQuery(document).ready(function() { {% ifequal msg "upload" %} var msg = "Your media file submission is being processed.\nYou will receive an e-mail when it is ready." @@ -284,6 +356,12 @@
    Import Media
    jQuery("a.upload_button").click(function(evt) { jQuery(this).parent().submit(); }); + + // In media import form, listen for image URL. + const importSourceUrl = document.getElementById('import-source-url'); + importSourceUrl.addEventListener('change', function(e) { + refreshImportForm(e.target.value); + }); }); {% endblock %} diff --git a/mediathread/urls.py b/mediathread/urls.py index 71cb443f1a..2de7efe262 100644 --- a/mediathread/urls.py +++ b/mediathread/urls.py @@ -23,7 +23,8 @@ AssetDetailView, ReactAssetDetailView, TagCollectionView, RedirectToExternalCollectionView, RedirectToUploaderView, - AssetCreateView, BookmarkletMigrationView, AssetUpdateView) + ExternalAssetCreateView, BookmarkletMigrationView, AssetUpdateView +) from mediathread.main.forms import CustomRegistrationForm from mediathread.main.views import ( error_500, @@ -284,8 +285,8 @@ path('course//reports/', include('mediathread.reports.urls')), - # Bookmarklet, Wardenclyffe, Staff custom asset entry - path('save/', AssetCreateView.as_view(), name='asset-save'), + # Browser Extension, Wardenclyffe, Staff custom asset entry + path('save/', ExternalAssetCreateView.as_view(), name='asset-save'), path('update/', AssetUpdateView.as_view(), name='asset-update-view'), path('setting//', set_user_setting),