Modify

Ticket #34 (new feature)

Opened 10 years ago

Last modified 10 months ago

Ability to add videos from other sites

Reported by: and Owned by:
Priority: critical Milestone: 4.5.3
Component: PlumiVideoProduct Severity: New Ticket
Keywords: Cc:
Who will test this: And

Description (last modified by anna) (diff)

User Story

Create the ability to take videos from Vimeo, YouTube? and add them to a Plumi site.

This will enable broader sharing of content. Videomakers will not have to re-upload their video to another site (the Plumi site) if they have already done so elsewhere. It will also allow site editors to curate content from other sites into a Plumi site.

  • external videos offered as similar UX to publishing ordinary videos, but instead of uploading a video the user can add a link / embed code from Vimeo, Youtube or other site
  • ability to list external videos within all the usual listings throughout the site, but also separately from normal videos on the site if we choose (not sure yet in which listings we need to differentiate them, we should just have this ability if needed)

Video Publish Form - UI

The place to change HTML etc. for buttons in videoaddform.pt in plumi.content

CONFIRMED WORKING

  1. error validation - no message on short summary, brings you back to the buttons not to the page itself . Some validation errors don't create an 'Error:' box. Currently, the publish form needs that error box to detect that the form has been posted once and so to hide the big 'Upload' and 'Paste Link' buttons and show the form instead when the page loads. I've fixed three of these but apparently adding too much text to the summary creates an error that doesn't trigger the error box (there is just a red outline around the relevant field). Two possible resolutions: (1) fix the fields with non-standard validation behaviours, or (2) find a more robust way of letting javascript know the form has errors (eg. render something hidden) .. or both ideally.

this is inconvenient/confusing in some circumstances but probably not critical

  1. move thumbnail attachment to underneath add video file - and add the red dot for required field (even if it is not *actually* required). Change helper text ONLY FOR EXTERNAL VIDEOS to say "Add a thumbnail image for this video".

REMAINING TASKS

  1. issue with other videos by this author - broken image is displayed where the default image should show BUT duration is missing from all of them (internal and external)

 http://staging.engagemedia.org:9080/Members/anna/videos/another-text/view

see attached screenshot.

Attachments

Screen Shot 2014-12-16 at 5.50.19 PM.jpg Download (486.5 KB) - added by anna 3 years ago.
Nice big buttons
Screen Shot 2014-12-16 at 8.21.51 PM.jpg Download (13.2 KB) - added by anna 3 years ago.
default-thumbnail.gif Download (39.7 KB) - added by anna 3 years ago.
default-thumbnail.png Download (34.2 KB) - added by anna 3 years ago.
plumi-default-thumbnail.jpg Download (57.8 KB) - added by anna 3 years ago.
Screen Shot 2014-12-23 at 11.35.19 AM.jpg Download (131.1 KB) - added by anna 3 years ago.
short summary error - took me back to buttons but no error msg
Screen Shot 2015-04-29 at 4.54.31 PM.jpg Download (29.1 KB) - added by anna 2 years ago.
other videos by this author - no duration or image

Change History

comment:1 Changed 10 years ago by anonymous

Talking to someone from foe today they were looking at updating to the latest version of kupu which allows embedded videos. This is a bit simpler than what I was envisioning but could be good to have available.

Other possibilities include  http://plone.org/products/atgooglevideo/

comment:2 Changed 8 years ago by and

  • Milestone changed from 3.2 to 3.1

comment:3 Changed 7 years ago by and

  • Owner changed from andycat to pushpa
  • Component changed from SocialSoftware to PlumiVideoProduct
  • Who will test this set to And

comment:4 Changed 7 years ago by and

  • Milestone changed from 3.1 to 3.2

comment:5 Changed 7 years ago by anna

  • Priority changed from critical to major
  • Type changed from defect to feature
  • Milestone changed from 4.3 to 4.1 Beta

comment:6 Changed 7 years ago by and

  • Owner pushpa deleted

comment:7 Changed 7 years ago by and

  • Priority changed from major to critical

comment:8 Changed 7 years ago by mike

we need to think about how videos hosted on external sites will be displayed for the user.

the viewer of these videos will have a different experience to viewing a normal video - you will not be able to download it. we need to then explain in the UI that this is the case...

or should videos hosted externally be quite separate from internal videos?

  • anna

comment:9 Changed 7 years ago by anna

  • Description modified (diff)

Ok, we discussed how these videos might work. The proposal has been added to the ticket description.

comment:10 Changed 7 years ago by anna

  • Description modified (diff)

comment:11 Changed 7 years ago by anna

  • Description modified (diff)

Mike suggests using the same PlumiVideo? content type, with option to add link / embed code instead of upload a file (but still be able to differentiate these videos from normal videos, and thus list them differently on the site), and also to split off the changes to publish form into another ticket.

Ticket for changes to publish form: http://plumi.org/ticket/529

comment:12 Changed 7 years ago by anna

  • Milestone changed from 4.1 Beta 1 to Re-Factoring Release

Moving this to the re-factoring milestone, as Unweb advise that this should be done after changing Plumi video content type into schema extender

comment:13 Changed 7 years ago by anna

  • Priority changed from critical to blocker

comment:14 Changed 6 years ago by dimo

  • Type changed from feature to enhancement
  • Milestone changed from 4.2 Beta (Features - Content Sharing Focus) to 4.3 Beta (Re-Design of EM.org & Plumi)

This is not something that can be completed in this milestone & contract. My suggestion is to do it in parallel with the video publish form redesign

comment:15 Changed 6 years ago by and

  • Priority changed from blocker to major
  • Milestone changed from 4.3 Beta (Re-Design of EM.org & Plumi) to 4.2 Beta (Features - Content Sharing Focus)

I will convert the remaining 4.2 tickets to a 4.3 milestone and shift the rest back a version also. Major means it won't actually go in 4.2.

comment:16 Changed 6 years ago by dimo

  • Milestone changed from 4.3 Beta1 to 4.5 Beta Refactoring

comment:17 Changed 6 years ago by and

In previous conversations we discussed doing this as part of the publish form refactor so that it was already integrated, if we're doing the refactor in the 4.3 release shouldn't add it into 4.3?

comment:18 Changed 5 years ago by anna

  • Type changed from enhancement to feature
  • Severity set to Ready for Testing
  • Milestone changed from 4.8 to 4.6

This apparently can't happen in 4.5, but moving to 4.6 to indicate this as a priority.

comment:19 Changed 5 years ago by and

  • Priority changed from major to blocker

comment:20 Changed 5 years ago by anna

  • Description modified (diff)

comment:21 Changed 4 years ago by anonymous

I will use Plumi if this is implemented!

comment:22 Changed 4 years ago by and

Let us know if you can help!

comment:23 Changed 3 years ago by anna

  • Priority changed from blocker to critical
  • Milestone changed from 4.6 to 4.5.2

comment:24 Changed 3 years ago by anna

  • Severity changed from Ready for Testing to New Ticket

comment:25 Changed 3 years ago by anna

  • Description modified (diff)
  • Milestone changed from 4.5.3 to 4.5.2

comment:26 Changed 3 years ago by anna

Testing feedback from Andrew:

  • Is it possible to make the option to add the external video be part of adding an existing video? Ie. that the option is present to you at the top of the page?
  • It seems that the meta data is the same as the old publish form rather than the new one. Can we not use the new system? It's quite difficult to add categories etc, license etc.
  • Text at the top "The link to the video on the external site (on Vimeo, etc.)." I think should include YT also as an example
  • Can you tell me about the listing of the videos in the categories? Will they appear in the country/topic etc with thumbnail and description?
  • I realise this may be beyond what is possible now but have you investigated what it would take for amara to work on these videos?
  • Do the videos appear on the author page? (I can't seem to access my admin privileged account on demo so can't test this - if you want to make test000 an admin that'd be great.
  • Will the videos appear in the 'other videos by this member' section also?
  • I couldn't find any licensing option in the form, eg. for CC

comment:27 Changed 3 years ago by anna

We would have to leave anything regarding Amara out of the question for now, but we should try to address all other points as listed above.

comment:28 Changed 3 years ago by anna

  • Description modified (diff)

comment:29 Changed 3 years ago by anna

  • Description modified (diff)

comment:30 Changed 3 years ago by anna

  • Description modified (diff)

Cool, Sam has got the publish form working with toggle between video link and upload:  http://staging.engagemedia.org:9080/Members/anna/videos/@@publish_video

There are a number of issues to address of course, I'll log them in the description above.

comment:31 Changed 3 years ago by anna

  • Description modified (diff)

comment:32 Changed 3 years ago by anna

  • Description modified (diff)

comment:33 Changed 3 years ago by anna

  • Description modified (diff)

Sam - can we try using some nice big buttons like this?

 http://codepen.io/cheeriottis/pen/inluv

See customised version below..

<html lang="en">
<head>
  <meta name="author" content="www.twitter.com/cheeriottis">
  <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="css/core.css">
</head>
<body>
  <a href="#" class="action-button shadow animate blue">Upload File</a>
  <a href="#" class="action-button shadow animate red">Paste Link</a>
</body>
</html>
body
{
	padding: 50px;
}

.animate
{
	transition: all 0.1s;
	-webkit-transition: all 0.1s;
}

.action-button
{
	position: relative;
	padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
	border-radius: 10px;
	font-family: 'Oswald';
	font-size: 25px;
	color: #FFF;
	text-decoration: none;	
}

.blue
{
	background-color: #41B5E2;
	border-bottom: 5px solid #0E728B;
	text-shadow: 0px -2px #2980B9;
}

.red
{
	background-color: #0E728B;
	border-bottom: 5px solid #252830;
	text-shadow: 0px -2px #252830;
}

.green
{
	background-color: #82BF56;
	border-bottom: 5px solid #669644;
	text-shadow: 0px -2px #669644;
}

.yellow
{
	background-color: #F2CF66;
	border-bottom: 5px solid #D1B358;
	text-shadow: 0px -2px #D1B358;
}

.action-button:active
{
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}

Changed 3 years ago by anna

Nice big buttons

comment:34 Changed 3 years ago by anna

See screenshot attached of nice big CSS3 buttons.

Changed 3 years ago by anna

comment:35 Changed 3 years ago by anna

  • Description modified (diff)

Updated remaining tasks in description.

comment:36 Changed 3 years ago by anna

  • Description modified (diff)

comment:37 Changed 3 years ago by anna

  • Description modified (diff)

comment:38 Changed 3 years ago by anna

buttons HTML:

<p style="text-align: center;">

<a href="#" data-mode="upload" class="button addModeSelector" style="width: auto; display: inline-block; margin: 20px; padding: 20px; font-size: 160%;">Upload File</a> <a href="#" data-mode="external" class="button addModeSelector" style="width: auto; display: inline-block; margin: 20px; padding: 20px; font-size: 160%;">Paste Link</a> <input type="submit" style="visibility: hidden;"/>

1:12

</p>

comment:39 Changed 3 years ago by anna

  • Description modified (diff)

comment:40 Changed 3 years ago by anna

  • Description modified (diff)

comment:41 Changed 3 years ago by anna

  • Description modified (diff)

found a UI bug. having initially chosen Upload File, and then filling out info on first tab, but then when clicking Save Changes on the Categorise page, the page reloads to show those two buttons again

it *has* remembered the categorisation fields, which is great, it just shows those buttons again. so not the *worst* but if it could go back to the Categorise tab, not those buttons again, that would be great...

comment:42 Changed 3 years ago by anna

  • Description modified (diff)

comment:43 Changed 3 years ago by anna

NOTE: extracting a thumbnail from other video services is particularly hard because oembed gives a URL - that would need to be downloaded and added somehow

comment:44 Changed 3 years ago by anna

more notes on thumbnail:

no hotlinking? too unreliable?

2:55 sstainsby we could do that, sotring it in a different field i suppose actually, just render it on the fly that could work nicely

comment:45 Changed 3 years ago by anna

all items but 4. (listings) have been done, anna to test on next restart of staging

sam working on listings now

comment:46 Changed 3 years ago by anna

  • Description modified (diff)

excellent! all those bugs squashed.

just added a couple more tasks

  1. this video view page needs formatting correctly as per other videos:

 http://staging.engagemedia.org:9080/Members/anna/videos/aquaporko/

  1. apply plumi_workflow as per normally uploaded videos
  1. thumbnails - use default image OR make required field

comment:47 Changed 3 years ago by anna

  • Description modified (diff)

Changed 3 years ago by anna

Changed 3 years ago by anna

comment:48 Changed 3 years ago by anna

Just added a default thumbnail for EngageMedia skin "default-thumbnail".png/gif

Changed 3 years ago by anna

comment:49 Changed 3 years ago by anna

Just added a default thumbnail for Plumi skin "plumi-default-thumbnail.jpg"

Changed 3 years ago by anna

short summary error - took me back to buttons but no error msg

comment:50 Changed 3 years ago by anna

bug on external video publish i filled out the whole form and then clicked save changes at the bottom of Categorise tab and it didn't save the object it took me back to here  http://staging.engagemedia.org:9080/Members/anna/videos/@@publish_video and i can see Upload File Paste Link ah - i see what happened error validation my short summary was too long but i couldn't see my page of info, just the buttons

see screenshot

comment:51 Changed 3 years ago by anna

  • Description modified (diff)

comment:52 Changed 3 years ago by anna

  • Description modified (diff)

comment:53 Changed 3 years ago by anna

  • Description modified (diff)

comment:54 Changed 3 years ago by anna

  • Description modified (diff)

comment:55 Changed 3 years ago by anna

  • Description modified (diff)

comment:56 Changed 3 years ago by sam

OK, an number of issues, hopefully minor, prevented this from being deployed today:

  1. /latestvideos - this view works on my local Plumi both with and without the em.skin applied; frustratingly, this is not the case on staging, as it still omits external videos. At this point we don't know why.
  1. Ditto for: "Other videos by this author listing - video view pages  http://staging.engagemedia.org:9080/Members/AIPP/videos/Our-Forest-Our-Life-English/view".. I strongly suspect this to be fixed when 1 is fixed.
  1. The default view for an external video is fairly plain and doesn't match the appearance of the uploaded video view. It uses virtually the same template as uploaded videos, but I believe Diazo is not detecting that and applying anything to it. That should be easy to fix for someone that knows Diazo well. Alternatively, I thought about trying to use the uploaded videos 'video_view' (instead of the one I created: 'external_video_view') .. however that template needs a real uploaded file otherwise it breaks. Possibly though it could be modified to work for both - I haven't investigated how hard that would be.
  1. Some validation errors don't create an 'Error:' box. Currently, the publish form needs that error box to detect that the form has been posted once and so to hide the big 'Upload' and 'Paste Link' buttons and show the form instead when the page loads. I've fixed three of these but apparently adding too much text to the summary creates an error that doesn't trigger the error box (there is just a red outline around the relevant field). Two possible resolutions: (1) fix the fields with non-standard validation behaviours, or (2) find a more robust way of letting javascript know the form has errors (eg. render something hidden) .. or both ideally.
  1. Workflow - the PlumiVideo? workflow isn't being applied even though PlumeExternalVideo? implements the IPlumiVideo interface. In particular, the external video starts off in the 'private' state No ideas why as yet. There is no simple workflow.xml in the profile. However, considering parts of the PlumiVideo? workflow involve processing, it might just be better to use a variation of Plone simple publishing workflow, modified to make the initial state 'pending'.
  1. Duration - even though the video templates omit the duration box if there is none, it appears Diazo adds a box anyway and you end up with a dot which is probably a collapsed border. This is likely best fixed at the Diazo level.
Last edited 3 years ago by sam (previous) (diff)

comment:57 Changed 3 years ago by anna

note: there's more to Plumi workflow, so let's make sure we replicate that

comment:58 Changed 2 years ago by sam

Updates from today:

  1. Fixed by just including the external video type in the relevant collection.
  1. No work done on this yet.
  1. This appears to be fixed by 5 on my local copy, but didn't fix the staging site. More work to come next time.
  1. No work done on this yet.
  1. Fixed. Checked into a new plumi.app branch called 'externalvideo'.
  1. (was 4!): Duration - No work done on this yet.

comment:59 Changed 2 years ago by sam

New problem:

  1. Setting an external video to 'Featured' breaks the home page. (AttributeError: @@embed_view)
Last edited 2 years ago by sam (previous) (diff)

comment:60 Changed 2 years ago by sam

Issue 3 is now fixed.

comment:61 Changed 2 years ago by sam

Adding here the issue mentioned in mailing list:

8.After doing some work on the external video feature, namely changing the workflow of external videos to be the plumi workflow, I put those changes into action by deactivating and reactivating plumi.app ('Plumi') in the control panel for the staging site. This causes an immediate bug with an exception thrown from plumi.content's brain_rendering.py

Module plumi.content.browser.brain_rendering, line 98, in video_tag IndexError?: list index out of range

this comes from the line 'video = '... below : def video_tag(self):

path =

self.video.url[len(self.parent.context.absolute_url())+1:]+'/@@embed_view'

self.requestwidth? = 525 html = self.parent.context.restrictedTraverse(path)(self.request)

video = '<video' + html.split('<video')[1].split('<div

id="portlets-footer"')[0].split('<div id="portal-footer">')[0]

return video

.. and the root cause seems to be that the @@embed_view view is returning an empty string. eg.

 http://staging.engagemedia.org:9080/Members/AIPP/videos/Our-Forest-Our-Life-Burmese.mp4.mp4/@@embed_view

-> (nothing)

... leading to the string manipulation code to fail.

I suspect that view comes from collective.transcode.star, but

reinstalling that seems to have no effect.

comment:62 Changed 2 years ago by sam

Issue 8 is fixed. It seems that @@embed_view is only populated for transcoded videos, so this is a general bug. We've fixed this by avoiding the string manipulation when the @@embed_view view returns nothing.

Last edited 2 years ago by sam (previous) (diff)

comment:63 Changed 2 years ago by sam

Issue 7 is fixed .. 'featured' external videos will no longer break the home page.

comment:64 Changed 2 years ago by anna

2, 4 and 6 remain:

2 this view works on my local Plumi both with and without the em.skin applied; frustratingly, this is not the case on staging, as it still omits external videos. At this point we don't know why. "Other videos by this author listing - video view pages  http://staging.engagemedia.org:9080/Members/AIPP/videos/Our-Forest-Our-Life-English/view"..

4 Some validation errors don't create an 'Error:' box. Currently, the publish form needs that error box to detect that the form has been posted once and so to hide the big 'Upload' and 'Paste Link' buttons and show the form instead when the page loads. I've fixed three of these but apparently adding too much text to the summary creates an error that doesn't trigger the error box (there is just a red outline around the relevant field). Two possible resolutions: (1) fix the fields with non-standard validation behaviours, or (2) find a more robust way of letting javascript know the form has errors (eg. render something hidden) .. or both ideally.

this is inconvenient/confusing in some circumstances but probably not critical

  1. Duration - even though the video templates omit the duration box if there is none, it appears Diazo adds a box anyway and you end up with a dot which is probably a collapsed border. This is likely best fixed at the Diazo level.

this is cosmetic and likely very easy

Sam is now proceeding with number 2.

comment:65 Changed 2 years ago by sam

2 is fixed.

comment:66 Changed 2 years ago by anna

  • Description modified (diff)

comment:67 Changed 2 years ago by anna

  • Description modified (diff)
  1. issue with other videos by this author - no image or duration

 http://staging.engagemedia.org:9080/Members/anna/videos/another-text/view

see attached screenshot.

Changed 2 years ago by anna

other videos by this author - no duration or image

comment:68 Changed 2 years ago by anna

  • Description modified (diff)

comment:69 Changed 2 years ago by anna

  • Description modified (diff)

OK, seems we have had a little confusion with numbers in this ticket, but here is a consolidation of remaining tasks from the description with those remaining from Sam's comments, and also from another bug I just found.

So currently looking at six live issues.

REMAINING TASKS

  1. Ensure videos appear in listings throughout the site as consistent with uploaded videos - titles, thumbnails, duration etc.

CONFIRMED WORKING

NOT WORKING YET (TESTED):

  1. error validation - no message on short summary, brings you back to the buttons not to the page itself . Some validation errors don't create an 'Error:' box. Currently, the publish form needs that error box to detect that the form has been posted once and so to hide the big 'Upload' and 'Paste Link' buttons and show the form instead when the page loads. I've fixed three of these but apparently adding too much text to the summary creates an error that doesn't trigger the error box (there is just a red outline around the relevant field). Two possible resolutions: (1) fix the fields with non-standard validation behaviours, or (2) find a more robust way of letting javascript know the form has errors (eg. render something hidden) .. or both ideally.

this is inconvenient/confusing in some circumstances but probably not critical

  1. Duration - even though the video templates omit the duration box if there is none, it appears Diazo adds a box anyway and you end up with a dot which is probably a collapsed border. This is likely best fixed at the Diazo level.

this is cosmetic and likely very easy

  1. apply plumi_workflow as per normally uploaded videos - put it in the profile - check and copy across anything else from profile including the views
  1. move thumbnail attachment to underneath add video file - and add the red dot for required field (even if it is not *actually* required). Change helper text ONLY FOR EXTERNAL VIDEOS to say "Add a thumbnail image for this video".
  1. issue with other videos by this author - no image or duration

 http://staging.engagemedia.org:9080/Members/anna/videos/another-text/view

see attached screenshot.

comment:70 Changed 2 years ago by anna

note: was getting 502 errors when loading pages towards end of our day

and strange response when loading front page: "Not enough data in request or socket error"

check in on this next week...

comment:71 Changed 2 years ago by sam

Quick note: Issue 6 is caused by a div with class"duration" being added by em/skin/theme_resources/rules.xml even if there isn't a duration.

comment:72 Changed 2 years ago by sam

I believe 14 is already done - probably needs a fair bit of testing.

comment:73 Changed 2 years ago by sam

Item 6 (duration display) is done.

Last edited 2 years ago by sam (previous) (diff)

comment:74 Changed 2 years ago by sam

Item 1 is completed as taxonomy listing are now fixed.

comment:75 Changed 2 years ago by anna

  • Description modified (diff)

so only 4, 17, 18 remain - description has been updated

comment:76 Changed 2 years ago by sam

Point 17 is implemented and ready for testing.

comment:77 Changed 2 years ago by anna

tried to test this but testing site is returning 502 on publishing external videos. no space for blob storage.

comment:78 Changed 2 years ago by anna

Regarding testing of 17:

The form looks good with re-positioned thumbnail and required dot.

However - issue 4 is provoked when uploading *without* a thumbnail.

And a new issue that must have cropped up during recent changes

  1. When uploading a video of 681 kB, the file appeared to successfully upload using widget BUT an error was thrown

Error

There were some errors.

This error is obviously unspecified. Difficult to test properly with jammed blob storage - so perhaps is due to this...

in the log: Products.MailHost?.MailHost?.MailHostError?: No message recipients designated <-- I guess disabling the email notifications also causes errors :-(

See ticket here about notifications errors:  http://trac.plumi.org/ticket/992#comment:1

comment:79 Changed 2 years ago by sam

Point 4 is implemented and ready for testing.

comment:80 Changed 2 years ago by sam

PS: the fix for 4 should pretty much cover any cases with verification errors that don't create an 'Error:' box at the top of the form .. not just for the summary text. Ideally, all such errors should create an error box like that, but that's a different issue not related to external videos.

Last edited 2 years ago by sam (previous) (diff)

comment:81 Changed 2 years ago by anna

  • Description modified (diff)

comment:82 Changed 2 years ago by sam

Trying to use hasThumbnailImage in VideoView to fix 18. However, it appears to always return True for any kind of video, so this will need to be fixed.

comment:83 Changed 2 years ago by anna

  • Description modified (diff)

Tried to test a few times but getting 504 errors on publishing videos. Will wait until new test site is set up.

comment:84 Changed 11 months ago by anna

This is very close, however as work has stalled for now, we should also explore this option:

 https://pypi.python.org/pypi/sc.embedder

I suppose the problem is - how to include it within listings and taxonomy

comment:85 Changed 10 months ago by anna

  • Milestone changed from 4.5.2 to 4.5.3

Pushing this to a subsequent release.

View

Add a comment

Modify Ticket

Action
as new
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.