Peertube: Inject video title/description in HTML

Created on 31 Mar 2018  ·  6Comments  ·  Source: Chocobozzz/PeerTube

When pasting the video on most places works.. but in others it does not show(the video name).. only shows as "PeerTube" will look when I have time why.. but just for the heads up I put it here in case this is happening to other people and they just think is their fault or nobody has notice.

Type

Most helpful comment

Thanks @wirew0rm - that's enough to investigate indeed

All 6 comments

@ReK2Fernandez please describe properly the issue, as right now it's too vague to figure out. I'll reopen then.

Also stumbled upon this issue with our IRC bot.
The bot fetches the url to extract the title to provide context for other people in the channel.
Because the title is not in the original html but presumably updated later from client side code, the bot cannot show the video title.
Most messenger apps seem to read opengraph data and show the title correctly.

This is an example from our channel, GlaDOS is the bot that fetches the titles for the url and the first time it works as expected, the second time not so much.
image

Running

curl https://peertube.video/videos/watch/41dd1087-c2bb-48d9-9c5c-071119b61ac1

returns

[...]
<title>PeerTube.video</title>
[...]
<meta property="og:type" content="video" /><meta property="og:title" content="Introducing GNOME 3.30: “Almería”" />
[...]

So the fix would be to use the og:title contents also in the html tag (or make bots read the og:title tag).</p> <p>I hope this actually is the same problem and this explanation is sufficient to reopen the issue.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars2.githubusercontent.com/u/1202371?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="wirew0rm picture"> <strong>wirew0rm</strong> <span class="text-muted ml-1">on 11 Sep 2018</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">3</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Thanks <strong>@wirew0rm</strong> - that's enough to investigate indeed</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/6329880?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="rigelk picture"> <strong>rigelk</strong> <span class="text-muted ml-1">on 11 Sep 2018</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">3</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Not the cleanest but if you:</p> <ul> <li>comment out lines 29 - 30 in /server/lib/client-html.ts</li> </ul> <pre><code class="prettyprint"> html = ClientHtml.addTitleTag(html) html = ClientHtml.addDescriptionTag(html) </code></pre> <ul> <li>replace line 178 in /server/lib/client-html.ts with:</li> </ul> <pre><code class="prettyprint"> const titleTag = '<title>' + videoNameEscaped + '</title>'; const descriptionTag = `<meta name="description" content="${videoDescriptionEscaped}" />`; return htmlStringPage.replace(CUSTOM_HTML_TAG_COMMENTS.OPENGRAPH_AND_OEMBED, tagsString).replace(CUSTOM_HTML_TAG_COMMENTS.TITLE, titleTag).replace(CUSTOM_HTML_TAG_COMMENTS.DESCRIPTION, descriptionTag); </code></pre> <p>...that should change the title and description to what they should be.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/10625352?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="c-prompt picture"> <strong>c-prompt</strong> <span class="text-muted ml-1">on 29 Nov 2018</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I fixed it in <a rel="nofollow noopener" target="_blank" href="https://github.com/Chocobozzz/PeerTube/commit/9aac44236c84f17b14ce35e358a87389766e2743">https://github.com/Chocobozzz/PeerTube/commit/9aac44236c84f17b14ce35e358a87389766e2743</a></p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars0.githubusercontent.com/u/5180488?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Chocobozzz picture"> <strong>Chocobozzz</strong> <span class="text-muted ml-1">on 10 Jan 2019</span> </div> <div class="col text-right"> 🎉<span class="ml-2 mr-3">2</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>thanks! <strong>@Chocobozzz</strong> </p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars1.githubusercontent.com/u/5316229?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="r3k2 picture"> <strong>r3k2</strong> <span class="text-muted ml-1">on 11 Jan 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(310182685, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(310182685, 1);" onclick="rate(310182685, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(310182685, 2);" onclick="rate(310182685, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(310182685, 3);" onclick="rate(310182685, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(310182685, 4);" onclick="rate(310182685, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(310182685, 5);" onclick="rate(310182685, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/peertube/484713611/menu-scrollbars-display-could-be-better">Menu & Scrollbars - Display could be better :)</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/21110485?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="Angedestenebres picture"> <strong class="pr-1" dir="ltr">Angedestenebres</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/peertube/317427537/nodejs-oh-come-on">NodeJS? Oh come on...</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars2.githubusercontent.com/u/661984?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="zilti picture"> <strong class="pr-1" dir="ltr">zilti</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/peertube/451954035/video-available-only-by-private-link-invisible-in-playlist">Video available only by private link invisible in playlist</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars3.githubusercontent.com/u/381111?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="ufm picture"> <strong class="pr-1" dir="ltr">ufm</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/peertube/427553303/comment-reporting">Comment reporting</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars0.githubusercontent.com/u/28912578?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="XenonFiber picture"> <strong class="pr-1" dir="ltr">XenonFiber</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/peertube/341826053/community-install-fails-importing-compiler-ast">[community] install fails importing compiler.ast</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars2.githubusercontent.com/u/33236264?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="filmaidykai picture"> <strong class="pr-1" dir="ltr">filmaidykai</strong>  ·  <span class="px-1" dir="ltr">3</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/Chocobozzz/PeerTube/issues/449" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <!--<script defer type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5fb2db66acbd74b2"></script>--> <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>