code

izvestia · Jun 19, 2018 · 0f04299 · 0f04299
1 parent 66d18fb
commit 0f04299
Show file tree

Hide file tree

Showing 7 changed files with 526 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea/
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,7 @@
+Copyright © «2018» ООО «МИЦ «Известия»
+
+Данная лицензия разрешает лицам, получившим копию данного программного обеспечения и сопутствующей документации (в дальнейшем именуемыми «Программное Обеспечение»), безвозмездно использовать Программное Обеспечение без ограничений, включая неограниченное право на использование, копирование, изменение, слияние, публикацию, распространение, сублицензирование и/или продажу копий Программного Обеспечения, а также лицам, которым предоставляется данное Программное Обеспечение, при соблюдении следующих условий:
+
+Указанное выше уведомление об авторском праве и данные условия должны быть включены во все копии или значимые части данного Программного Обеспечения.
+
+ДАННОЕ ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ЯВНО ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ ГАРАНТИИ ТОВАРНОЙ ПРИГОДНОСТИ, СООТВЕТСТВИЯ ПО ЕГО КОНКРЕТНОМУ НАЗНАЧЕНИЮ И ОТСУТСТВИЯ НАРУШЕНИЙ, НО НЕ ОГРАНИЧИВАЯСЬ ИМИ. НИ В КАКОМ СЛУЧАЕ АВТОРЫ ИЛИ ПРАВООБЛАДАТЕЛИ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ПО КАКИМ-ЛИБО ИСКАМ, ЗА УЩЕРБ ИЛИ ПО ИНЫМ ТРЕБОВАНИЯМ, В ТОМ ЧИСЛЕ, ПРИ ДЕЙСТВИИ КОНТРАКТА, ДЕЛИКТЕ ИЛИ ИНОЙ СИТУАЦИИ, ВОЗНИКШИМ ИЗ-ЗА ИСПОЛЬЗОВАНИЯ ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ИЛИ ИНЫХ ДЕЙСТВИЙ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.
diff --git a/README.md b/README.md
@@ -1,2 +1,7 @@
-# share
-videojs share button
+# videojs-share
+
+Плагин добавляет возможность поделиться ссылкой на видео.
+
+[Пример настройки](https://github.com/izvestia/videojs-share/blob/master/example.html)
+
+![Пример](https://github.com/izvestia/videojs-share/blob/master/example.jpg "Пример")
diff --git a/example.html b/example.html
@@ -0,0 +1,71 @@
+<head>
+
+    <!-- Плеер css -->
+    <link href="https://vjs.zencdn.net/7.0.3/video-js.css" rel="stylesheet">
+    <!-- Плагин css -->
+    <link href="videojs-share.css" rel="stylesheet">
+
+</head>
+
+<body>
+
+    <!-- Плеер -->
+    <video id="player" class="video-js" width="560" height="315"></video>
+
+    <!-- Плеер js -->
+    <script src="https://vjs.zencdn.net/7.0.3/video.js"></script>
+    <!-- Плагин js -->
+    <script src="videojs-share.js"></script>
+
+    <!-- Конфигурация -->
+    <script>
+
+        // Обычная настройка плеера
+        var Player = videojs('player', {
+            controls: true,
+            autoplay: false,
+            preload: 'auto',
+            poster: 'https://www.sample-videos.com/img/Sample-jpg-image-100kb.jpg',
+            sources: [{
+                src: 'https://www.sample-videos.com/video/mp4/480/big_buck_bunny_480p_30mb.mp4',
+                type: 'video/mp4'
+            }]
+        });
+
+        // Настройка шаринга
+        Player.share({
+            title: 'Поделиться',
+            code: '<iframe class="iz-player" src="' + window.location + '" width="560" height="315" frameborder="0" allowfullscreen></iframe>',
+            url: window.location,
+            icon: {
+                title: 'Ты должен это увидеть',
+                vk: {
+                    image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAD5AAAA+QEdhgSBAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAASlQTFRFRGeNRWiNRWiOR2mPSGqPSGuQS2yRS22RTW6STm+TT3CUUHGUUHGVUXKVUnKVU3OWVXWXVnWYVnaYWHeZW3qbXnydX32eYn+fZ4SiaoakbIelbIimbYimbommb4qncIuocYypc42qd5GsepOue5SvfJWvfpawgpqzhZu0hZy1hp21h562iZ+3iqC3jaK5j6S7kqe9lKi+lam+lam/l6rAmKzAnrDEprbIqbnLrLzMrr3Osb/PtMLRucbUvMjWvcnXw87axM/bxdDcyNLdydPezdbhztfh0Nni0trj0tvk1Nzl1t7m197m19/n2+Lp3ePq4uft4uju5Onu6Ozx6O3x7fD07vH18PP28fT38vT38/X38/X49ff59vj6+vv8/P39/f3+/v7/////T9XPuQAAAOZJREFUGBntwYVCwgAABNADA2e3ooLMLsTEFhsDlDkszN3/f4S7DXTAL/AeGir6EpPxiQ4A0Wvbtq3DMFxdCdM04xHIAV0fQ8DYI2UZQGuRsgeZo1wAiFLWAWzTMwsJFSjTQA8lBbS9UPLwJSmFJhiUJJCmfMfgC91RNhGhLKH/nZJGxegPXaXuEcpa8y0lG8affcrNCSV3RnkdwD/jiXU2ELTIOjuocsVaTgpBw2+s5awiaPyTZc/zeXqcGQTFivQdw8jRUxpEUPvRF2UL6HygZxfVjJXMefa0F0DLwqVlWfdTaCj7BZ5waWAb+1niAAAAAElFTkSuQmCC',
+                    url: 'https://vk.com/share.php?url='
+                },
+                ok: {
+                    image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsRAAALEQF/ZF+RAAAAGXRFWHRTb2Z0d2FyZQBwYWludC5uZXQgNC4wLjEzNANbegAAArpJREFUSEu10ttP02AYBvD3v1gPQ0lkmOilemNiIlx6adQLrxAFObMxDuHgAgRjQE1EY2KUG6+IiNHgAQxKUAiKJAZMkKMYDacdYYVubb9+re1KpOu6jpt++V2sz56+b9cMJJ/DVoBvOGxl/wKxxWErQM0OWwFqctgKhEbiIFDnCXGoA8++wzOvxBc1QluuoZAO8I1ERqi3ROZZWXekyF+hO89QMwVcA2FNeHhOFpE6NR7F8x/xrwlZ5NUdW6tc61FDORXE6wlreGFEHbe9zt06qSYNJP/kkozUHehtu75pCmJ1hIV4U7aMOGWW8KZ9P68nxdn3SogXP+2HaQBbS1iIteRoL4Tv8+hzNPVMXbDyVR+aAtZLWCLx5oIyS1waY2tpLYz5jkuMX/1ZYz26pjnYrSGtcX21yix1x/wo97SI63Vj/5J6jfhY11lDORXseMgMvE40/TqxQnckzL30GZtmgHGTGdRkMR463t+MN5UHl2Qsiivf2EeX1a+8h5KaZiBaTablyRIXx2VR4IYfME3H1MR7WAmj1dTOzTPox5CyjBu8k3RLCtiuItOqc0lxZu+VcLvCzKAyjhu+j5a/KKO1HM2NGu9KBlsVpIWd7vPin2nljWvjko4oCDNDUd8pwy0GECmnMqjMYu5d4Cf7MRPYm+xfiY883u7IMzbNQLiMOoiIJ0f4OaqOl6TYQGe43GkopAOhUiqjsNslzH1OPH3iSJgd6AqVOQ01UxAsoayF3LnC/Lg2Gf3+jpmg+imxI1jqNJRTQeA6ZSFYni0sTyWGy8LSZLDKFWnLx9G9HbsDtw39VOAvpiyEmk9r/0hleqDiiBaGlR1MSAnR+sL/ZjqwWURZKaaZ5+3shx5/pUufh1rzYxN9kbsX9aEp2LhG2Qo2rtK2gvVC2lawVkjbCtau0LaC1QLaRgX0P7AZlEoNGSzLAAAAAElFTkSuQmCC',
+                    url: 'https://www.ok.ru/dk?st.cmd=addShare&st.s=1&st._surl='
+                },
+                fb: {
+                    image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAAPgAAAD4Ac/B5mUAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTM0A1t6AAABD0lEQVRIS2OwCp1PUzRqAUFEqQW2EQtiitcnV26GIzQF5FsQXbTh3JVnv379+Y8Efv76jaaMTAuqe/ehGQ0B1LEgMHPVl6+/oEaiAupYsHbndah5GIA6Fty4+wZqHhi8fvt1+tIz5Z17gKikYzeaYnIs+P4DJXyqevejKUBG5FgADAeo2WDgm7oCTQEyooIF3inL0RQgo8FhgXPskq5ZR+Hoz5+/ULPBYOqSU3CphkkH0fQSZQEw4UMNIwSu3n6NppfKFuw5ehdNL5UtWLj2AppeKlvQMf0oml6iLPBIXLZl/y04+vv3H9Q8MAAGC1wqrngDml6iLEBDQzAfoKFRCwiiUQsIolELCCISLAidDwBMKRwCdUtYAQAAAABJRU5ErkJggg==',
+                    url: 'https://www.facebook.com/sharer/sharer.php?u='
+                },
+                twitter: {
+                    image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAD5AAAA+QEdhgSBAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAPNQTFRFUKvxUavxUazxUqzxU6zxVq7xWK/yWa/yWrDyXLHyXrLyZrbzZ7bzaLfzabfza7jzbLnzbrnzcLr0cbv0crv0dr30d770eL70er/0e7/0f8L1gcP1hsX1iMb1isf2jMj2jsn2kcr2lMz2lcz3mc73nND3n9H3otL4o9P4pdT4ptT4p9X4qdb4qtb4r9j5r9n5str5tdv5uN35ud35ut76vN/6wuL6yOX7y+b7zef7z+j70On70un71Or81Ov82e382+783O783u/84fH95vP96vX96/X97vf+8Pj+8fj+9vv+9/v++fz//f7//v7//v//////30cB7QAAAMdJREFUGBndwYlaAVEABtDfxJDKGlqHZC9L21RaxhbJ9r//0+DLHffe8QTOwd4KnoagMQNwnXzOuXBiOK8bcOWdMDYiE65NB7zA1hsHEfz75kb7OQWXTY5v/Fg5pDDPYavMlZ+CCZxRuIMk0OfarP/SpGBBcp2dUpeB5IkL6o4gydFjCEWbugcogpUxVRkoDLtLxTs0VSpmSWgOWpQV4RUt/VF4xA4Jh0LdB9XxlVXpUBhZ8Lj8oPBbM7FL/Lbx2vuy79MG9tESkyBT9XTYC5sAAAAASUVORK5CYII=',
+                    url: 'https://twitter.com/intent/tweet?url='
+                },
+                google: {
+                    image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAAPgAAAD4Ac/B5mUAAAAZdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuMTM0A1t6AAACA0lEQVRIS+2U/yskcRjH799ybYjQYX3PESfxg18Iv0iEklx3V/fT+YGUrjtSEpEQoUhRvkQUMrN7lz3ssrt21uzs7sx685nG7HM7O5SrU/v0+mE+7+f5PO+ZZz4zb05zkv4pCQNTEgam/AcGXFEqV5hCxKdjaGCvKbqZmwzwpxFZBpKdw5L/YCVlpsQ2cPZ9lsXbyF8hCz5Hdwspjk8MA2ffF7VfJKIEg4GjA6BIASzxHHz5O1IfH2pgry1RRD/rfrM4y5WkM91WluUZH7FVZGuVGvz7TP/e1vWPAaIzqIF3fop1960tkZQRcL2/m5UFojOoQYA7YQa2qjxVtFquhgcJf3pakfpVV3bW0XT+qRP14v42rgFXEHXkog3yk5VQCNVhl1MvPjhGhbC5jpRnYlRd68JeXfi4lxpYLbIkoSjsdT+KxgZnbQ2uoW/u0SEoEn+Ma6C9NgYdkXh8yFrg8VUx9+3Fxw6Gb3meZb0z49qW570D7/QYa4GZorU+hYMU9rhZFrPWdL4iOyz4cDo0RQ81wO1gPqyLuL/7u74SNlxxGr6v251Npt8PMM9CNhpBDcB5bxtrxAKfhRIKqguELDvaG8mWOMQwAI6u5qDrUu2oC9kvXHztIcXxiW0A+NIM1/d+YWM1dOXETMSDneuxn8/9TwBDg5ciYWBKwsCU126Qk3QHOF9HfqAmnhIAAAAASUVORK5CYII=',
+                    url: 'https://plus.google.com/share?url='
+                },
+                mail: {
+                    image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAIAAAD8GO2jAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAACXBIWXMAAAsRAAALEQF/ZF+RAAAAGXRFWHRTb2Z0d2FyZQBwYWludC5uZXQgNC4wLjEzNANbegAAAlRJREFUSEu10s9r02AYwPEnCSKCl9H+AYoVJuJhsoPoRfQwwbOK7ODFi3gRxbt48uLVkzCrzk03t/Xn2s7qitLhREZhDGfn7Fi3zrZJ2+RtkiZ535j4tjCSTXZ5Hz6HNG2+T3lbsDNsAcmwBTjNFlhptsBMsQXGLFvQSXJMgZ7kmAI1zjEF7RjHFKAot7f4YTU3cEDOh72P94Ac4fyUZB/6eLrz45FNLNsm/0PMTvEJ+hBS4kc8EQpaM5yfMhci2jbKndMKd52Evd8QU1t+gObPYrUkJwOeCAWNac5PzoSc705MBeWH0OJ1Yqnd4q4hltb+fkv5cokYDRsbzUTAE6FAmuL8mml3gVvBGlq8KX++TIwW7dIhZkvJX0Vfr9lYc19joxEPeCIU1N/zfo1Ud4E7xGwX7jWzg1j/Q29gvdb8dB4t3XG69I5zIcWCnggFtUneT9q9wCZ6KVyP9EnpfkspWui3lDlTjwb0jdHu+85gox4NeiIUVCd4P3G2t4BYaOWxmDplySva+vN64lg9eUJde2a2lsVUf3v1qXOIdEEtEvREKNh5x/vVkv9+ZEttfbstZi9gvepWbFvfiuibE/Qaq2VxblAuPHQPChvVmaAnQkHlLe9XTZx0omLuSiN/g5iIFv2DO5I4P9RYGCZGc2c66IlQsDXO+1WmAtXUQGvpvvNfdM9qf8SQpYXhWvbi9uRRT4SC8hi/t/FDlVjoQKLHy2OC9/Ee2HzDMwUbowJTUHotMAXrrwSm4NdLgSlYCwtMQTEsMAU/XwhMweqIwBTjBSPCX7IYHwaSRnkIAAAAAElFTkSuQmCC',
+                    url: 'mailto:?subject=Ты должен это увидеть&body='
+                }
+            }
+        })
+
+    </script>
+
+</body>
diff --git a/example.jpg b/example.jpg
diff --git a/videojs-share.css b/videojs-share.css
@@ -0,0 +1,171 @@
+.video-js {
+    overflow: hidden;
+}
+
+
+#vjs-share-open-button, .vjs-user-inactive #vjs-share-open-button {
+    -webkit-transition: .3s ease-in-out;
+    -moz-transition: .3s ease-in-out;
+    -o-transition: .3s ease-in-out;
+    transition: .3s ease-in-out
+}
+
+.vjs-user-inactive #vjs-share-open-button {
+    margin-right: -50px
+}
+
+#vjs-share-open-button-info {
+    background-color: rgba(29, 30, 31, 0.290196);
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 16px;
+    padding: 12px 5px;
+    text-align: center;
+    float: right;
+    cursor: pointer;
+    position: absolute;
+    right: 53px;
+    top: 55px;
+    display: none
+}
+
+#vjs-share-open-button:hover + #vjs-share-open-button-info {
+    display: block
+}
+
+.vjs-share {
+    background: rgba(0, 0, 0, .7);
+    display: none;
+    height: 100%;
+    left: 0;
+    overflow: hidden;
+    padding: 5px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1112;
+}
+
+.vjs-share-active {
+    display: block
+}
+
+.vjs-share-container {
+    -webkit-align-content: center;
+    align-content: center;
+    -webkit-align-items: baseline;
+    align-items: baseline;
+    display: -webkit-flex;
+    display: -ms-flex;
+    display: flex;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-flex-wrap: wrap;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -webkit-justify-content: center;
+    justify-content: center;
+    clear: both
+}
+
+.vjs-share-title {
+    font: 700 16px/1 Arial, sans-serif;
+    margin: 5px 0 0 10px
+}
+
+.vjs-share-close {
+    color: #fff;
+    font-size: 30px;
+    padding: 0;
+    text-align: center;
+    float: right;
+    cursor: pointer
+}
+
+.vjs-share-close:hover {
+    color: #9e03ff
+}
+
+.vjs-share-open {
+    background-color: rgba(29, 30, 31, 0.290196);
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 20px;
+    padding: 10px;
+    text-align: center;
+    float: right;
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    top: 55px
+}
+
+.vjs-share-open:hover {
+    color: #9e03ff;
+    cursor: pointer
+}
+
+.vjs-share-url {
+    font-size: 14px;
+    font-weight: 400;
+    margin-left: 3px;
+    margin-right: 3px;
+    margin-bottom: 3px;
+    width: 23%;
+    text-decoration: none;
+    color: #fff;
+    background-color: rgba(4, 4, 4, 0.35);
+    border: 1px solid rgba(0, 0, 0, 0.38);
+    cursor: pointer;
+    text-align: center;
+    white-space: normal;
+    line-height: 1.3;
+    padding: 0;
+    height: 44%;
+    overflow: hidden
+}
+
+.vjs-share-url:hover {
+    background-color: rgba(166, 0, 255, 0.35);
+}
+
+.vjs-share-img {
+    height: auto;
+    margin-bottom: 5px;
+    width: 100%
+}
+
+.vjs-share-icon-list {
+    max-width: 500px;
+    margin: 0 auto;
+    height: 40px;
+    padding-top: 20px;
+}
+
+.vjs-share-icon-list a {
+    display: inline-block;
+    height: 35px;
+    background-repeat: no-repeat;
+    width: 35px
+}
+
+.vjs-share-code {
+    max-width: 500px;
+    font-size: 10pt;
+    margin: 0 auto;
+    line-height: 1.5;
+    padding-top: 20px;
+}
+
+.vjs-share-code-textarea {
+    width: 100%;
+    height: 66px
+}
+
+.vjs-share-code-autoplay {
+    margin: 5px
+}
+
+.vjs-share-code-autoplay label {
+    cursor: pointer
+}