pengjunjie/onlyoffice.github.io
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/onlyoffice.github.io.git synced 2026-02-10 18:05:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch hotfix/v5.6.0 into master

Browse Source
This commit is contained in:
papacarlo
2020-07-28 13:37:47 +00:00
parent 4f2f0daa70 15e987ca6d
commit 258849fcf4
12 changed files with 361 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
README.md
View File

@ -1,22 +1,11 @@
# YouTube plugin
## Overview
The YouTube plugin allows users to insert YouTube videos into text documents, spreadsheets and presentations, as well as to manipulate the embedded video: adjust its size, rotate and change position.
Easily embed YouTube videos into your documents.
The plugin is pre-installed in ONLYOFFICE Enterprise Edition, Community Edition (Document Server + Community Server), ONLYOFFICE Integration Edition, ONLYOFFICE cloud service, and ONLYOFFICE Personal.
It is installed by default in cloud, [self-hosted](https://github.com/ONLYOFFICE/DocumentServer) and [desktop version](https://github.com/ONLYOFFICE/DesktopEditors) of ONLYOFFICE editors.
## How to use
1. Place the cursor where you want a video to appear.
2. Choose YouTube from the Plugins tab.
3. Paste YouTube video URL and click the OK button.
4. Double click the video to play it.
## Documentation
Plugins structure and installation https://api.onlyoffice.com/plugin/basic.
Plugins code and methods https://api.onlyoffice.com/docbuilder/basic.
## User feedback and support
To ask questions and share feedback, use Issues in this repository.
1. Find the YouTube plugin in the Plugins tab.
2. Insert the video URL and press OK.
3. The video preview in form of an image will appear in your doc. Click on it to play the video.

45
config.json Normal file
View File

@ -0,0 +1,45 @@
{
"name": "YouTube",
"guid": "asc.{38E022EA-AD92-45FC-B22B-49DF39746DB4}",
"variations": [
{
"description": "YouTube",
"url": "index.html",
"icons": [ "icon.png", "icon@2x.png", "icon2.png", "icon2@2x.png" ],
"isViewer": true,
"isDisplayedInViewer": false,
"EditorsSupport": [ "word", "cell", "slide" ],
"isVisual": true,
"isModal": true,
"isInsideMode": false,
"initDataType": "ole",
"initData": "",
"isUpdateOleOnResize": false,
"buttons": [
{
"text": "Ok",
"primary": true
},
{
"text": "Cancel",
"primary": false,
"isViewer": false,
"textLocale": {
"ru": "Отмена",
"fr": "Annuler",
"es": "Cancelar",
"de": "Abbrechen"
}
}
],
"size": [ 350, 90 ]
}
]
}

BIN
icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
icon2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
icon2@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
icon@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

47
index.html Normal file
View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html style="height:100%;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>youtube</title>
<script src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>
<script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins-ui.js"></script>
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
<script type="text/javascript" src="youtube.js"></script>
<style>
.input_error {
display: none;
float: left;
position: relative;
}
.input_error:before {
content: '';
position: absolute;
right: 3px;
top: 3px;
width: 16px;
height: 16px;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAACvSURBVDhPrZNRDoIwEER7COA6HgJPpAnHM4oXQdFE/VDfNrsfpQvGhkneT2dmky40rK77pq6ggx4eyhF2UGnMF4EWBvjMcIFW46nEgLcGl5BMOoSDGmR6EjZNz0GyjdbjALlfFjR5HnRajwNkSVnI5HnQaz0OkE1nIZPnwVPrxQNGrc9f4Qcnra+zxAbKP6OIg/IfyYSxhasGPcTzyyYC9pjO8IIbHGAPy4/pf4XwBSVejZ5wzd0zAAAAAElFTkSuQmCC);
}
</style>
</head>
<body style="-ms-touch-action: none;-moz-user-select:none;-khtml-user-select:none;user-select:none;width:100%;height:100%;margin:0;padding:0;overflow:hidden;box-sizing:border-box;">
<div id="td_labelUrl" style="position:absolute;left:15px;top:15px;right:15px;height:20px;margin:0;padding:0;" class="defaultlable">Paste youtube video URL</div>
<div style="position:absolute;left:15px;top:35px;right:15px;height:40px;margin:0;padding:0;">
<div style="position:absolute;left:0px;top:0px;right:40px;height:100%;margin:0;padding:0;">
<input type="text" class="form-control" style="left:0px;top:0px;width:100%;" id="textbox_url" autofocus="autofocus" autocomplete="off">
<div id="input_error_id" class="input_error" style="position:absolute; top:0px; right:0px; width: 0px; height: 16px; display: none;"></div>
</div>
<button class="btn-text-default" style="position:absolute;top:0px;right:0px;width:30px;" id="textbox_button">OK</button>
</div>
<div id="id_player" style="position:absolute;left:15px;top:75px;right:15px;bottom:15px;margin:0;padding:0;"></div>
</body>
</html>
</html>

3
translations/de-DE.json Normal file
View File

@ -0,0 +1,3 @@
{
"Paste youtube video URL": "Fügen Sie die YouTube-Video-URL ein"
}

3
translations/es-ES.json Normal file
View File

@ -0,0 +1,3 @@
{
"Paste youtube video URL": "Pegue URL de vídeo YouTube"
}

3
translations/fr-FR.json Normal file
View File

@ -0,0 +1,3 @@
{
"Paste youtube video URL": "Collez URl de vidéo Youtube"
}

3
translations/ru-RU.json Normal file
View File

@ -0,0 +1,3 @@
{
"Paste youtube video URL" : "Вставьте ссылку на видео YouTube"
}

251
youtube.js Normal file
View File

@ -0,0 +1,251 @@
(function(window, undefined){
var url = "";
var player = null;
var isWindowPlayer = false;
var isViewerMode = false;
function getParam(url, param)
{
var _questPos = url.indexOf("?");
if (_questPos < 0 && _questPos >= (url.length - 1))
return undefined;
var _url = url.substr(_questPos + 1);
var _propPos = _url.indexOf(param + "=");
if (_propPos < 0 && _propPos >= (url.length - 1))
return undefined;
_propPos += param.length;
_propPos += 1; // '='
var _last = _url.indexOf("&", _propPos);
if (_last < 0)
_last = _url.length;
return _url.substr(_propPos, _last - _propPos);
}
function validateYoutubeUrl1(url)
{
var p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
return (url.match(p)) ? true : false;
}
function validateYoutubeUrl2(url)
{
var p = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
var match = url.match(p);
return (match && match[2] && match[2].length == 11) ? true : false;
}
var validateYoutubeUrl = validateYoutubeUrl2;
function getVideoId(url)
{
var _ids = url.split("/");
var _id = _ids[_ids.length - 1];
if (0 == _id.indexOf("watch?v="))
_id = _id.substr(8);
var _amp = _id.indexOf("&");
if (-1 != _amp)
_id = _id.substr(0, _amp);
return _id;
}
window.Asc.plugin.init = function(text)
{
var _textbox = document.getElementById("textbox_url");
_textbox.onkeyup = function(e)
{
if (e.keyCode == 13) // click on Enter
document.getElementById("textbox_button").onclick();
};
if (this.info.isViewMode != isViewerMode)
{
isViewMode = this.info.isViewMode;
var _table = document.getElementsByTagName("table")[0];
if (_table)
{
if (_table.rows[0])
_table.rows[0].style.display = isViewMode ? "none" : "";
if (_table.rows[1])
_table.rows[1].style.display = isViewMode ? "none" : "";
}
}
// clear validation on input/paste
_textbox.oninput = _textbox.onpaste = function(e)
{
this.style.borderColor = "";
document.getElementById("input_error_id").style.display = "none";
};
// ie
_textbox.addEventListener("paste", function(e)
{
this.style.borderColor = "";
document.getElementById("input_error_id").style.display = "none";
});
document.getElementById("textbox_button").onclick = function(e)
{
var _url = document.getElementById("textbox_url").value;
var _searchDoubleStart = 10;
var _findDoubleUrl = _url.indexOf("http://", _searchDoubleStart);
if (_findDoubleUrl < 0)
_findDoubleUrl = _url.indexOf("https://", _searchDoubleStart);
if (_findDoubleUrl < 0)
_findDoubleUrl = _url.indexOf("www.", _searchDoubleStart);
if (_findDoubleUrl > 0)
{
_url = _url.substr(0, _findDoubleUrl);
document.getElementById("textbox_url").value = _url;
}
if (!validateYoutubeUrl(_url))
{
document.getElementById("textbox_url").style.borderColor = "#d9534f";
document.getElementById("input_error_id").style.display = "block";
return;
}
if (!isWindowPlayer)
{
var _table = document.getElementById("id_player");
_table.innerHTML = "<div id=\"content\" style=\"position:absolute;padding:0;margin:0;left:0;top:0;width:100%;height:100%;\"></div>";
isWindowPlayer = true;
window.Asc.plugin.resizeWindow(620, 480, 390, 400, 0, 0);
}
if (true)
{
url = _url;
if (!player)
{
var opt = {
height: '100%',
width: '100%',
videoId: getVideoId(url),
playerVars: {
'fs' : 1
}
};
var _time = getParam(url, "t");
if (_time && _time.length > 0)
opt.playerVars.start = parseInt(_time);
player = new YT.Player('content', opt);
}
else
{
if (player.stopVideo && player.loadVideoById)
{
player.stopVideo();
player.loadVideoById(getVideoId(url));
}
}
}
};
url = text;
if (url == "")
{
this.resizeWindow(350, 90, 350, 90, 350, 90);
}
else
{
document.getElementById("textbox_url").value = url;
document.getElementById("textbox_button").onclick();
}
_textbox.focus();
};
window.Asc.plugin.button = function(id)
{
try
{
if (player && player.stopVideo)
player.stopVideo();
}
catch (err)
{
}
if (id == 0)
{
url = document.getElementById("textbox_url").value;
if (!validateYoutubeUrl(url))
{
document.getElementById("textbox_url").style.borderColor = "#d9534f";
document.getElementById("input_error_id").style.display = "block";
return;
}
var _id = getVideoId(url);
var _questPos = _id.indexOf("?");
if (_questPos > 0)
_id = _id.substr(0, _questPos);
var _url = "http://img.youtube.com/vi/" + _id + "/0.jpg";
if (_id)
{
var _info = window.Asc.plugin.info;
var _method = (_info.objectId === undefined) ? "AddOleObject" : "EditOleObject";
var _param = {
guid : _info.guid,
widthPix : (_info.mmToPx * _info.width) >> 0,
heightPix : (_info.mmToPx * _info.height) >> 0,
width : _info.width ? _info.width : 100,
height : _info.height ? _info.height : 70,
imgSrc : _url,
data : url,
objectId : _info.objectId,
resize : _info.resize
};
window.Asc.plugin.executeMethod(_method, [_param], function() {
window.Asc.plugin.executeCommand("close", "");
});
}
else
{
this.executeCommand("close", "");
}
}
else
{
this.executeCommand("close", "");
}
};
window.Asc.plugin.onEnableMouseEvent = function(isEnabled)
{
var _frames = document.getElementsByTagName("iframe");
if (_frames && _frames[0])
{
_frames[0].style.pointerEvents = isEnabled ? "none" : "";
}
};
window.Asc.plugin.onTranslate = function()
{
var label = document.getElementById("td_labelUrl");
if (label)
label.innerHTML = window.Asc.plugin.tr("Paste youtube video URL");
};
})(window, undefined);