Before I started some video I'm seeing downloads in network tab, is preview create a pre cache?

New post

September 01, 2017 12:57

I gave a couple of videos on my page. They are showed by box content preview, but before I started some video I'm seeing downloads in network tab, is preview create a pre cache? Is possible to disable this?

Comments

15 comments

tonyjin

September 01, 2017 15:37
Hello! Can you share which network requests you're concerned with? (Please don't include access tokens). Some of these are fetching static assets required for previewing and some of these are for the video content so it can play as soon as possible after you press play.
0

Comment actions Permalink
ricardocunha

September 04, 2017 11:38
Hi ,

I'm taliking about the requests, after shaka-player.compiled.js. I understand the first 4 requests are completely necessary, but after this I don't know what is happening, could you explain me?

preview.js //Box API
preview.css //Box PAI css
19***phone number removed for privacy***?fields=permissions,parent,shared_link…tations,watermark_info,authenticated_download_url //request to API and response JSON with info about the file
shaka-player.compiled.js //requested by preview.js

After this the box preview starts a lot of requests without I click on video play:

init.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
1.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
init.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
1.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
2.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
2.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
events
?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA&box…me=box-content-preview&box_client_version=0.121.1
3.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
events
3.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
4.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
4.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
5.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
5.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
6.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
6.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
7.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
7.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
8.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
8.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
9.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
9.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
10.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
10.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
11.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
11.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
12.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
12.m4s?access_token=AAAAAAAAAAAAAAAAAAAAAAAAAAAA=box-content-preview&box_client_version=0.121.1
0

Comment actions Permalink
JohannesMaria

September 04, 2017 16:21
Hi Ricardo,

yes, in a way this is a preview cache, and it cannot be disabled (unless you are not talking about disabling preview all together).

The files are basically the stream positions. You can verify this if you hover over your video, you will see the media bar be filled

from left. If you click on the media bar right to the white filling indicator, the next parts are downloaded. This is needed to give

the experience of a preview, and not of a download. The parts are usually small, 50kB to 1MB.

If you want to dig into this a little bit further here is some reading about preview UI elements:

https://developer.box.com/v2.0/docs/box-content-preview

Let me know if this answers your question.

Thanks

Johannes
0

Comment actions Permalink
ricardocunha

September 05, 2017 05:52
Ok, in this case, I was thinking about doing it for my own, it's possible to retrieve a snapshot of the video or document? If possible I will put a snapshot in front of preview and load the content after the user clicks on it.
0

Comment actions Permalink
Priyajeet

September 05, 2017 10:23
Thumbnail Representation

https://codepen.io/box-platform/pen/eEoMEG

Filmstrip Representation

https://codepen.io/box-platform/pen/WEWzGr
0

Comment actions Permalink
ricardocunha

November 09, 2017 04:29
Hi Guys,

I had success using the examples above and reading the https://developer.box.com/reference#representations documentation for mp4, pdfs and ppt, pptx, but for doc and docx , my representations are with "code": "error_conversion_failed" for all options, jpg, png and pdf. Any help?
0

Comment actions Permalink
mindflash

December 19, 2017 15:31
Hi Ricardo,

I'm coming across the same issue with DOC and DOCX representation requests for the PNG thumbnails. Whenever I hit the info.url returned by the representation request I get this as the status.
```
"status":{"state":"error","code":"error_conversion_failed"}
```
Did you ever find a solution to this problem, or at least a root cause?

Thank you,
Ingrid
0

Comment actions Permalink
tonyjin

December 19, 2017 16:04
If you share your file (either directly with Box support, who will route the file to us) or here, we can look into it. There may be an issue with the file itself that prevents conversion from working correctly.
0

Comment actions Permalink
mindflash

December 19, 2017 16:58
Ok, here's a link to the file:

https://drive.google.com/file/d/1YoDvwnGC24GE_Ea8UClBYt9GA-U_MEk0/view?usp=sharing

It's an extremely basic word doc file with minimal data in it to make a few pages. Please let me know if you are able to access the file.
0

Comment actions Permalink
tonyjin

December 19, 2017 17:11
Hmm I just tried getting representation status for that file after I uploaded it and found no issue. You may have run into a momentary issue with our conversion service, can you try re-uploading the file and checking representation status again? (You'll need to call https://api.box.com/2.0/files/FILE_ID?fields=representations again to get the info URL since re-uploading a file creates a new file version).

Sample response when I tried rep status on your file that I uploaded:
```
{
	"representation": "jpg",
	"properties": {
		"dimensions": "1024x1024",
		"paged": "false",
		"thumb": "false"
	},
	"info": {
		"url": "https:\/\/api.box.com\/2.0\/internal_files\/257636045868\/versions\/271545390924\/representations\/jpg_1024x1024"
	},
	"status": {
		"state": "success"
	},
	"content": {
		"url_template": "https:\/\/dl3.boxcloud.com\/api\/2.0\/internal_files\/257636045868\/versions\/271545390924\/representations\/jpg_1024x1024\/content\/{+asset_path}"
	}
}
```
0

Comment actions Permalink

mindflash

December 19, 2017 17:40

Ok, I should have clarified that it is happening with the PNG (1024x1024) representation specifically, which is the one I need, to get the thumbnail representation for each page of the document.

So, upon retrying several times what I'm seeing is that, sometimes the polling to the info url gets stuck in pending state. Just to be on the same page these are my steps (using box-node-sdk😞

1. Upload the file to Box --> This step is always successful since I get a document Id back w/o fail.

var box = new Box({
  clientID: config.clientID,
  clientSecret: config.clientSecret,
});
self.client = box.getBasicClient(config.apiToken);

var fileData = fs.createReadStream(self.inputFilePath);
self.client.files.uploadFile('0', self.inputFileName, fileData, function(err, data) {
  fs.unlink(self.inputFilePath, function() {});
  self.documentId = data.entries[0].id;
});

2. Get the PNG representation --> This step seems to be always successful since I get a info.url link back, status.state is always "none".

var box = new Box({
  clientID: config.clientID,
  clientSecret: config.clientSecret,
});
self.client = box.getBasicClient(config.apiToken);

self.client.files.getRepresentationInfo(self.documentId, '[png?dimensions=1024x1024]', function (err, data) {
var infoUrl = data.entries[0].info.url;
var options = {
    method: 'GET',
    uri: infoUrl,
    json: true,
    headers: { 'Authorization': `Bearer ${config.apiToken}` }
  };

  pollDocumentInfo(options);
});

3. Poll the info.url link every 1 second for 300 times at most to wait for the state to become 'successful', so I can actually get the PNG thumbnail for each page. --> This step gets stuck intermittently with state === 'pending'.

function pollDocumentInfo(options) {
  var interval = 1000;
  var attempts = 0;
  var attemptsAllowed = 60 * 5;

  var fx = function () {
    request(options, function (error, response, body) {

      if (body.status.state !== 'success') {
        if (++attempts >= attemptsAllowed) {
          return self.emit('error', new Error("Timed-out getting thumbnail."));
        }
        self.emit('poll');
        return setTimeout(fx, interval);
      }

      self.ret.numberOfPages = body.metadata.pages;
      self.ret.sessionAssetsUrl = body.content.url_template.replace('{+asset_path}', '');
    });
  };
  fx();
}

To be clear I'm expecting that step 3 above will never get stuck in the pending state for over the 300 tries every one second, but it does when one user is uploading the same document multiple times.

Thank you,

Ingrid

tonyjin

December 19, 2017 18:39
I'll confirm with my team about why you see 'none', but I suspect it's because the conversion job hasn't been triggered until you hit the info URL. 'pending' is a valid state and indicates conversion is in progress, you should poll until you see a status of 'success', after which the URL template should be swapped out with the desired page number to fetch content. A status of 'success' means all the pages are converted and ready to use.
0

Comment actions Permalink
mindflash

December 20, 2017 05:33
From reading documentation, I believe the status of none is expected when trying to get a the PNG representation because it is never triggered by default upon upload, hence I have to manually trigger it by hitting the info.url.

As per the Box API documentation:
https://developer.box.com/v2.0/reference#fetching-a-thumbnail-representation: "Thumbnail representations (all except 1024x1024 and 2048x2048 PNGs) are generated upon uploading the source file to Box."
https://developer.box.com/v2.0/reference#get-representations: "If the status is "none", generating the representation needs to be manually triggered. To trigger its generation, call the URL under the info.url field for that representation."

I believe I am doing all the necessary steps as previously stated and as specified in the Box API documentation to get the PNG representations for the docx file.
1. Upload the file
2. Get the info.url from the response of the representation request for PNG thumbnail
3. Poll the info.url by hitting it to find out when the representation will be ready by watching for the 'success' status

My question is: Why is it that the 3rd step gives me inconsistent behavior for the same exact docx file?

I try uploading the same file which I shared the link for earlier multiple times and sometimes the status changes to 'success' as quickly as in 2 seconds, and other times I will be polling the info.url for 300 seconds and the status is still in 'pending' state. Why would the conversion for the PNG representation for the same exact file finish so quickly and successfully sometimes but not finish at all other times? By finish I mean switch to 'success' status.
0

Comment actions Permalink

mindflash

December 20, 2017 10:13

Quick update, this issue seems to be wide spread with almost any docx document regardless of document size and complexity. What I'm seeing is that polling the info.url can come back as quickly as in 2 - 3 seconds with a status: { state: 'success' } when things go well. However there are times when it can stay stuck in status: { state: 'pending' } when things don't go well and it seems totally random.

Here's an example of my curl command and response after polling for well over 5 minutes for a docx document I uploaded that was only two pages and contained plain text. I think it is unacceptable that the thumbnail conversion for two plain text pages will take longer than 5 seconds.

Curl command:

curl https://api.box.com/2.0/internal_files/25***phone number removed for privacy***/versions/***number removed for privacy***849/representations/png_paged_1024x1024 -H "Authorization: Bearer XXXXXX"

Response Object:

{  
   "representation":"png",
   "properties":{  
      "dimensions":"1024x1024",
      "paged":"true",
      "thumb":"false"
   },
   "info":{  
      "url":"https:\/\/api.box.com\/2.0\/internal_files\/25***phone number removed for privacy***\/versions\/***number removed for privacy***849\/representations\/png_paged_1024x1024"
   },
   "status":{  
      "state":"pending"
   },
   "content":{  
      "url_template":"https:\/\/public.boxcloud.com\/api\/2.0\/internal_files\/25***phone number removed for privacy***\/versions\/***number removed for privacy***849\/representations\/png_paged_1024x1024\/content\/{+asset_path}"
   }
}

tonyjin

December 20, 2017 15:11
Thanks for clarifying - I discussed this with a few colleagues and we should have a fix for this. We will probably not be able to release this until the beginning of the new year due to holiday change moratoriums.
0

Comment actions Permalink

Please sign in to leave a comment.