brunnopleffken / addictive-community

The definitive open-source discussion forum software.
https://addictivehub.github.io/
GNU General Public License v2.0
28 stars 9 forks source link

Insert video(youtube) in post #80

Closed zalexstudios closed 7 years ago

zalexstudios commented 8 years ago

Insert video(youtube) in post? It's posible?

brunnopleffken commented 8 years ago

Actually it was possible at the beginning of the last year... Instead of a WYSIWYG editor, members used to sent their posts using a mix of BBCode and Markdown syntax (very similar to the GitHub's Markdown), with real-time preview and everything... It was really nice!

This was the JS file behind it (from history, the file doesn't exist anymore): https://github.com/brunnopleffken/addictive-community/blob/984783678c6f553f540b31600097bb5b1c692249/resources/markdown.parser.js

To make Addictive Community even better and easy, in this commit (b9917a58e1c71caef2a66b5c74ea1ed3ca837f6a) the Markdown syntax was replaced with the current beautiful WYSIWYG editor from TinyMCE, including a full framework rewrite that took me several days (34251228d48c84379052c234f02b03a98b218286 / f867e9b16ab44e781668d8b3d0b43dd29bf9a18c / 02cf15b5cd1c85f177a7fe2a74f3c7504c0e3ee6) because Addictive Community wasn't actually a MVC object-oriented framework.

Well, about videos! We had a tag [video:ID] (where ID is the YouTube's code for your video), automatically replacing it with an IFRAME with your video using JavaScript. I'll see if I can extend TinyMCE to add this kind of feature (embedded videos).

Sounds nice, and I want to implement it. ;)

halojoy commented 8 years ago

A youtube video is only a link. So it should not be difficult.

How is it with attachments in AC? I cant remember I have seen how one can upload images.

EDIT: I tested attachment with one big image. Works very well in AC.

brunnopleffken commented 8 years ago

Actually only the video ID is needed (the code before the ?v=), and then AC will do the rest. This is the code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/[ID]?rel=0" frameborder="0" allowfullscreen></iframe>

Attachments are OK, members can send any safe file without any problems ("safe", a.k.a. non-EXE, CMD, DMG, V1RU5.BAT, or those kind of files), and AC will recognize its extension and add the proper icon, file name and size.

johnforte commented 8 years ago

TinyMCE, has a media panel, but it is very general. I would recommend we go with a php function to turn a youtube link into a embedded video. But then this can go into so many things, like gfycat and images.

brunnopleffken commented 8 years ago

Indeed. The native TinyMCE support gives us two alternatives: referencing a URL to the video file and it auto-generates a <video> tag, or a TEXTAREA field to paste the embed code (usually an IFRAME). I don't like any of these solutions. Turn a YouTube link into an embedded video (using RegEx) sounds nice!

Posting images can remain as is, as there's a button to add images and it works nicely, but as you said, it gives us a lot of possibilities to extend this feature (maybe Facebook, Twitter or Instagram links being auto-converted to those boxes).

johnforte commented 8 years ago

Well I merely pointing out where do you cut off the php filter that turns links into embedded things, rather than having the user to make that decision, what should be a link vs embedded?

brunnopleffken commented 7 years ago

Version 0.12 (currently in development branch) will be released with this feature. So... It's done! :)