Skip to content

Commit

Permalink
Add simple AssetCreateView #4647
Browse files Browse the repository at this point in the history 
Create basic form for creating a Mediathread asset based on an
external image or video source.
  • Loading branch information
@nikolas
nikolas committed Oct 4, 2022
1 parent 8668729 commit 1befda5
Show file tree
Hide file tree
Showing 5 changed files with 102 additions and 22 deletions.
16 changes: 8 additions & 8 deletions mediathread/assetmgr/tests/test_views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
)
Expand Down Expand Up @@ -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)

Expand All @@ -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)
Expand All @@ -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')
Expand All @@ -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

Expand Down Expand Up @@ -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)

Expand All @@ -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)

Expand Down Expand Up @@ -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()
Expand Down
4 changes: 2 additions & 2 deletions mediathread/assetmgr/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -36,7 +36,7 @@
path('<int:asset_id>/annotations/<int:annot_id>/',
AssetWorkspaceView.as_view(), {}, 'annotation-view'),

path('create/', UploadedAssetCreateView.as_view(), name='asset-create'),
path('create/', AssetCreateView.as_view(), name='asset-create'),

path('create/<int:asset_id>/annotations/', annotation_create),

Expand Down
7 changes: 4 additions & 3 deletions mediathread/assetmgr/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')

Expand Down Expand Up @@ -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']

Expand Down
90 changes: 84 additions & 6 deletions mediathread/templates/main/collection_add.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -179,16 +179,71 @@ <h6 class="card-title mt-2">IMAGE</h6>
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">Import Media</h5>

<form method="POST" action="{% url 'asset-create' %}">
{% csrf_token %}
<div class="form-group">
<label for="import-source-url">
Source URL
</label>
<input type="text"
id="import-source-url"
class="form-control"
name="url"
aria-describedby="sourceURL" />
<small class="form-text text-muted">
Right-click source image and "Copy image address"
</small>
</div>
<img id="imported-thumbnail"
style="display: none;"
class="img-thumbnail mb-2"
alt="Imported image thumbnail" />
<div class="form-group">
<label for="import-form-name">Asset Title</label>
<input type="text"
class="form-control"
id="import-form-name"
name="title" />

<input type="hidden" id="import-form-width"
name="width" />
<input type="hidden" id="import-form-height"
name="height" />
</div>
<button type="submit" class="btn btn-primary">
Import
</button>
</form>

<hr />

<p class="card-text">
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.

<ul><li>Visit the Chrome Web Store and make sure to click Add To Chrome.</li>
<li>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.</li>
<li>You can click the extension to collect single media items from sites like Flickr, YouTube, and Google Images.</li>
<ul>
<li>
Visit the Chrome Web Store and
make sure to click Add To
Chrome.
</li>
<li>
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.
</li>
<li>
You can click the extension to
collect single media items from
sites like Flickr, YouTube, and
Google Images.
</li>
</ul>

You must be using a browser in the <a href="https://en.wikipedia.org/wiki/Chromium_(web_browser)#Browsers_based_on_Chromium">Chrome family</a>
Expand Down Expand Up @@ -272,6 +327,23 @@ <h5 class="card-title text-center">Import Media</h5>
});
};

/**
* 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."
Expand All @@ -284,6 +356,12 @@ <h5 class="card-title text-center">Import Media</h5>
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);
});
});
</script>
{% endblock %}
7 changes: 4 additions & 3 deletions mediathread/urls.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -284,8 +285,8 @@
path('course/<int:course_pk>/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/<slug:user_name>/', set_user_setting),
Expand Down

0 comments on commit 1befda5

Please sign in to comment.