Overview:

The current church media page looks like this (ex

http://mc.purelogics.info/river/video):

In this large project, we will remove the tabs (Photos, Videos, Audio & Files) and just
have 1 page that is filterable by type (like we did with the Community tab).

We will also go through each media type (Photos, Videos, Audio, Documents) and
make their display as uniform as possible. So please keep in mind that we’re trying
to simplify and reuse as much of the UI and comment functionality as we can for
each type.

Here is a breakdown of the tasks in this spec:

1) Picture display on the Media page

2) Converting the existing pictures into this new format
3) New picture detail page
4-6) Changes (1) - (3) for videos
7-9) Changes (1) – (3) for documents
10-12) Changes (1) – (3) for audio
13/14/15/16) New upload flows for pictures, videos, documents, audio
17) Church admin controls
18) New church media page

The new church media page will look like this when we’re done (see attached
church_media_page.png for full mockup and #18 for specs):
1) Picture display:

a) For each comment on the photo, display the first X character of each
comment (same X character snippet that we use in Explore -> Posts page)

b) The commenter’s name is in 8-pt #336799font followed by a semicolon:

The name is a link to the user’s MC profile

c) If there are less than 3 comments, display all the comments. And then an
“add comment” link (in 9-pt #336799 font) after the last comment

d) When the user clicks on “Add comment” – let’s do an AJAX load of a

comment box:

The “Comment” button is an html button (9-pt font). The comment field
expands dynamically if the user enters in a lot of text.

e) If there are 3 or more comments, let’s replace the “Add comment” link
with “View all comments” which will take the user to the photo details
page (see #3)
 f) Clicking on the actual photo takes the user to the photo details page

2) Converting current photos to the new format:

a) Current photos on church photo gallery (ex

http://www.mychurch.org/groups/251038/the-dock-small-group/photos -
joseph.w.suh@gmail.com/mychurch1) are 180px in width(and either
135px or 240px in height). Let’s keep this image size for the new Church
Media page

b) If there is a caption, let’s display that as a comment attributed to the user

who uploaded. So for example, if the user “Rebel with a Cause” added a
caption – it would get displayed as the first comment:

c) Show any pre-existing comments from the photo details page (ex.
http://mc.purelogics.info/river/photos?view=detail&id=1577#comments)
into this new comment format

3) New photo details page. This is the current page

(http://mc.purelogics.info/groups/46080/group-
5/photos?view=detail&id=1102) where all the items that are circled are going
to be removed:
a) Remove the sub-tabs completely (Photos | Videos | Audio & Files)

b) Remove the timestamp at the top

c) Remove the “edit” link next to the timestamp: (only shows for the person
who uploaded the pic):

d) Remove the “add a caption” link below the pic (only shows for the person
who uploaded the pic):
e) Remove the link to “Church Gallery” and link back to the sets

f) Remove the Browse section completely on the right (we are no longer
supporting photo Sets. Instead everything will be a flat hierarchy of
pictures)

g) Remove the gray link and “back to top” link:

h) Remove the timestamp next to each comment:

i) Remove the number of comments:

j) Remove the report link completely:

k) Modify the user’s comment box. We currently have this:

Let’s change it to this:

1. This is the same size box as the prayer comment (from bug 2699). The
comment field box should expand dynamically if the user enters in a lot of
text

2. Let’s remove the timestamp completely

3. In 9-pt #C0C0C0 font, we will have the default text “Write a comment…”

4. When the user clicks on the text input area, the “Add Comment” button
appears, which is left-aligned with the text box above it
 5. The user cannot click “Add Comment” until he writes something in the text
box (he cannot just leave the text as “Write a comment”

l) Move the “Respond” box such that it’s closer and left-aligned with the picture:

m) Above the picture, let’s create the following:

1. Show the “Photo X of Y” text in #666666 8-pt font (left-aligned with the
picture below it)
2. Change the “By [username]” to “Posted by [username]”
3. Keep the delete icon and link (only shows for the person who posted the
picture)
4. Create a “Previous” and “Next” link in 8-pt #336799font which is right-
aligned with the picture below it.

- Clicking “Previous” will go to Photo 2 of 7 in the example above.

- Clicking “Next” will go to Photo 4 of 7 in the example above.
- If we’re on Photo 7 of 7, clicking “Next” will loop back to Photo 1 of 7
- If we’re on Photo 1 of 7, clicking “Previous” will loop back to Photo 7
of 7
- Since we no longer support sets, the number of photos in a library will
represent all photos that were previously in sets or previously in
General

n) After changes (a) – (m), the new photo detail page should look like this (see
church_picture_page.png)
4) Video display

a) Apply the same rules (a – e) from #1

 b) For videos, we’ll have the video title in 10-pt bolded #336799 font above
the first comment

c) Clicking on the video title takes the user to the video detail page (see #6)

d) For the thumbnail, let’s use a180x135px width and height to match the
picture size. This is an embedded video thumbnail, so the viewer will be
able to play the video directly from this page

5) Converting current videos to the new format.

a) All videos from the video page (ex. http://mc.purelogics.info/river/video)

should now be displayed as outlined in #4 on the Church Media page

b) If there is a description in the blog video, let’s display that as a comment

attributed to the user who uploaded. So for example, if the user “krisp”
added a description – it would get displayed as the first comment:

c) Show any pre-existing comments from the video blog details page (ex.
http://mc.purelogics.info/blog/4834/this-is-tsting) into this new comment
format. We will not be showing stars

d) We will still keep existing blogs with videos. So anything that has been
posted to the church video page in the past will remain blog posts. And they
 will also be in the church video page under this new format (and we will
duplicate the comments from the blog post to the church video post)

But moving forward, any video that gets posted to the church page will not
be associated with a blog.

6) New videodetails page. This is the current page

(http://mc.purelogics.info/blog/5858/s) where all church videos are embedded
in blogs:

a) We are going to disassociate church videos with blogs and present them
very similarly to the photo details page outlined in #3: (see
church_video_page.png for full mockup).

b) The first difference between church_video_page and church_picture_page

is that we’re replacing “Photo X of Y” with “Video X of Y”

c) The 2nd difference with church_video_page is that we’ll display the title at
the top of the video
 Besides (b) and (c), the rest of the church_video_page will look identical to
the church_picture_page (see church_video_page_new.png)

d) Just like #5b – if there is a description in the blog video, let’s display it as a
comment attributed to the user who uploaded it.

e) Just like #5c - show any pre-existing comments from the video blog details
page (ex. http://mc.purelogics.info/blog/4834/this-is-tsting) into the new
comment format of this page. We will not be showing stars.

7) Documents display on church media page:

a) We will be using the Slideshare.net API to give us a flash player of

documents. Thus, we will have to convert existing documents to use the
Slideshare player (#8d) and let users upload through Slideshare (#15)

b) Apply the same rules (a – e) from #1

c) For documents, we’ll have the document title in 10-pt bolded #336799 font
above the first comment

d) Clicking on the document title takes the user to the document detail page
(see #8)

e) For the thumbnail, let’s use a180x135px width and height to match the
picture size. This is an embedded flash-document thumbnail, so the viewer
will be able to play the document directly from this page

8) Converting current documents to the new format

a) All documents from the Audio & Files page (ex.

http://mc.purelogics.info/river/media) should now be displayed as outlined in
#7 on the Church Media page

b) If there is a description in the document file, let’s display that as a

comment attributed to the user who uploaded. So for example, if the user
“krisp” added a description – it would get displayed as the first comment:

c) Show any pre-existing comments from the document details page (ex.
http://mc.purelogics.info/church/media/media.php?c=1&id=131) into this new
comment format.

d) Let’s convert all files that are not mp3 to Slideshare-format via their API:
http://www.slideshare.net/developers/documentation. Our API account info is
documented here: https://mychurch.pbworks.com/SlideShare

The Slideshare username/password is mychurch/mychurch1. Slideshare

takes all filetypes that we take and more:

Presentations: PowerPoint - ppt, pps, pot, pptx, potx, ppsx; OpenOffice -

odp, pdf; Apple Keynote - key, zip or pdf.
 Documents & Spreadsheets: Microsoft Office - doc, docx, rtf, xls;
OpenOffice - odt, ods, pdf; iWork Pages.
Can we run a script to convert all files that churches currently have in their
Audio & Files directory (mychurch.org/churchname/media) into Sldieshare
format?

9) New documents details page

This is the current page

(http://mc.purelogics.info/church/media/media.php?c=1&id=131) for a document
file:

a) We are going to use the same format as the photo details page (#3) and
the video details page (#6).

Please see church_document_page_new.png which is identical to

church_video_page_new.png except that we’re replacing “Video X of Y” with
“Document X of Y”

b) Just like #8b – if there is a description in the document, let’s display it as a

comment attributed to the user who uploaded it.

c) Just like #8c - show any pre-existing comments from the file details page
(ex. http://mc.purelogics.info/church/media/media.php?c=1&id=131) into the
new comment format of this page.

The new documents detail page will look like the following (see
church_document_page_new.png for full screenshot):
10)New Audio display on church media page:

a) When the audio player is expanded, let’s limit the width to 180px to match
the width of pictures, videos, and documents.

b) Apply the same rules (a – e) from #1

c) For audio files, we’ll have the document title in 10-pt bolded #336799 font
above the first comment

d) Clicking on the audio title takes the user to the audio detail page (see
#12)

11)Converting current audio to the new format

a) All mp3 files from the Audio & Files page (ex.
http://mc.purelogics.info/river/media) should now be displayed as outlined in
#7 on the Church Media page

b) If there is a description in the audio file, let’s display that as a comment

attributed to the user who uploaded. So for example, if the user “Rebel with
a Cause” added a description – it would get displayed as the first comment:
 c) Show any pre-existing comments from the audio details page (ex.
http://mc.purelogics.info/church/media/media.php?c=1&id=91) into this new
comment format.

12)New audio details page

This is the current page

(http://mc.purelogics.info/church/media/media.php?c=1&id=91) for an audio file:
a) We are going to use the same format as the photo details page (#3), the
video details page (#6), and the document details page (#9)

Please see church_audio_page_new.png which is identical to

church_video_page_new.png except that we’re replacing “Video X of Y” with
“Audio X of Y”

b) Just like #11b – if there is a description in the audio file, let’s display it as a
comment attributed to the user who uploaded it.

c) Just like #11c - show any pre-existing comments from the audio details
page (ex. http://mc.purelogics.info/church/media/media.php?c=1&id=91) into
the new comment format of this page.

The new audio detail page will look like the following (see
church_audio_page_new.png for full screenshot):
13)New photo upload flow:

a) We are removing this page completely since we are no longer supporting

photo sets (ex. http://mc.purelogics.info/church/pics/addpic1.php?c=18827)

b) Instead we’ll take the user straight to:

http://mc.purelogics.info/church/pics/addpic2.php when he goes to Add
Photos

c) After the picture is uploaded, we take the user to the photo detail page
(#3) which we already currently do. We also prompt the user to post to
Facebook (which we also already currently do)

14)New video upload flow.

a) After the user inputs a Youtube URL or selects a video to upload on this
page (http://mc.purelogics.info/church/media/addvideo.php):
We then prompt the user to add a title/description:

1. Let’s change 2 pieces of text:

“Add Video Name and Description” becomes “Add a Video Title”
“Description” becomes “Comment”

2. Let’s make the comment field box smaller.

b) Please remember that the text changes in (a) need to be done for both the “Enter
Youtube URL” and “Select a Video to Upload” options

c) After the user clicks “Save Changes” we currently take him to his blog video post:

Let’s instead take the user to the new video detail page (#6). We are no
longer creating a blog post for videos.
15)New document upload flow. We are going to use Slideshare API which lets us
do the same uploading that Youtube API doesfor videos. Slideshare API lets
users upload pdf, doc, xls, etc through our own MC pages

Here is the API info: http://www.slideshare.net/developers/documentation

(mychurch/mychruch1)

Let’s create a page to add documents:

http://mc.purelogics.info/church/media/adddocs.php)

It will be modeled after the Add Video page:

http://mc.purelogics.info/church/media/addvideo.php)

af9481622d0776ca4184f4e6e8a62652c32a40b0
1665532

Using addvideo.php as a starting point, let’s make the following changes:

a) “Add a new video” title becomes “Add a new document”

b) Remove the “Enter Youtube URL” box and the “-OR-“ text

c) Move the “Select a video to upload” box up and rename it to “Select a file
to upload”

d) Change the “Upload Video” html button to “Upload File”

e) Below the box, let’s put the following text in 9-pt #666666 font:

Max size: 100MB

Supported formats: ppt, pptx, doc, docx, xls, xlsx, pdf, rtf, txt
Changes (a) – (e) should look like this:

f) If the user tries to browse and select a file that is not one of the 9 types we
support, let’s return the same type of error that you currently have for the
video uploads:

g) Once the user selects the right file format and clicks “Upload File” – let’s
take him to a similar interface as the video upload (which we’ve modified in
#14):
 h) The only difference with #14 is the title: “Add Document Title”

i) After the user clicks “Save Changes” let’s take the user to the new
document detail page (#9) with the document embedded on the page.

j) Note: in a future iteration (not this one), we will dispatch a post to the
user’s Facebook stream if he is logged in via FB Connect

16)New audio upload flow:

a) Let’s create a page to add audio files:
http://mc.purelogics.info/church/media/addaudio.php)

b) It will be modeled after the Add Video page:

http://mc.purelogics.info/church/media/addvideo.php)

Using addvideo.php as a starting point, let’s make the following changes:

a) “Add a new video” title becomes “Add a new mp3”

b) Remove the “Enter Youtube URL” box and the “-OR-“ text

c) Move the “Select a video to upload” box up and rename it to “Select a

file to upload”

d) Change the “Upload Video” html button to “Upload Audio”

e) Below the box, let’s put the following text in 9-pt #666666 font:

Max size: 100MB

Supported formats: mp3

Changes (a) – (e) should look like this:

f) If the user tries to browse and select a file that is not an mp3, let’s return
the same type of error that you currently have for the video uploads:

g) Once the user selects the right file format and clicks “Upload Audio” – let’s
take him to a similar interface as the video upload (which we’ve modified in
#14):
h) The only difference with #14 is the title: “Add Audio Title”

i) After the user clicks “Save Changes” let’s take the user to the new audio
detail page (#12) with the audio playerembedded on the page.

j) Note: in a future iteration (not this one), we will dispatch a post to the
user’s Facebook stream if he is logged in via FB Connect
17)New admin controls. Since our goal is to standardize and consolidate the UI
and functionality of all these media types, we are going to simplify the admin
controls.

a) On http://mc.purelogics.info/church/mod/churchmod.php, let’s remove the

Photos and Videos:

We will replace them with “Media” which will just go to the new church media
page (#18). Any new photo, video, document, or audio will fall under this
Media category

b) If there are new media posts of any type (and approval is required), we
will display “Pending approval: [num] posts”:

c) On http://mc.purelogics.info/church/mod/settings/approval.php, we are
consolidating approval settings for all media types. So let’s remove the
Photos and Videos:
 We will replace with Media:

This approval setting applies for photos, videos, documents, and audio.
There will be no independent approval control for each media type.

18)Church Media page display changes and notes

a) Let’s assign this page the mychurch.org/churchname/media URL.

b) Note we are getting rid of Photos, Videos, and Audio & Files tabs
completely
c) The title of this page is “Media from [churchname]” (12-pt bolded,
#666666 font). Let’s put a line (also in bolded #666666) below the title.

d) Underneath the line, we’ll have a “view all” pulldown in 9-pt bolded
#666666 font, which pulls down a box with 4 options (in 10-pt bolded
#336799 font):

Photos
Videos
Audio
Documents

If the user clicks on one of these, we’ll filter all the posts to show just the type
that was selected.

e) For the pagination, let’s just show 10 items per page for now and include
the same style of pagination that we have in the church’s Community tab

f) Just like the Church Community page, let’s show the most-recently
updated or commented post on top