Loading text in card with video attachment - google-mirror-api

I noticed that some other glassware , cnn one, has a "Loading" text under the video icon when buffering a video attached to a card.
How can I achieve that?

This is an artifact of the way they're attaching video to their timeline cards. They are using video streaming.
This may be the best option if you already have video on a publicly accessible URL. To stream a video, specify the url in the menuItems.payload field. POSTing a timeline item with streaming video looks something like this:
POST /mirror/v1/timeline HTTP/1.1
Host: www.googleapis.com
Authorization: Bearer {auth token}
Content-Type: application/json
Content-Length: 42
{
"text": "Hello world",
"menuItems": [{
"action": "PLAY_VIDEO",
"payload":"http://example.com/kitten-on-skateboard.mp4"
}]
}
You can learn more about this in the documentation for attaching video.

Related

Displaying an image in full screen in new tab

I'm attempting to display both PDF and JPG files that are served from my backend to a new tab inside of the user's web browser. The code below works great for PDF files (opens them in new tabs and has adjustable sizing) but it automatically downloads the JPG files.
I've looked into embedding the images and making them fullscreen in a new tab as well as some react packages but I'm curious to see if there is a better way of doing this
openFile(file) {
var url = url/path/to/backend/request;
window.open(url, this.state.song.Title)
}
How can I force the JPG files to be displayed in a new tab like the PDF files are?
window.open should work fine, if it download the file, please check the response header Content-Type of your url is set correctly, it should be image/jpeg or image/png, etc, which depends on your image format.
You can use curl in terminal or use chrome developer tool to find it. If you use curl, try to run curl -I -X GET "your image url" to find out your response headers. You should get something output like this:
HTTP/2 200
server: nginx/1.12.2
date: Sun, 14 Jul 2019 16:26:25 GMT
content-type: image/svg+xml
content-length: 5501
For one, window.open() is kind of a mean way to do this: it bypasses the normal browser navigation system, so you really want to build an a with target="_blank" instead, which will do the same thing while respecting the user.
(set its style to display:none, remember to add it to the document, then call a.click(), then remove it again)
That said, browsers decide on whether to show or download based on mime-type, so make sure your server responds with the appropriate mime type for the files you want your users to see in-browser rather than download (e.g. don't send images with application/octet-stream)

Hello, how do i display an image using IBM Watson conversation that is linked to facebook messenger using IBM Watson?

I have created a bot using IBM Watson Conversation and that bot only is able chat with normal text. How do i program the bot to chat with images as well? How do i embed an image into the chatbots' response?
Within the dialog tool itself you will not be able to view any other type of media other than text. The output in the test panel will simply show the output from the node.
When deployed to an application such as a web application the output node would look something like this containing HTML markup:
{
"output": {
"text": {
"values": [
"Hello world Click here"
],
"selection_policy": "sequential"
}
}
}
In this case to display an image you would simply replace the link tag with that of an HTML image etc.
An example starter kit can be found here https://github.com/watson-developer-cloud/conversation-simple
You will need an orchestration layer to handle the encoding to the desired platform format e.g FB messenger requires an object to be passed such as
"buttons":[
{
"type":"web_url",
"url":"https://petersfancyapparel.com/criteria_selector",
"title":"Select Criteria",
"webview_height_ratio": "full",
"messenger_extensions": true,
"fallback_url": "https://petersfancyapparel.com/fallback"
}
]
An example orchestration layer such as Botmaster can be used alongside its extension fulfill that will allow you to create these objects and in the Watson dialog simply just add custom XML tags. E.g www.google.com this will then be passed to the orchestration layer which will send the relevant object. A code example using this method can be found here with some other Facebook actions.

how to implement link preview in angularjs

is there any directive in angularjs to implement the link preview in angularjs. I need to show the link preview while sharing a link in my web site similar to google plus.
There is some directive https://github.com/LeonardoCardoso/Link-Preview. But it uses php. I need without php.
If you are using Angular with material design you can use the following:
https://github.com/angular-material-extensions/link-preview
Else you can always do it manually using: Free link preview service
http://linkpreview.net is a Free REST API service which takes any URL as input and sends back JSON response with title, description and thumbnail.
All you need to do is send a request to their API with the URL for which link preview has to be generated.
Here’s an example request (GET)
http://api.linkpreview.net/?key=123456&q=https://www.google.com
Response:
{
"title": "Google",
"description": "Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for.",
"image": "http://www.google.com/images/branding/googlelogo/1x/googlelogo_white_background_color_272x92dp.png",
"url": "https://www.google.com/"
}
You can parse the response and style it.

Parse.com: I can upload image but I don't retrieve it

I'm using angular and the Parse.com REST API. When save an image I received the status code 201 with a name and url, but when I try to get image from this url, I get a broken image.
By example this url: http://files.parsetfss.com/e70a8a0f-f675-42e4-8b15-117a6ad959c5/tfss-ccdd1f71-86aa-41fc-86c4-1f0c67e74974-aa-music-blank2.gif
I would be use another way to save images in parse?

HTML5 video tag. Some .MP4 videos don't work in Chrome

We're making our webapp with ASP.NET MVC 5, and we're facing to an strange behaviour while playing our mp4 videos (codec h264 all of them) between web browsers.
These videos are not stored in filesystem, they're stored like BLOBs inside a table of our SQL Server.
The way we link our BLOBs with the HTML5 video tag is with a source that points to an Action that returns a FileStreamResult with ContentType header set properly.
Firefox and IE can play them, but Chrome can't with all. When I click on the 'Play' button, the videoplayer stills showing a black screen. When this happens and play button is clicked, network tab of the browser shows up two 200 HTTP responses: one with the video full size in bytes and the other one showing 0 bytes. No errors on console.
What's wrong with Chrome? What's wrong with us?
Thank you for your time guys, I'm so thankful to this site :)
After some time of researching, we found that MP4 videos with h264 codec that exceed 5MB/s bitrate are not played by Chrome HTML5 video player.
Until now our solution is reencoding MP4 videos that exceed that bitrate to solve this.
If anyone has a better answer, it obviously will be appreciated ;). We hope it could work for anyone that has the same problem.

Resources