Systems and methods for presenting and interacting with a picture-in-picture representation of video content on an electronic device with a touch-sensitive display
Systems and methods for multitasking using touch-sensitive devices are disclosed herein. In one aspect, a method includes: playing video content in a full-screen mode on a touch-sensitive display of an electronic device. While playing the video content in the full-screen mode, the method further includes: receiving a request to display a home screen on the touch-sensitive display. In response receiving the request, the method also includes: (i) displaying the home screen; (ii) resizing the video content to fit within a reduced area of the touch-sensitive display; and (iii) displaying the resized video content overlaying the home screen.
1. A non-transitory computer-readable storage medium storing executable instructions that, when executed by an electronic device with a touch-sensitive display, cause the electronic device to:
play video content in a full-screen mode on the touch-sensitive display, within a first application;
while playing the video content in the full-screen mode, receive a request to display a home screen on the touch-sensitive display;
in response to receiving the request:
display the home screen on the touch-sensitive display; and
display a resized representation of the video content that fits within a reduced area of the touch-sensitive display, wherein the reduced area overlays the home screen at a first location on the touch-sensitive display;
while displaying the resized representation of the video content:
detecting a contact on the home screen at an affordance associated with a second application, distinct from the first application;
in response to detecting the contact on the home screen at the affordance associated with the second application:
cease to display the home screen; and
display, on the touch-sensitive display, a user interface for the second application, the user interface including content of a predetermined content type displayed at a second location on the touch-sensitive display that at least partially overlaps the first location; and
display the resized representation of the video content at a third location different from the second location, wherein the third location is automatically selected by the device so that the third location in which the resized representation of the video content is displayed does not overlap with the second location of the touch-sensitive display in which the content of the predetermined content type is displayed, wherein the user interface for the second application is displayed while continuing to display the resized representation of the video content at the third location.
2. The non-transitory computer-readable storage medium of claim 1 , wherein the request is received via a selection of a button of the electronic device.
3. The non-transitory computer-readable storage medium of claim 2 , wherein the button is a hardware button of the electronic device.
4. The non-transitory computer-readable storage medium of claim 2 , wherein the button is displayed on the touch-sensitive display.
5. The non-transitory computer-readable storage medium of claim 1 , wherein the executable instructions further cause the electronic device to:
detect a contact on the resized representation of the video content; and
in response to detecting the contact, move the resized representation of the video content in accordance with movement of the contact on the touch-sensitive display.
6. The non-transitory computer-readable storage medium of claim 1 , wherein the executable instructions further include instructions for causing the electronic device to:
prior to displaying the resized representation of the video content at the third location:
determine whether the application contains any content of the predetermined content type;
upon determining that the application contains content of the predetermined content type:
determine the second location on the touch-sensitive display that corresponds to the content of the predetermined content type; and
automatically determine the third location based on the second location.
7. The non-transitory computer-readable storage medium of claim 6 , wherein the predetermined content type is identified by the application.
8. The non-transitory computer-readable storage medium of claim 6 , wherein the predetermined content type is identified by a user of the electronic device.
9. The non-transitory computer-readable storage medium of claim 1 , wherein the content of the predetermined content type is a keyboard.
10. An electronic device, comprising:
a touch-sensitive display;
one or more processors; and
memory storing one or more programs which, when executed by the one or more processors, cause the electronic device to:
play video content in a full-screen mode on the touch-sensitive display, within a first application;
while playing the video content in the full-screen mode, receive a request to display a home screen on the touch-sensitive display;
in response to receiving the request:
display the home screen on the touch-sensitive display; and
display a resized representation of the video content that fits within a reduced area of the touch-sensitive display, wherein the reduced area overlays the home screen at a first location on the touch-sensitive display;
while displaying the resized representation of the video content:
detect a contact on the home screen at an affordance associated with a second application, distinct from the first application;
in response to detecting the contact on the home screen at the affordance associated with the second application:
cease to display the home screen; and
display, on the touch-sensitive display, a user interface for the application, the user interface including content of a predetermined content type displayed at a second location on the touch-sensitive display that at least partially overlaps the first location; and
display the resized representation of the video content at a third location different from the second location, wherein the third location is automatically selected by the device so that the third location in which the resized representation of the video content is displayed does not overlap with the second location of the touch-sensitive display in which the content of the predetermined content type is displayed, wherein the user interface for the second application is displayed while continuing to display the resized representation of the video content at the third location.
11. The electronic device of claim 10 , wherein the request is received via a selection of a button of the electronic device.
12. The electronic device of claim 11 , wherein the button is a hardware button of the electronic device.
13. The electronic device of claim 11 , wherein the button is displayed on the touch-sensitive display.
14. The electronic device of claim 10 , wherein the one or more programs further cause the electronic device to:
detect a contact on the resized representation of the video content; and
in response to detecting the contact, move the resized representation of the video content in accordance with movement of the contact on the touch-sensitive display.
15. The electronic device of claim 10 , wherein the one or more programs further cause the electronic device to:
prior to displaying the resized representation of the video content at the third location:
determine whether the application contains any content of a predetermined content type;
upon determining that the application contains content of the predetermined content type:
determine the second location on the touch-sensitive display that corresponds to the content of the predetermined content type; and
automatically determine the third location based on the second location.
16. The electronic device of claim 10 , wherein the content of the predetermined content type is a keyboard.
17. A method, comprising:
at an electronic device with a touch-sensitive display:
playing video content in a full-screen mode on the touch-sensitive display, within a first application;
while playing the video content in the full-screen mode, receiving a request to display a home screen on the touch-sensitive display;
in response to receiving the request:
displaying the home screen on the touch sensitive display; and
displaying a resized representation of the video content that fits within a reduced area of the touch-sensitive display, wherein the reduced area overlays the home screen at a first location on the touch-sensitive display;
while displaying the resized representation of the video content:
detecting a contact on the home screen at an affordance associated with a second application, distinct from the first application;
in response to detecting the contact on the home screen at the affordance associated with the second application:
ceasing to display the home screen; and
displaying, on the touch-sensitive display, a user interface for the second application, the user interface including content of a predetermined content type displayed at a second location on the touch-sensitive display that at least partially overlaps the first location; and
displaying the representation of the video content at a third location different from the second location, wherein the third location is automatically selected by the device so that the third location in which the resized representation of the video content is displayed does not overlap with the second location of the touch-sensitive display in which the content of the predetermined content type is displayed, wherein the user interface for the second application is displayed while continuing to display the resized representation of the video content at the third location.
18. The method of claim 17 , wherein the request is received via a selection of a button of the electronic device.
19. The method of claim 18 , wherein the button is a hardware button of the electronic device.
20. The method of claim 18 , wherein the button is displayed on the touch-sensitive display.
21. The method of claim 17 , further comprising:
detecting a contact on the resized representation of the video content; and
in response to detecting the contact, moving the resized representation of the video content in accordance with movement of the contact on the touch-sensitive display.
22. The method of claim 17 , further comprising, prior to displaying the resized representation of the video content at the third location:
determining whether the application contains any content of a predetermined content type;
upon determining that the application contains content of the predetermined content type:
determining the second location on the touch-sensitive display that corresponds to the content of the predetermined content type; and
automatically determining the third location based on the second location.
23. The method of claim 17 , wherein the content of the predetermined content type is a keyboard.