pengjunjie/onlyoffice.github.io
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/onlyoffice.github.io.git synced 2026-04-07 14:04:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add youtube plugin

Browse Source
This commit is contained in:
Alexander Trofimov
2022-06-24 17:10:32 +03:00
parent 2991e23538 498ae061fc
commit bcf214cd93
15 changed files with 399 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
sdkjs-plugins/content/youtube/README.md Normal file
View File

@ -0,0 +1,15 @@
## Overview
Easily embed YouTube videos into your documents.
The plugin uses [youtube iframe_api](https://developers.google.com/youtube/iframe_api_reference) allows to embed the YouTube video player and manage the use of JavaScript.
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. 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.
If you need more information about how to use or write your own plugin, please see this https://api.onlyoffice.com/plugin/basic

55
sdkjs-plugins/content/youtube/config.json Normal file
View File

@ -0,0 +1,55 @@
{
"name": "YouTube",
"guid": "asc.{38E022EA-AD92-45FC-B22B-49DF39746DB4}",
"version": "1.0.2",
"variations": [
{
"description": "YouTube",
"url": "index.html",
"icons": [ "resources/img/icon.png", "resources/img/icon@2x.png" ],
"icons2": [
{
"100%": { "normal": "resources/img/icon.png" },
"125%": { "normal": "resources/img/icon@1.25x.png" },
"150%": { "normal": "resources/img/icon@1.5x.png" },
"175%": { "normal": "resources/img/icon@1.75x.png" },
"200%": { "normal": "resources/img/icon@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 ]
}
]
}

62
sdkjs-plugins/content/youtube/index.html Normal file
View File

@ -0,0 +1,62 @@
<!--
(c) Copyright Ascensio System SIA 2020
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!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="scripts/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>

BIN
sdkjs-plugins/content/youtube/resources/img/icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 416 B

BIN
sdkjs-plugins/content/youtube/resources/img/icon@1.25x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 479 B

BIN
sdkjs-plugins/content/youtube/resources/img/icon@1.5x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 606 B

BIN
sdkjs-plugins/content/youtube/resources/img/icon@1.75x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 696 B

BIN
sdkjs-plugins/content/youtube/resources/img/icon@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 751 B

245
sdkjs-plugins/content/youtube/scripts/youtube.js Normal file
View File

@ -0,0 +1,245 @@
/**
*
* (c) Copyright Ascensio System SIA 2020
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
*/
(function(window, undefined){
var url = "";
var player = null;
var isWindowPlayer = 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");
// disable input and button elements in view mode
if (this.info.isViewMode) {
_textbox.disabled = true;
document.getElementById("textbox_button").disabled = true;
}
_textbox.onkeyup = function(e)
{
if (e.keyCode == 13) // click on Enter
document.getElementById("textbox_button").onclick();
};
// 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 !== "")
{
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.onTranslate = function()
{
var label = document.getElementById("td_labelUrl");
if (label)
label.innerHTML = window.Asc.plugin.tr("Paste youtube video URL");
};
})(window, undefined);

3
sdkjs-plugins/content/youtube/translations/cs-CS.json Normal file
View File

@ -0,0 +1,3 @@
{
"Paste youtube video URL": "Vložte URL adresu videa na YouTube"
}

3
sdkjs-plugins/content/youtube/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
sdkjs-plugins/content/youtube/translations/es-ES.json Normal file
View File

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

3
sdkjs-plugins/content/youtube/translations/fr-FR.json Normal file
View File

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

7
sdkjs-plugins/content/youtube/translations/langs.json Normal file
View File

@ -0,0 +1,7 @@
[
"cs-CS",
"de-DE",
"es-ES",
"fr-FR",
"ru-RU"
]

3
sdkjs-plugins/content/youtube/translations/ru-RU.json Normal file
View File

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