Single Web Page UI

ステータス: Closed
賞金: $50
受け取ったエントリー: 1
優勝者: jonokemball

Winner

コンテスト概要

I am looking for what I think should be a very simple interface. I would build it myself, but I just can't find the time. Lucky you!

Essentially, I'm looking for a single page that will load a list of server-side video files sitting in a particular path on the left, and when you click on one of those items it displays the video player on the right with controls so the user can play, pause, fullscreen, etc.

I would like the page as a whole to be non-scrolling, and have the components fill the window, and resize gracefully when the window does. The resolution and ratio of screens that this will be used on with vary greatly. on a standard 16:9 wide screen monitor, i'd like the list to take up about 25% of the view, as this should allow for the file name to display properly with plenty of space for the video, but then should not collapse down too small or get extra large with other ratios of the window so as not to hide or distort the look and feel of the list. The video area with notes and title (see bonus below regarding notes and title) should take up as much area as possible, but not expand past the size of the window.

The file list will need to be able to grow to more items than can be displayed on the screen, so that list area will need to scroll. The files are just going to show up on the file system, so the list will need to automatically update periodically to reflect the new files. The delay shouldn't be more than a few seconds between updates. However, if the list is scrolled, I can't have it constantly refreshing and going back up to the top, or some silly thing like that. It needs to update, but remain in it's current location, unless it's at the very top, in which case it can update and keep the list scrolled to the top. The new files will almost always be at the top of the list. When hovering over the file in the list, there should be a hover effect with alt-text showing the filename as well (important for bonus option).

The list will be a two level list. First level will be the date, which will need to be picked up from the filenames. The filenames will be like: YYMMDD_HHMMSS.mp4

Take the date portion, and make a list item, then in a sublist, put all of the files that are from that date, etc, etc, in descending order, with the most recent date/files at the top of the list.

I'm attaching a hand drawn picture of what I'd very roughly like it to look like.

The video files will just be standard mp4, so no special player or plugins should be required, just the html5 video tags, I'm sure.

I will pay a Bonus if your design allows for being able to edit the file name, or at least the name that is displayed for the file in this interface, and add notes for each video. For this, the use case is that the files will just show up in the file system, and then the person using this interface will be able to change the name to something more useful and add notations for that video that can be referenced later. If I were doing this, it would interact with a db, but if you have a way to do it without that, I'm ok with that too. Whatever works properly is fine with me, as long as I can work with it later.

If the title is updated by the user, the file list should reflect using that title, instead of the date_time filename, but should still have a hover effect with the alt-text of the original file name. And it should remain in order by the original file name (date/time order descending).

The look and feel should be clean, modern, high performing with low backend resource utilization. Need to make sure that if I play a video, and then click a new file, that the first video should have stopped, and doesn't keep playing in a hidden view. I'm not looking for a mock-up, or graphics as the end product, I'm looking for someone to write the actual code.

All code must be free from any copyrights or license requirements, or any other restrictions on use.

Any combination of PHP, Javascript, CSS, HTML are fine.

推奨スキル

Winner

このようなコンテストを投稿する

採用者フィードバック

“Excellent work, and more than willing to make adjustments to whatever I needed. Thanks!”

bortegavw, United States.

公開説明ボード

Pieter2627
- 7年間前
Will you be the only one using this? If multiple users will use it, should one's notes be visible to all?
- 7年間前
1. コンテスト所有者
  - 7年間前
  more than one person may use it at the same time, everyone should be able to see everything.
  - 7年間前
dragonnpoulp
- 7年間前
Is nodejs server welcome?
- 7年間前
1. コンテスト所有者
  - 7年間前
  unfortunately, no. but thank you.
  - 7年間前
arkadebnath
- 7年間前
$50 is okay for this project but as I need to get into the coding job, I must be sure that you'll choose me winner. I can show you my HTML5, CSS3, PHP, Ajax jobs (yes these are required for your page) if you send me a private message.
- 7年間前
1. コンテスト所有者
  - 7年間前
  This is a contest, so I'll need to see actual entries for my particular project, not just prior work.
  - 7年間前
2. コンテスト所有者
  - 7年間前
  I would be interested in seeing some of your other work though, if you would like to show me some ideas and see if I'm interested in going a particular way.
  - 7年間前
jonokemball
- 7年間前
#guaranteed
- 7年間前
1. コンテスト所有者
  - 7年間前
  this project is now guaranteed
  - 7年間前
NestorheadFree
- 7年間前
I can make it for a US$50 in 15 days.
- 7年間前
1. コンテスト所有者
  - 7年間前
  I'd love to see your entry.
  - 7年間前
suryakumaran11
- 7年間前
do you need the code to be uploaded here or host it in my server and share you the link for the full working project?
- 7年間前
1. コンテスト所有者
  - 7年間前
  Both would be very helpful in being able to select the best option.
  - 7年間前
thecedi0
- 7年間前
#guaranteed #increaseprize
- 7年間前
shridesigning
- 7年間前
Hello,
I am able to do Design + HTML, Please let me know if it is okay or you need PHP code too?
- 7年間前
ZFredD
- 7年間前
#guaranteed, #increaseprize.
- 7年間前